claude-skills/

Anthropic公式スキル・プラグインの日本語ディレクトリ

last sync 22h ago
スキルOfficialdevelopment

📊ui5-best-practices-tables

プラグイン
ui5
ソース
GitHub で見る ↗

説明

UI5テーブルのベストプラクティスおよび権威ある開発ガイドライン。 次のような場合に使用: ユーザーが「テーブルを作成する」「テーブルを追加する」「どのテーブルを使うべきか」「sap.m.Table を実装する」「sap.ui.table を実装する」「GridTable」「ResponsiveTable」「TreeTable」「SmartTable」「MDC table」「sap.ui.mdc.Table」「sap.ui.comp.smarttable」「テーブルにデータが表示されない」「テーブルバインディング」「テーブル選択」「テーブルのドラッグ＆ドロップ」「テーブルのパーソナライゼーション」「テーブルのコピー＆ペースト」「テーブルのエクスポート」「テーブルの固定ヘッダー」「テーブルのグローイング」「テーブルのポップイン」「テーブルのパフォーマンス」「テーブルのアクセシビリティ」「テーブルのアイテムバインディング」について質問している場合、 またはテーブルコントロールを含む UI5 フリースタイルアプリケーションを作成している場合。 カバー範囲: コントロール選択マトリクス、必須ルール、よくあるエラーパターン、および以下の各コントロールに対する API ガイダンス — `sap.m.Table`、`sap.ui.table.Table`、`sap.ui.table.TreeTable`、`sap.ui.comp.smarttable.SmartTable`、`sap.ui.mdc.Table` --- **キーワード:** `sap.m.Table` / `sap.ui.table` / `GridTable` / `ResponsiveTable` / `TreeTable` / `SmartTable` / `sap.ui.mdc.Table` / テーブルバインディング / rows アグリゲーション / items アグリゲーション / `rowMode` / `growing` / `sticky` / パーソナライゼーション / ドラッグ＆ドロップ / `DragDropInfo` / `p13n.Engine` / OData V4 / OData V2 / セルテンプレート / `ariaLabelledBy`

原文を表示

UI5 table best practices and authoritative development guidelines. Use when the user asks to "create a table", "add a table", "which table should I use", "implement sap.m.Table", "implement sap.ui.table", "GridTable", "ResponsiveTable", "TreeTable", "SmartTable", "MDC table", "sap.ui.mdc.Table", "sap.ui.comp.smarttable", "table not showing data", "table binding", "table selection", "drag and drop table", "table personalization", "copy paste table", "table export", "table sticky header", "table growing", "table pop-in", "table performance", "table accessibility", "table items binding", or is writing any UI5 freestyle application that includes a table control. Covers: control selection matrix, mandatory rules, common error patterns, and per-control API guidance for sap.m.Table, sap.ui.table.Table, sap.ui.table.TreeTable, sap.ui.comp.smarttable.SmartTable, and sap.ui.mdc.Table. Keywords: sap.m.Table, sap.ui.table, GridTable, ResponsiveTable, TreeTable, SmartTable, sap.ui.mdc.Table, table binding, rows aggregation, items aggregation, rowMode, growing, sticky, personalization, drag and drop, DragDropInfo, p13n.Engine, OData V4, OData V2, cell templates, ariaLabelledBy

ユースケース

  • ✓UI5テーブルコントロールを実装するとき
  • ✓テーブルのデータバインディングを設定するとき
  • ✓適切なテーブルコントロール種別を選択するとき
  • ✓テーブルのパフォーマンスやアクセシビリティを改善するとき
  • ✓テーブルのドラッグ&ドロップやパーソナライゼーション機能を実装するとき

本文（日本語訳）

UI5 テーブル ベストプラクティス

フリースタイルアプリケーションにおいて、UI5 のテーブルコードを生成・レビュー・トラブルシューティングする際は、必ずこのガイドラインを適用してください。

UI5 バージョン基準: SAPUI5 1.136+ LTS。特記がない限り、記載のすべての機能はこのバージョンから利用可能です。

各リファレンスを読み込むタイミング

トリガー 読み込むファイル
sap.m.Table（ResponsiveTable）の作業または計画時 references/sap-m-table.md
sap.ui.table.Table（GridTable）の作業または計画時 references/grid-table.md
sap.ui.table.TreeTable の作業または計画時 references/tree-table.md
sap.ui.comp.smarttable.SmartTable の作業または計画時 references/smart-table.md
sap.ui.mdc.Table の作業または計画時 references/mdc-table.md
任意のテーブルへのドラッグ＆ドロップ追加時 references/drag-and-drop.md
カラムのパーソナライゼーション追加時 references/personalization.md
セルテンプレート・配置・データ型バインディングの選定時 references/cell-templates.md

出力を行う前に必ず読み込んでください。記憶に頼った作業は禁止します。

コアルール

必須事項

  • コードを書く前に、セレクションマトリクス を使ってテーブルタイプを選定すること。
  • sap.ui.table.* には rows アグリゲーション、sap.m.Table には items アグリゲーションを使用すること。これらを入れ替えてはならない。
  • パーソナライゼーションには sap.m.p13n.Engine を使用すること。カスタムのパーソナライゼーションダイアログを独自実装してはならない。
  • すべてのテーブルに ariaLabelledBy を設定し、テーブルタイトルのコントロールを参照させること。
  • セルの内容はデータ型に応じて配置すること: 数値・日付は右寄せ（hAlign="End"）、テキスト・リンクは左寄せ。
  • 適切なセルテンプレートを使用すること: 表示用には sap.m.Text、数値には sap.m.ObjectNumber、ナビゲーションには sap.m.Link。
  • 合計件数が必要な場合、sap.ui.table.* ではバックエンドに $count=true をリクエストすること。
  • sap.ui.table.*（UI5 1.119+）では、非推奨の visibleRowCountMode プロパティではなく rowMode アグリゲーションを使用すること。

禁止事項

  • グローバル変数を使用しないこと。sap.ui.define の AMD モジュールまたは ES6 インポートを使用すること。
  • sap.ui.table.* のセルでテキスト折り返しを有効にしないこと — 仮想スクロール（virtualization）が機能しなくなる。
  • sap.ui.export.Spreadsheet が利用可能であると仮定しないこと。使用前にライブラリの存在を確認すること。
  • モバイルファーストのシナリオに sap.ui.table.Table を使用しないこと。sap.m.Table を使用すること。
  • 仮想スクロールが必要な 1000 件以上のデータセットに sap.m.Table を使用しないこと。
  • sap.ui.table.Table の1つのセルに複数のインタラクティブ要素を配置しないこと。
  • フォーマッターから enum オブジェクトを返さないこと。文字列リテラルまたはプリミティブ値を返すこと。
  • ColumnListItem の highlight にフォーマッターを使用しないこと。直接データバインディングを使用すること。
  • モデルの可用性を確認せずにアクセスしないこと — 「Cannot read properties of undefined」エラーの原因となる。
  • 型の名前空間を混在させないこと: sap.ui.model.odata.type.* を JSON モデルと組み合わせたり、sap.ui.model.type.* を OData と組み合わせてはならない。

OData V4 ポリシー

OData V4 においては、フリースタイルテーブルより SAP Fiori Elements のビルディングブロックを優先してください。 Fiori Elements がスコープ外の場合に限り、sap.ui.mdc.Table を使用してください。

セレクションマトリクス

テーブルタイプ 次のような場合に使用 使用しない場合
sap.m.Table モバイル/レスポンシブ、ポップイン動作、JSON モデル、100 件未満のデータ 1000 件以上、仮想スクロールが必要、デスクトップ専用、セル選択が必要な場合
sap.ui.table.Table デスクトップ、1000 件以上、仮想スクロール、固定カラム、高密度データ モバイルファースト、ポップイン必須、テキスト折り返し、少量データセット
sap.ui.table.TreeTable 階層データ、展開/折りたたみ、親子関係 フラットデータ、モバイルファースト、グルーピング（階層ではない場合）
SmartTable OData V2、アノテーション、自動カラム生成、スマートフィルタリング JSON のみ、詳細な制御が必要、OData V4
sap.ui.mdc.Table OData V4 フリースタイル（Fiori Elements が除外されている場合）、デリゲートパターン JSON のみ、シンプルなアプリ、OData V2

データセットサイズの目安

行数 推奨テーブル 戦略
100 件未満 sap.m.Table シンプルバインディング、growing はオプション
100〜1000 件 sap.ui.table.Table 仮想スクロール、threshold=100
1000 件以上 sap.ui.table.Table 仮想スクロール、threshold=100〜500、必要時に $count=true

よくあるエラー

症状 原因 対処法
データが表示されない バインディングパスが誤っているか、モデルが欠落している bindRows/bindItems のパスとモデルのアタッチを確認すること。
行がスクロールしない（sap.ui.table.*） 件数がリクエストされていない OData で合計件数が必要な場合は $count=true を設定すること。
選択が機能しない（sap.ui.table.*） プラグインの競合 選択プラグインが適用されている場合、テーブルの選択 API を呼び出さず、プラグインの API を使用すること。
テキスト折り返しの問題 sap.ui.table.* で折り返しが有効になっている 固定高のコンテンツを使用するか、sap.m.Table に切り替えること。
コピー＆ペーストが機能しない プラグインがアタッチされていないか、名前空間が誤っている 正しいプラグインをアタッチすること（ドラッグ＆ドロップのセクションを参照）。
パーソナライゼーションが保持されない Engine が設定されていない sap.m.p13n.Engine の登録を確認すること。
CopyProvider エラー extractData が定義されていない プラグインに extractData を実装すること。
テーブルが表示されない コンテナ構造が無効 有効なコンテナを使用すること（コンテナ構造を参照）。
JSON モデルに OData 型を使用している 型の名前空間が誤っている モデルに合わせて型の名前空間を一致させること: JSON には sap.ui.model.type.*、OData V2 には sap.ui.model.odata.type.*、OData V4 には sap.ui.model.odata.v4.type.*。
Excel エクスポートがサイレントに失敗する ライブラリが読み込まれていないか、extractData が無効 ライブラリの存在を確認し、extractData から 2 次元配列を返し、dataSource バインディングを確保すること。
"No Data Available" が表示される バインディング前にモデルが設定されていない ルーター初期化の前に Component.init() でモデルを設定すること。

コンテナ構造

有効な構造

構造 ユースケース
View > Page > content > Table 標準ページ
View > Page > content > Panel > Table グループ化されたコンテンツ
View > Page > content > IconTabBar > items > IconTabFilter > Table タブ
View > SplitApp > detailPages > Page > Table マスター/ディテール
View > Dialog > content > Table モーダル
View > Table スタンドアロン

無効な構造（およびその理由）

構造 問題点
Page > content > VBox > Table VBox に明示的な高さが必要 — テーブルが不可視になる
Page > VBox > Table VBox が content 内にない — テーブルがレンダリングされない
Page > content > FlexBox > Table サイジングの競合 — テーブルが縮小する
Page > content > ScrollContainer > Table 二重スクロール — 仮想スクロールが機能しなくなる

パフォーマンスとアクセシビリティ

避けるべきアンチパターン

  • 手作りのパーソナライゼーションダイアログ（sap.m.p13n.Engine を使用すること）。
  • sap.ui.table.Table セルでのテキスト折り返し。
  • GridTable の 1 つのセルに複数のインタラクティブ要素を配置すること。
  • OData V2 の SmartTable を V4 サービスと混在させること。
  • セルテンプレートの深いネスト。
  • 負荷テストなしでの threshold の固定値設定。
  • 無条件の $count=true（必要な場合のみ件数をリクエストすること）。

アクセシビリティチェックリスト

  • すべてのテーブルに ariaLabelledBy を設定し、表示されているタイトルを参照させること。
  • セルテンプレートには（生のテキストノードではなく）sap.m.Text を使用すること。
  • sap.ui.table.Table では、キーボードナビゲーション（Tab キー、矢印キー、Space/Enter による選択）をテストすること。
  • パーソナライゼーションダイアログがキーボードで操作可能であることを確認すること。
  • リリース前にスクリーンリーダー（Windows では NVDA/JAWS、macOS では VoiceOver）でテストすること。
原文（English）を表示

UI5 Table Best Practices

Apply these guidelines whenever generating, reviewing, or troubleshooting UI5 table code in freestyle applications.

UI5 version baseline: SAPUI5 1.136+ LTS. All features mentioned are available from this version unless noted.

When to load each reference

Trigger Load
Working on or planning a sap.m.Table (ResponsiveTable) references/sap-m-table.md
Working on or planning a sap.ui.table.Table (GridTable) references/grid-table.md
Working on or planning a sap.ui.table.TreeTable references/tree-table.md
Working on or planning a sap.ui.comp.smarttable.SmartTable references/smart-table.md
Working on or planning a sap.ui.mdc.Table references/mdc-table.md
Adding drag-and-drop to any table references/drag-and-drop.md
Adding column personalization references/personalization.md
Choosing cell templates, alignment, or data type binding references/cell-templates.md

Load before producing any output. Do not work from memory.

Core Rules

Mandatory

  • Choose the table type using the Selection Matrix before writing any code.
  • Use the rows aggregation for sap.ui.table.* and items for sap.m.Table. Never swap them.
  • Use sap.m.p13n.Engine for personalization. Never build custom personalization dialogs.
  • Set ariaLabelledBy on every table, referencing the table title control.
  • Align cell content by data type: numbers and dates right (hAlign="End"), text and links left.
  • Use appropriate cell templates: sap.m.Text for display, sap.m.ObjectNumber for numbers, sap.m.Link for navigation.
  • Request $count=true from the back end for sap.ui.table.* when a total count is required.
  • Use the rowMode aggregation (not the deprecated visibleRowCountMode property) for sap.ui.table.* (UI5 1.119+).

Prohibitions

  • Do not use global variables. Use sap.ui.define AMD modules or ES6 imports.
  • Do not enable text wrapping in sap.ui.table.* cells — it breaks virtualization.
  • Do not assume sap.ui.export.Spreadsheet is available. Detect the library before use.
  • Do not use sap.ui.table.Table for mobile-first scenarios. Use sap.m.Table.
  • Do not use sap.m.Table for datasets with 1000+ rows that require virtualization.
  • Do not place multiple interactive elements in one sap.ui.table.Table cell.
  • Do not return enum objects from formatters. Return string literals or primitive values.
  • Do not use formatters for ColumnListItem highlight. Use direct data binding.
  • Do not access models without checking availability — causes "Cannot read properties of undefined".
  • Do not mix type namespaces: never use sap.ui.model.odata.type.* with a JSON model, or sap.ui.model.type.* with OData.

OData V4 policy

Prefer SAP Fiori elements building blocks over freestyle tables for OData V4. Use sap.ui.mdc.Table only when Fiori elements is out of scope.

Selection Matrix

Table type Use when Do not use when
sap.m.Table Mobile/responsive, pop-in behavior, JSON models, fewer than 100 rows 1000+ rows, virtualization required, desktop-only, cell selection needed
sap.ui.table.Table Desktop, 1000+ rows, virtualization, fixed columns, dense data Mobile-first, pop-in required, text wrapping, small datasets
sap.ui.table.TreeTable Hierarchical data, expand/collapse, parent-child relationships Flat data, mobile-first, grouping (not hierarchy)
SmartTable OData V2, annotations, automatic columns, smart filtering JSON-only, precise control required, OData V4
sap.ui.mdc.Table OData V4 freestyle (when Fiori elements is ruled out), delegate pattern JSON-only, simple apps, OData V2

Dataset size guide

Rows Recommended table Strategy
< 100 sap.m.Table Simple binding, growing optional
100–1000 sap.ui.table.Table Virtualization, threshold=100
1000+ sap.ui.table.Table Virtualization, threshold=100–500, $count=true when needed

Common Errors

Symptom Cause Fix
No data displayed Incorrect binding path or missing model Verify bindRows/bindItems path and model attachment.
Rows not scrolling (sap.ui.table.*) Count not requested Set $count=true for OData when a total count is required.
Selection not working (sap.ui.table.*) Plugin conflict Do not call the table selection API when a selection plugin is applied; use the plugin API instead.
Text wrapping issues Wrapping enabled in sap.ui.table.* Use fixed-height content or switch to sap.m.Table.
Copy/paste not working Plugin not attached or wrong namespace Attach the correct plugin (see Drag & Drop section).
Personalization not persisting Engine not configured Verify sap.m.p13n.Engine registration.
CopyProvider error extractData not defined Implement extractData on the plugin.
Table not visible Invalid container structure Use a valid container (see Container Structures).
OData types on JSON model Wrong type namespace Match the type namespace to the model: sap.ui.model.type.* for JSON, sap.ui.model.odata.type.* for OData V2, sap.ui.model.odata.v4.type.* for OData V4.
Excel export fails silently Library not loaded or invalid extractData Detect the library, return a 2D array from extractData, ensure dataSource binding.
"No Data Available" Model not set before binding Set the model in Component.init() before router initialization.

Container Structures

Valid

Structure Use case
View > Page > content > Table Standard page
View > Page > content > Panel > Table Grouped content
View > Page > content > IconTabBar > items > IconTabFilter > Table Tabs
View > SplitApp > detailPages > Page > Table Master-detail
View > Dialog > content > Table Modal
View > Table Standalone

Invalid (and why)

Structure Issue
Page > content > VBox > Table VBox needs explicit height — table becomes invisible
Page > VBox > Table VBox not in content — table not rendered
Page > content > FlexBox > Table Sizing conflict — table collapses
Page > content > ScrollContainer > Table Double scrolling — virtualization breaks

Performance & Accessibility

Anti-patterns to avoid

  • Handcrafted personalization dialogs (use sap.m.p13n.Engine).
  • Text wrapping in sap.ui.table.Table cells.
  • Multiple interactive elements in one GridTable cell.
  • Mixing OData V2 SmartTable with V4 services.
  • Deep nesting in cell templates.
  • Fixed threshold without load testing.
  • Unconditional $count=true (request count only when needed).

Accessibility checklist

  • Set ariaLabelledBy on every table, referencing the visible title.
  • Use sap.m.Text (not raw text nodes) as cell templates.
  • For sap.ui.table.Table: test keyboard navigation (Tab, arrow keys, Space/Enter for selection).
  • Verify that the personalization dialog is keyboard-operable.
  • Test with a screen reader (NVDA/JAWS on Windows, VoiceOver on macOS) before shipping.

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。