sapui5

SAPUI5 開発スキル

関連スキル

• sap-fiori-tools：Fiori アプリケーションの迅速な開発、Page Editor の設定、デプロイの自動化に使用します
• sap-cap-capire：バックエンドサービスとの統合、OData モデルのバインディング、CAP サービスの利用に使用します
• sap-btp-cloud-platform：デプロイの選択肢、HTML5 Application Repository サービス、BTP との統合に使用します
• sap-abap：ABAP バックエンドへの接続や、SAP システムからの OData サービスの利用に使用します
• sap-api-style：UI5 アプリケーションの API を文書化する場合や、REST/OData 標準に準拠する場合に使用します
• sap-dependency-security：SAPUI5 フロントエンドのツールチェーンにおける依存関係の安全なアップグレード、ロックファイルのポリシー、サプライチェーンの管理、MCP サーバーのバージョン固定に使用します

このスキルを使用する場面

SAPUI5/OpenUI5 アプリケーション、XML ビュー、コントローラー、カスタムコントロール、ルーティング、OData v2/v4 モデルバインディング、Fiori Elements との統合、QUnit/OPA5 テスト、アクセシビリティ／セキュリティ／パフォーマンスの改善、または UI5 MCP を活用したスキャフォールディングや API 検索を行う場合に、このスキルを使用します。

SAP UI5 フレームワークでエンタープライズアプリケーションを構築するための包括的なスキルです。

MCP ツールの使用方法（v2.0.0 の新機能）

このスキルは、ライブ開発ツールを利用するために、公式の @ui5/mcp-server と統合されています。

• スキャフォールディング：ui5-app-scaffolder エージェントまたは /ui5-scaffold コマンドでプロジェクトを作成します
• API リファレンス：ui5-api-explorer エージェントまたは /ui5-api コマンドでコントロールを検索します
• コード品質：ui5-code-quality-advisor エージェントまたは /ui5-lint コマンドでリンターを実行します
• 移行：ui5-migration-specialist エージェントでバージョンをアップグレードします
• バージョン情報：/ui5-version コマンドでリリースを確認します
• ツールカタログ：/ui5-mcp-tools コマンドですべての MCP ツールを一覧表示します

セットアップとトラブルシューティングについては、references/mcp-integration.md を参照してください。MCP パッケージのバージョン固定は sap-dependency-security によって管理され、npm run validate:mcp-security で検証されます。

フォールバック：すべての機能は、リファレンスファイルと組み込みテンプレートを使用することで、MCP なしでも動作します。

目次

1. クイックスタート
2. 主要な概念
3. SAP Fiori Elements
4. メタデータ駆動型コントロール（MDC）
5. テスト
6. ベストプラクティス
7. 一般的なパターン
8. トラブルシューティング
9. 開発ツール
10. 同梱リソース

---

クイックスタート

基本的な SAPUI5 アプリの作成

UI5 Tooling（推奨）または SAP Business Application Studio を使用します。

# Install UI5 CLI
npm install -g @ui5/cli

# Create new project
mkdir my-sapui5-app && cd my-sapui5-app
npm init -y

# Initialize UI5 project
ui5 init

# Add UI5 dependencies
npm install --save-dev @ui5/cli

# Start development server
ui5 serve

プロジェクト構成：

my-sapui5-app/
├── webapp/
│   ├── Component.js
│   ├── manifest.json
│   ├── index.html
│   ├── controller/
│   │   └── Main.controller.js
│   ├── view/
│   │   └── Main.view.xml
│   ├── model/
│   │   └── formatter.js
│   ├── i18n/
│   │   └── i18n.properties
│   ├── css/
│   │   └── style.css
│   └── test/
│       ├── unit/
│       └── integration/
├── ui5.yaml
└── package.json

利用可能なテンプレート：

• templates/basic-component.js：Component テンプレート
• templates/manifest.json：アプリケーション記述子のテンプレート
• templates/xml-view.xml：一般的なパターンを含む XML ビュー
• templates/controller.js：ベストプラクティスに沿ったコントローラー
• templates/formatter.js：一般的なフォーマッター関数

テンプレートを使用するには、プロジェクトにコピーしてプレースホルダー（{{namespace}}、{{ControllerName}} など）を置き換えます。

---

主要な概念

1. MVC アーキテクチャ

• モデル：データレイヤー（JSON、OData、XML、リソースモデル）
• ビュー：プレゼンテーションレイヤー（XML、JavaScript、JSON、HTML）
• コントローラー：ビジネスロジックレイヤー
• バインディング：モデルとビューを同期します（One-way、Two-way、One-time）

リファレンス：アーキテクチャの概念について詳しくは、references/core-architecture.md を参照してください。

2. コンポーネントとマニフェスト

• Component.js：エントリーポイント。ルーターとモデルを初期化します
• manifest.json：一元管理される設定（モデル、ルーティング、依存関係、データソース）

主な manifest セクション：

• sap.app：アプリケーションのメタデータとデータソース
• sap.ui：UI 技術とデバイスタイプ
• sap.ui5：UI5 固有の設定（モデル、ルーティング、依存関係）

3. データモデル

JSON モデル（クライアント側）：

var oModel = new JSONModel({
    products: [...]
});
this.getView().setModel(oModel);

OData V2 モデル（サーバー側）：

"": {
    "dataSource": "mainService",
    "settings": {
        "defaultBindingMode": "TwoWay",
        "useBatch": true
    }
}

リソースモデル（i18n）：

"i18n": {
    "type": "sap.ui.model.resource.ResourceModel",
    "settings": {
        "bundleName": "my.app.i18n.i18n"
    }
}

リファレンス：包括的なガイドについては、references/data-binding-models.md を参照してください。

4. ビューとコントローラー

XML ビュー（推奨）：

<mvc:View
    controllerName="my.app.controller.Main"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Page title="{i18n>title}">
        <List items="{/products}">
            <StandardListItem title="{name}" description="{price}"/>
        </List>
    </Page>
</mvc:View>

5. ルーティングとナビゲーション

プログラムによるナビゲーション：

this.getOwnerComponent().getRouter().navTo("detail", {
    objectId: sId
});

リファレンス：ルーティングのパターンについては、references/routing-navigation.md を参照してください。

---

SAP Fiori Elements

OData アノテーションを使用して、JavaScript の UI コードを記述せずにアプリケーションを構築できます。

アプリケーションの種類

1. リストレポート：検索やフィルタリングが可能なテーブル／チャート
2. オブジェクトページ：セクションとファセットを備えた詳細ビュー
3. 分析リストページ：ビジュアルフィルターと分析機能
4. 概要ページ：カードベースのダッシュボード
5. ワークリスト：タスク用の簡易リスト

クイックセットアップ

リストレポート＋オブジェクトページ用の manifest.json：

{
    "sap.ui5": {
        "dependencies": {
            "libs": {
                "sap.fe.templates": {}
            }
        },
        "routing": {
            "targets": {
                "ProductsList": {
                    "type": "Component",
                    "name": "sap.fe.templates.ListReport",
                    "options": {
                        "settings": {
                            "contextPath": "/Products",
                            "variantManagement": "Page"
                        }
                    }
                }
            }
        }
    }
}

主要なアノテーション：

• @UI.LineItem：テーブルの列
• @UI.SelectionFields：フィルターバーのフィールド
• @UI.HeaderInfo：オブジェクトページのヘッダー
• @UI.Facets：オブジェクトページのセクション

リファレンス：包括的なガイドについては、references/fiori-elements.md を参照してください。

---

メタデータ駆動型コントロール（MDC）

sap.ui.mdc ライブラリは、実行時に動的な UI を構築するためのメタデータ駆動型コントロールを提供します。

主なコントロール

• MDC テーブル：メタデータに基づく動的な列によるデータ表示
• MDC フィルターバー：PropertyInfo による複雑なフィルター条件
• MDC 値ヘルプ：候補を使った入力支援

クイック例

<mdc:Table
    id="mdcTable"
    delegate='{name: "my/app/delegate/TableDelegate", payload: {}}'
    p13nMode="Sort,Filter,Column"
    type="ResponsiveTable">
    <mdc:columns>
        <mdcTable:Column propertyKey="name" header="Name">
            <Text text="{name}"/>
        </mdcTable:Column>
    </mdc:columns>
</mdc:Table>

リファレンス：TypeScript を使用した包括的な MDC ガイドについては、references/mdc-typescript-advanced.md を参照してください。

---

テスト

単体テスト（QUnit）

個々の関数やモジュールをテストします：

QUnit.module("Formatter Tests");
QUnit.test("Should format price correctly", function(assert) {
    var fPrice = 123.456;
    var sResult = formatter.formatPrice(fPrice);
    assert.strictEqual(sResult, "123.46 EUR", "Price formatted");
});

統合テスト（OPA5）

ユーザー操作やフローをテストします：

opaTest("Should navigate to detail page", function(Given, When, Then) {
    Given.iStartMyApp();
    When.onTheWorklistPage.iPressOnTheFirstListItem();
    Then.onTheObjectPage.iShouldSeeTheObjectPage();
    Then.iTeardownMyApp();
});

モックサーバー

OData バックエンドをシミュレートします：

var oMockServer = new MockServer({
    rootUri: "/sap/opu/odata/sap/SERVICE_SRV/"
});
oMockServer.simulate("localService/metadata.xml", {
    sMockdataBaseUrl: "localService/mockdata"
});
oMockServer.start();

リファレンス：包括的なテストガイドについては、references/testing.md を参照してください。

---

ベストプラクティス

1. 常に非同期処理を使用する - sap.ui.define、マニフェストで async:true を使用
2. XML ビューを使用する - 宣言的でツールとの親和性が高い
3. 適切な名前空間を使用する - com.mycompany.myapp.controller.Main
4. 国際化に対応する - テキストには常に i18n を使用する
5. 手動更新よりデータバインディングを優先する - XSS 保護が自動的に適用される
6. セキュリティ - CSP を有効にし、入力を検証し、HTTPS を使用する
7. パフォーマンス - コンポーネントのプリロード、遅延読み込み、バッチリクエスト
8. アクセシビリティ - セマンティックコントロール、ラベル、キーボードナビゲーション

---

よく使われるパターン

CRUD 操作

// Create
oModel.create("/Products", oData, {success: function() {MessageToast.show("Created");}});

// Read
oModel.read("/Products", {filters: [new Filter("Price", FilterOperator.GT, 100)]});

// Update
oModel.update("/Products(1)", {Price: 200}, {success: function() {MessageToast.show("Updated");}});

// Delete
oModel.remove("/Products(1)", {success: function() {MessageToast.show("Deleted");}});

フィルタリングとソート

var oBinding = this.byId("table").getBinding("items");
oBinding.filter([new Filter("price", FilterOperator.GT, 100)]);
oBinding.sort([new Sorter("name", false)]);

ダイアログの処理

if (!this.pDialog) {
    this.pDialog = this.loadFragment({
        name: "my.app.view.fragments.MyDialog"
    });
}
this.pDialog.then(function(oDialog) {oDialog.open();});

---

よくある問題のトラブルシューティング

バインディングが機能しない

1. ビュー／コンポーネントにモデルが設定されているか確認する
2. バインディングパスが正しいか確認する
3. データが読み込まれていることを確認する
4. デバッグする：console.log(this.getView().getModel().getData())

OData 呼び出しが失敗する

1. manifest.json のサービス URL を確認する
2. CORS の設定を確認する
3. 認証をテストする
4. ブラウザーの Network タブを使用する

ビューが表示されない

1. manifest.json でビューが登録されているか確認する
2. ルーティングの設定を確認する
3. コントローラー名が一致しているか確認する
4. ブラウザーのコンソールでエラーを確認する

パフォーマンスの問題

1. コンポーネントのプリロードを有効にする
2. 大規模なデータセットには増分読み込みリストを使用する
3. OData のページングを実装する
4. 可能な場合は一方向バインディングを使用する

---

開発ツール

UI5 Tooling

ui5 serve    # Development server
ui5 build    # Build for production
npm test     # Run tests

UI5 Inspector

• デバッグ用のブラウザー拡張機能
• コントロールツリーとバインディングを表示
• パフォーマンス分析

Support Assistant

• Ctrl+Alt+Shift+S を押す
• 組み込みの品質チェッカー

---

同梱のリファレンスファイル

このスキルには、包括的なリファレンスドキュメントが15ファイル含まれています。

1. references/glossary.md：SAPUI5の用語と概念を網羅した用語集（100語以上）
2. references/core-architecture.md：フレームワークのアーキテクチャ、コンポーネント、MVC、ブートストラップ
3. references/data-binding-models.md：データバインディング、モデル、フィルター、ソーター
4. references/testing.md：QUnit、OPA5、モックサーバー、テストの自動化
5. references/fiori-elements.md：Fiori Elementsのテンプレート、アノテーション、設定
6. references/typescript-support.md：TypeScriptのセットアップ、設定、移行
7. references/routing-navigation.md：ルーティング、ナビゲーション、Flexible Column Layout
8. references/performance-optimization.md：パフォーマンスのベストプラクティス、最適化
9. references/accessibility.md：WCAG 2.1準拠、スクリーンリーダー、ARIA
10. references/security.md：XSSの防止、CSP、認証、CSRF
11. references/mdc-typescript-advanced.md：MDCコントロール、TypeScriptコントロールライブラリ
12. references/mcp-integration.md：MCPのセットアップ、トラブルシューティング、フォールバック動作
13. references/code-quality-checklist.md：UI5プロジェクトのレビュー用チェックリスト
14. references/migration-patterns.md：アップグレードとモダナイゼーションのパターン
15. references/scaffolding-templates.md：プロジェクトのスキャフォールディングに関するガイダンス

メインのスキルを簡潔に保ちながら、特定のトピックの詳細についてはこれらのファイルを参照してください。

---

含まれるテンプレート

templates/ ディレクトリに、すぐに使えるテンプレートがあります。

1. basic-component.js：ベストプラクティスに沿ったComponent.jsのテンプレート
2. manifest.json：アプリケーション記述子の完全なテンプレート
3. xml-view.xml：一般的なパターンを含むXMLビュー
4. controller.js：ライフサイクルフックを含むコントローラーテンプレート
5. formatter.js：一般的なフォーマッター関数

---

Claudeへの指示

このスキルを使用するときは、次の点に従ってください。

1. 常に非同期パターンを使用する - sap.ui.define、async:true
2. XMLビューを優先する - より宣言的で、ツールとの親和性が高いため
3. データバインディングを使用する - XSSを自動的に防止します
4. リファレンスファイルを参照する - 詳細情報を確認してください
5. テンプレートを使用する - templates/からコピーし、プレースホルダーを置き換えてください
6. ベストプラクティスに従う - セキュリティ、パフォーマンス、アクセシビリティ
7. 動作する例を提示する - 提案する前にコードパターンをテストしてください

---

同梱リソース

リファレンスドキュメント

• references/accessibility.md - アクセシビリティのベストプラクティス
• references/core-architecture.md - フレームワークのアーキテクチャとコンポーネントのパターン
• references/data-binding-models.md - データバインディングとモデルの使用方法
• references/fiori-elements.md - Fiori Elementsのテンプレートとアノテーション
• references/mdc-typescript-advanced.md - MDCとTypeScriptに関するガイダンス
• references/mcp-integration.md - MCPのセットアップとトラブルシューティング
• references/migration-patterns.md - 古いバージョンからの移行
• references/performance-optimization.md - パフォーマンス最適化の手法
• references/testing.md - テスト戦略とフレームワーク
• references/security.md - XSS、CSP、認証、CSRFに関するガイダンス

テンプレート

• templates/basic-component.js - コンポーネント開発用テンプレート
• templates/controller.js - コントローラーテンプレート
• templates/xml-view.xml - XMLビューテンプレート
• templates/formatter.js - フォーマッターヘルパーのテンプレート
• templates/manifest.json - アプリケーションマニフェストのテンプレート

---

ライセンス：GPL-3.0 次回レビュー：2026-02-27（四半期ごと）