はじめに
アプリが大きくなると、同じUI部品を複数画面で使い回したくなります。ダイアログ、検索フォーム、アクションバーなど、コピペで増殖させると修正時に地獄を見ます。
SAPUI5には再利用のための仕組みが3つあります：Fragment、Custom Control、Extension Point。それぞれ用途が違うので、適切に使い分けることがメンテナンス性の鍵です。
Fragment（フラグメント）
概要
Viewの一部分を切り出した部品です。独立したControllerを持たず、使う側のControllerを共有します。ダイアログや検索バー、再利用するフォーム部品に適しています。
基本の使い方
webapp/fragment/CustomerDialog.fragment.xml：
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Dialog title="顧客選択">
<List items="{/customers}">
<StandardListItem title="{name}"/>
</List>
</Dialog>
</core:FragmentDefinition>
Controllerから読み込み：
if (!this._oDialog) {
this._oDialog = sap.ui.xmlfragment("app.fragment.CustomerDialog", this);
this.getView().addDependent(this._oDialog);
}
this._oDialog.open();
addDependent を必ず呼ぶのがコツで、これを忘れるとフラグメント内のi18n/モデル参照が効かなくなります。
Fragmentを使うべきケース
- ダイアログ・ポップオーバー・メニューの外出し
- 複数Viewで共通のフォーム部品
- ViewのXMLが長くなりすぎた際の論理分割
Extension Point（拡張ポイント）
標準のFiori ElementsやSAP標準アプリをカスタマイズしたいときに使う、SAP公式の拡張ポイント機構です。Viewに「ここは拡張可能」と事前に定義されたポイントがあり、プロジェクト側でそこにFragmentを差し込めます。
<core:ExtensionPoint name="extCustomerDetail">
<!-- デフォルトコンテンツ -->
</core:ExtensionPoint>
Clean Core戦略（Clean Core戦略参照）の観点でも、Extension Point経由の拡張は推奨されます。標準コードに手を入れずに拡張できるためです。
Custom Control（カスタムコントロール）
Fragmentでは足りず、独自のふるまい・独自のレンダリングを持つUI部品を作りたい場合はCustom Controlを定義します。
sap.ui.define([
"sap/ui/core/Control"
], function(Control) {
return Control.extend("app.control.RatingStars", {
metadata: {
properties: {
value: { type: "int", defaultValue: 0 }
}
},
renderer: function(oRm, oControl) {
oRm.write("<div");
oRm.writeControlData(oControl);
oRm.write(">");
for (var i = 0; i < oControl.getValue(); i++) {
oRm.write("★");
}
oRm.write("</div>");
}
});
});
Viewからは通常のコントロールと同じように使えます：
<custom:RatingStars xmlns:custom="app.control" value="{rating}"/>
Custom Controlが必要になるケース
- 標準コントロールでは表現できない独自UIがある
- 複雑な状態管理を内部でカプセル化したい
- 独自のイベント・プロパティを公開したい
逆に「ちょっとした装飾」程度ならFragmentやCSSで済ませる方がメンテが楽です。
再利用の選び分け
flowchart LR
N[再利用したい] --> Q{何を再利用？}
Q -->|XML構造のみ| F["Fragment"]
Q -->|独自ふるまい必要| CC["Custom Control"]
Q -->|標準拡張| EP["Extension Point"]
F --> U1["Dialog
フォーム部品"]
CC --> U2["独自UI部品
プロパティ公開"]
EP --> U3["Fiori Elements拡張
SAP標準拡張"]Reuse Library（再利用ライブラリ）
複数アプリで共通して使う部品は、Reuse Library として独立したUI5ライブラリ化する選択肢もあります。BTP上のCAPプロジェクトでは ui5.yaml にライブラリ依存を書き、複数アプリから同じコントロールを参照できます。
大規模プロジェクトで開発者が10人を超える規模になると、この手法が効いてきます。少人数なら都度Fragment共有で十分です。
よくある疑問
Q. FragmentのControllerは別に作れますか？
A. 通常は使う側のControllerを共有しますが、sap.ui.xmlfragment(sId, sFragmentName, oController) で別のControllerインスタンスを渡すこともできます。複雑なダイアログでは分離を検討してください。
Q. Custom Controlのレンダリングでセキュリティ対策は必要ですか？
A. ユーザー入力を直接HTMLとして出すとXSSのリスクがあります。RenderManagerの writeEscaped メソッドを使ってエスケープしてください。
Q. 非推奨のJS Viewから移行するコツは？
A. XML Viewに書き換えるのが正道です。動的生成部分はFragmentまたはCustom Controlに切り出して対応できます。
Q. Fiori Elementsに独自UIを差し込むのは難しい？
A. Extension Pointが用意されている箇所ならXML Fragmentで差し込めますが、任意の場所には入れられません。詳細はFiori Elements全体像を参照してください。
まとめ
- Fragmentは「Viewの一部分の外出し」、Controllerを共有する軽量な再利用手段
- Extension Pointは「標準アプリの拡張点」、Clean Coreに沿った拡張に最適
- Custom Controlは「独自ふるまいを持つUI部品」を作るための機構
- 大規模プロジェクトはReuse Library化で共通部品を集約
- 選ぶ順序は Fragment → Extension Point → Custom Control の順で検討する
次はFiori Elements全体像で、これらの仕組みが標準提供されているアプリ生成フレームワークを見ていきます。
FragmentやCustom Controlの使い分けを実際のプロジェクトで試したい方には、UI5アプリを一から作ってBTPにデプロイするまでのハンズオン講座が効率的です。再利用パターンの実践感覚が身につきます。