はじめに
Fioriアプリの開発を始めると、最初に立ちはだかるのが「SAPUI5って結局どういうフレームワークなの？」という疑問です。HTML/CSS/JavaScriptで動く、くらいの理解では、プロジェクトに参画してから混乱することになります。
この記事では、SAPUI5の基本概念であるMVCアーキテクチャ、コントロール階層、データバインディングの3つを押さえ、Freestyle開発でもFiori Elements開発でも土台となる共通知識を整理します。
SAPUI5とOpenUI5の違い
この2つは混同されがちですが、関係は明確です。
- OpenUI5：Apache 2.0ライセンスのオープンソース版。GitHub上で開発・公開されている
- SAPUI5：OpenUI5に、SAP独自機能（Smart Controls、分析機能、SAP Business Suite連携機能）を追加した商用版
基本的なコントロールやフレームワーク機能はどちらも同じです。SAP製品と一緒に開発するならSAPUI5、SAPと関係ない純粋なWebアプリならOpenUI5、という使い分けになります。S/4HANA上で動くFioriアプリはSAPUI5を使っています。
MVCアーキテクチャ
SAPUI5はMVC（Model-View-Controller）を基本設計として採用しています。
View（ビュー）
画面の見た目を定義するファイルです。XML View、JavaScript View、HTML View、JSON Viewの4形式がありますが、現場ではほぼXML Viewが標準です。理由は、宣言的で読みやすく、Fiori Elementsとも親和性が高いからです。
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="app.controller.Main">
<Page title="Hello Fiori">
<Button text="Click me" press=".onPress"/>
</Page>
</mvc:View>
Controller（コントローラ）
ViewのイベントハンドラやビジネスロジックをJavaScriptで記述するファイルです。ViewからpressイベントやchangeイベントがControllerのメソッドに渡り、ここでデータ取得・更新・画面遷移などの処理を行います。
Model（モデル）
データの保持と操作を担当します。UI5にはJSONModel、ODataModel、ResourceModelなど複数のモデル種別があり、用途に応じて使い分けます。多くのFioriアプリはODataModelを使ってS/4HANAのデータを取得します。
MVCの関係
flowchart LR V["View
XMLで画面定義"] -->|イベント| C["Controller
JS ロジック"] C -->|データ取得/更新| M["Model
JSONModel
ODataModel"] M -->|バインディング| V
ViewはControllerを知らず、Controllerが介入してデータをModelとやり取りし、ModelとViewはバインディングで双方向連携する、というのが基本の構造です。
コントロール階層
UI5の画面はすべて「コントロール」と呼ばれるUI部品のツリーで構成されています。sap.m（モバイル・レスポンシブ系）、sap.ui.table（大量データ向け）、sap.ui.layout（レイアウト専用）、sap.f（Fiori 3.0向け新コントロール）といったライブラリに分かれています。
現場で使用頻度が高いのは sap.m と sap.f で、これだけ押さえれば大半の業務画面が組めます。
よく使うコントロール例
- sap.m.Button：ボタン
- sap.m.Input：入力フィールド
- sap.m.Table（Responsive Table）：レスポンシブ対応の表
- sap.ui.table.Table（Grid Table）：大量データ向けの表
- sap.m.Dialog：ダイアログ
- sap.m.MessageToast / MessageBox：通知・メッセージ
コントロールはFiori Design GuidelinesのControlsセクションと対応しており、「このコントロールはいつ使うか」を参照できます。
データバインディング
UI5の強みの1つが、強力なデータバインディング機能です。ModelとViewを宣言的に結びつけることで、JavaScript側で明示的にDOMを操作する必要がなくなります。
1. プロパティバインディング
コントロールの1つのプロパティをModelの1つの値に結びつけます。
<Input value="{/customerName}"/>
customerNameが変わると自動でInputの値も更新されます。
2. 要素バインディング
コントロールの階層全体を、Modelの特定ノードにバインドします。子コントロールの相対パスはこのノードから解決されます。
<VBox binding="{/customer/0}">
<Text text="{name}"/>
<Text text="{address}"/>
</VBox>
3. 集約（Aggregation）バインディング
テーブルやリストのように複数行を表示するコントロールで、配列データを繰り返し描画します。
<List items="{/customers}">
<StandardListItem title="{name}" description="{email}"/>
</List>
customersが10件あれば、StandardListItemが10個生成されます。
4. 式バインディング
バインディング値を式（条件分岐・計算）で加工できます。
<Text text="{= ${price} > 1000 ? '高額' : '通常' }"/>
式バインディングは便利ですが、複雑な式はControllerに書いた方が可読性が高くなります。単純な条件分岐や文字列整形程度に留めるのが無難です。
プロジェクト構造
標準的なSAPUI5アプリのフォルダ構成です。
myapp/
├── webapp/
│ ├── Component.js # アプリのエントリポイント
│ ├── manifest.json # アプリ設定（ルーティング・モデル定義）
│ ├── view/
│ │ ├── Main.view.xml
│ │ └── Detail.view.xml
│ ├── controller/
│ │ ├── Main.controller.js
│ │ └── Detail.controller.js
│ ├── model/
│ │ └── models.js
│ └── i18n/
│ └── i18n.properties # 多言語リソース
└── package.json
manifest.jsonは「アプリの設定ファイル」で、使用するモデル、ルーティング定義、データソース、必要なライブラリを宣言的に記述します。Fiori Elementsを使う場合、ここが設定の中心になります。
開発環境
SAPUI5開発の標準IDEは Business Application Studio です。WebIDEが廃止された後の後継で、BTP上のクラウドIDEとして提供されます。
ローカル開発も可能で、Node.js + UI5 Tooling（ui5 serve）を使えばローカルで即座にプレビューができます。
よくある疑問
Q. JavaScript ViewとXML Viewのどちらを使うべきですか？
A. XML View一択です。Fiori Elementsとの連携、宣言的な記述、ツールサポートのすべてでXMLが有利です。JavaScript Viewは非推奨扱いとなっています。
Q. TypeScriptは使えますか？
A. 使えます。SAPUI5は公式にTypeScriptサポートを強化しており、@sapui5/ts-typesのようなパッケージで型定義が提供されています。新規プロジェクトはTypeScript採用が増えています。
Q. Reactで書けますか？
A. SAPUI5自体はReactではありません。ただしSAP Fundamental Libraryという、ReactやAngular向けのFioriスタイルコンポーネントライブラリがあり、これを使えばReactでFioriライクなUIを組むことは可能です。
Q. ODataなしでも使えますか？
A. 使えます。JSONModelを使って任意のREST APIや静的データとバインドできます。ただし、S/4HANAと連携する本格アプリではODataが標準です。詳しくはOData入門を参照してください。
まとめ
- SAPUI5はOpenUI5を基盤にSAP独自機能を追加した商用フレームワーク
- MVCアーキテクチャ（View・Controller・Model）でアプリを構成する
- XML Viewが標準。JavaScript Viewは避ける
- コントロールライブラリ（sap.m / sap.f / sap.ui.table / sap.ui.layout）から目的に応じて選ぶ
- データバインディングにはプロパティ・要素・集約・式の4種類がある
- manifest.jsonがアプリ設定の中心
次はSAPUI5ルーティングで、複数画面を遷移するアプリの作り方を見ていきます。
MVCアーキテクチャやデータバインディングの概念を理解した後は、実際にアプリを作りながら手を動かすのが定着の近道です。UI5の基礎からBTPへのデプロイまで、約15時間のハンズオン形式で一気に実装力がつきます。