fusion-developer-app

Fusion アプリ開発

使用するタイミング

Fusion Framework の React アプリケーション向けに、機能、コンポーネント、フック、サービス、型を開発するときにこのスキルを使用します。

典型的なトリガー：

• 「…向けのコンポーネント／フック／サービス／ページを追加する」
• 「API を接続する」
• 「Fusion モジュールを設定する」
• 「このアプリでは、どの Fusion Framework のフック／パッケージを使えばよいですか？」
• 「この設定をアプリ設定として保存する」
• 「ブックマーク／分析／機能フラグのサポートを追加する」
• 「AG Grid にチャート／ユーザーピッカー／人物列を追加する」
• 「カスタムの Fusion Framework モジュールはどう書けばよいですか？」
• 「これは Fusion モジュールにするべきですか、それとも React コンテキストにするべきですか？」
• 「この Fusion コンポーネント／フック／ルートのテストを書く」
• 「このテストで認証、コンテキスト、機能フラグ、HTTP をモックする」

暗黙的なトリガー：

• src/ 内での開発
• Fusion Framework モジュール、EDS、@equinor/fusion-react-*、または styled-components への言及
• アプリ設定、ブックマーク、分析、app.config.ts への言及
• ルート、ページ、またはデータ取得レイヤーの追加
• *.test.ts／*.test.tsx、vitest.config.ts、または Fusion テストフィクスチャの追加や更新
• チャート関連の言及：@equinor/fusion-framework-react-ag-charts、chart.js、react-chartjs-2

使用しないタイミング

次の場合は、このスキルを使用しないでください。

• Issue の作成／トリアージ → fusion-issue-authoring
• スキルの作成 → fusion-skill-authoring
• バックエンド／サービスの変更（別のリポジトリ）
• CI/CD またはデプロイ設定
• アーキテクチャドキュメント（ADR テンプレートを使用）

Fusion Framework のパッケージの所有関係、フックの動作、またはサンプルの調査には、まず fusion-research を使用してください。

必須入力

必須

• 作成するもの：機能、コンポーネント、フック、またはサービスの説明
• 配置先：レイヤー（コンポーネント、フック、サービス、型）と親／兄弟要素のコンテキスト

依頼が曖昧な場合は、実装の前に assets/follow-up-questions.md を確認してください。

条件付き

• 機能にデータ取得が含まれる場合は API エンドポイントの詳細
• ビジュアルコンポーネントを作成する場合はデザイン／レイアウトの詳細
• モジュール設定を拡張する場合は Fusion モジュール名
• 状態をユーザーごとに永続化するか、ブックマークで共有可能にするか、実行時のみ保持するか
• 想定するテストレイヤー：純粋なロジック、フック、コンポーネント、ルート、アプリ全体、またはモジュールグラフ
• テストで初期値を設定する必要がある外部境界：認証、コンテキスト、サービス、機能フラグ、ブックマーク、または HTTP

手順

ステップ 1 — プロジェクトの規約を確認する

コードを書く前に、対象リポジトリを確認します。

1. package.json を読む — パッケージマネージャー（bun/pnpm/npm）、スクリプト、依存関係。
2. tsconfig.json を読む — TypeScript の設定、パスエイリアス。
3. src/ を調べる — ディレクトリ構成、レイヤー構造。
4. docs/adr/ または contribute/ を確認する — プロジェクト固有のコーディング規約。
5. フォーマッター／リンターの設定を確認する（biome.json、.eslintrc、prettier）。
6. app.config.ts と app.manifest.ts を読む — エンドポイント、環境設定。
7. Fusion Framework の動作、パッケージの所有関係、またはクックブックの例に不明点がある場合は、コードを書く前に fusion-research に委任します。

確認した規約に合わせてください。references/ のパターンは既定のものです。プロジェクト固有のルールが異なる場合は、そちらを優先してください。

ステップ 2 — 実装を計画する

アプリをゼロから新規作成する場合 → assets/new-app-checklist.md を使用してください。

1. 作業を個別のファイル／変更に分割します。
2. 適切なディレクトリに割り当てます。Fusion アプリでよく使われる構成：
   • src/components/ — React コンポーネント（プレゼンテーションレイヤー）
   • src/hooks/ — カスタム React フック（状態と副作用のロジック）
   • src/api/ — API クライアント、データ変換、ビジネスロジック
   • src/types/ — TypeScript インターフェース、型エイリアス、列挙型
   • src/routes.ts — ルート定義（Fusion Router を使用する場合）
   • src/config.ts — Fusion モジュール設定
   • src/App.tsx — ルートコンポーネント、レイアウトシェル
3. 共有型を早い段階で特定し、参照する前に定義します。
4. プロジェクトでルーティングを使用している → DSL とページのパターンについて references/using-router.md に従います。
5. 異なる構成の場合 → その構成に従います。

ステップ 3 — コード規約に従って実装する

ステップ 1 のプロジェクトコード規約に従ってください。命名規則、TSDoc、インラインコメント、型のパターン、コードスタイル、エラー処理については、fusion-code-conventions を参照してください。

実装中に規約について質問がある場合は、fusion-code-conventions を直接呼び出してください。

ステップ 4 — styled-components、EDS、Fusion React コンポーネントでスタイリングする

references/styled-components.md、references/styling-with-eds.md、references/using-fusion-react-components.md に従ってください。

• カスタムスタイリングには styled-components を使用してください（Fusion の規約）。
• プロジェクトで使用されている場合を除き、CSS Modules、グローバル CSS、Tailwind、その他の CSS-in-JS は使用しないでください。
• 同じ場所に配置するスタイル付きコンポーネントには、Styled オブジェクトパターンを使用してください。
• 標準的な UI には EDS（@equinor/eds-core-react）を優先してください。
• 色、余白、タイポグラフィには EDS デザイントークン（@equinor/eds-tokens）を使用してください。
• カスタマイズには styled() を使用して EDS を拡張してください。
• EDS にないドメイン固有の要件（人物の表示／選択、サイドシート、進捗状況）には @equinor/fusion-react-* を使用してください。
• インラインの style props は、一時的な調整にのみ使用してください。
• ページ／ビューの構造（シェルの構成、レイアウト領域、空／読み込み状態）については、agents/design.md を呼び出してください。コンポーネントレベルの EDS スタイリングについては、agents/styling.md を呼び出してください。

ステップ 5 — データ取得を設定する（該当する場合）

references/configure-services.md、references/using-react-query.md、references/configure-mocking.md に従ってください。

• config.ts または app.config.ts で configureHttpClient を使って HTTP クライアントを登録してください。
• @equinor/fusion-framework-react-app/http の useHttpClient(name) でクライアントにアクセスしてください。
• モジュールに直接アクセスするより、@equinor/fusion-framework-react-app/* のフックを優先してください。 framework.modules.* は React 以外のコンテキストでのみ使用してください。
• React Query：useQuery は薄いカスタムフックでラップしてください。
• クエリキー：API パスとパラメーターから生成してください。
• クライアント UI の状態は、サーバー状態ライブラリではなく React の状態／コンテキストで管理してください。

ステップ 6 — Fusion モジュールを設定する（該当する場合）

ユーザーが必要とするモジュールを特定し、一致するリファレンスのみを読んでください。

必要なもの	リファレンス
HTTP クライアント／API 統合	references/configure-services.md
コンテキストモジュール	references/using-context.md
ルーターとページ	references/using-router.md
AG Grid	references/using-ag-grid.md
AG Charts（スタンドアロン）	references/using-ag-charts.md
AG Grid 統合チャート	references/using-ag-grid-charts.md
EDS と Fusion React コンポーネント	references/using-fusion-react-components.md
People サービス（検索、表示、選択）	references/using-people-service.md
設定	references/using-settings.md
ブックマーク	references/using-bookmarks.md
分析	references/using-analytics.md
ランタイム設定／環境	references/using-assets-and-environment.md
フィーチャーフラグ	references/using-feature-flags.md
フレームワークモジュール全般	references/using-framework-modules.md
カスタムモジュールの作成	references/using-custom-modules.md

• AppModuleInitiator コールバックを使って、config.ts でモジュールを設定してください。
• フック（useAppModule、useHttpClient、useCurrentContext）を使ってモジュールにアクセスしてください。
• 新しい API 統合では、app.config.ts に HTTP エンドポイントを登録してください。
• アプリがルーティングを使用する場合は、config.ts で enableNavigation を使ってナビゲーションを有効にしてください。
• 自動コード分割には、Fusion Router DSL（layout、index、route、prefix）でルートを定義してください。
• フレームワーク API が不明な場合は、実装パターンを選ぶ前に fusion-research を使用してください。

ステップ 7 — テストを追加または更新する

references/testing.md に従ってください。テストの作成、保守、実行に集中する場合は、agents/testing.md を使用してください。フレームワークのセットアップ／レンダリングは fusion-framework-testing に、モジュール／HTTP の状態は fusion-framework-mocking に振り分けられます。

ステップ 8 — 検証

生成後のチェックリストとして assets/review-checklist.md を使用します。

1. 型チェック（bun run typecheck または pnpm typecheck）を実行します — エラーゼロ。
2. lint／フォーマットチェックを実行します — 違反ゼロ。
3. 新たにエクスポートしたシンボルにはすべて TSDoc を付けます。
4. スタイリングはプロジェクトの規約に従います。
5. 正当な理由があり、承認されている場合を除き、新しい依存関係を追加しません。

期待される出力

• プロジェクトのレイヤー構造に従った、新規または変更済みの src/ ファイル。
• すべてのファイルが型チェックと lint に合格していること。
• エクスポートされたすべての関数、コンポーネント、フック、型に TSDoc が付いていること。
• スタイリングがプロジェクトの規約に従っていること。
• fusion-framework-testing を使用して、変更された動作をテストでカバーしていること。必要に応じて、テスト実行時の Fusion の状態には fusion-framework-mocking を使用します。
• 変更内容とその理由の簡潔な概要。

ヘルパーエージェント

任意で agents/ 内のヘルパーを使用できます。重点的なレビューや実装途中のガイダンスに利用してください。スキル固有のエージェントに対応していないランタイムでは、基準をインラインで適用してください。

関連スキル：

• 実装が不確実性により行き詰まった場合に、出典に基づいて Fusion エコシステムを調査するには fusion-research を使用します。

• Fusion Framework の React テストのセットアップ、フィクスチャ、レンダリング、トラブルシューティングには fusion-framework-testing を使用します。

• テストにおける決定論的なモジュール状態や HTTP／OpenAPI 境界には fusion-framework-mocking を使用します。

• agents/testing.md — アプリのテストを作成、保守、実行します。テスト／モック関連の補助スキルへの案内も行います。動作、テストファイル、フィクスチャ、設定、失敗を変更する場合に使用します。

• agents/framework.md — Fusion Framework との統合：モジュール、HTTP クライアント、ブートストラップ、ランタイム設定、設定、ブックマーク、分析。mcp_fusion_search_framework を優先し、利用できない場合は mcp_fusion_search_docs にフォールバックします。config.ts、app.config.ts、またはフレームワークモジュールへのアクセスを接続する場合に参照します。

• agents/styling.md — EDS コンポーネントの選択、styled-components、デザイントークン、アクセシビリティ。mcp_fusion_search_eds を優先します。ビジュアルコンポーネントを作成または変更する場合に参照します。

• agents/design.md — ページ／ビューの構造：Fusion Portal シェルの構成、レイアウトゾーン、サイドパネルの使用、空状態／読み込み状態のパターン。レイアウトの基準情報には equinor-design-system を参照します。コンポーネントレベルの確認は agents/styling.md に委任します。新しいページやレイアウトラッパーを構成する場合に参照します。

• agents/data-display.md — AG Grid と AG Charts の使い分け、モジュール設定、列定義、チャートオプション、統合チャート。mcp_fusion_search_framework を優先します。グリッド、チャート、ダッシュボードを扱う場合に参照します。ライブラリの選択には assets/charts-decision-matrix.md を使用します。

• agents/person-components.md — @equinor/fusion-react-person：PersonAvatar、PersonCard、PersonListItem、PersonPicker、PeoplePicker、PeopleViewer、PersonCell（AG Grid）。DOM イベントのパターン、valueGetter の設定、注意点を扱います。人物の表示、検索、選択 UI を扱う場合に参照します。

• agents/code-quality.md — 規約の確認（命名、TSDoc、TS の厳格性、意図を説明するコメント）を fusion-code-conventions に委任し、結果を集約します。最終確定前に、新規または変更したすべてのファイルに対して実行します。

安全性と制約

• 明示的な承認なしに新しい依存関係を追加しないでください。
• DOM を直接操作しないでください — React のパターンを使用します。
• any 型は使用しないでください — TypeScript の strict モードを標準とします。
• ソースファイルにシークレットや認証情報を含めないでください。
• Conventional Commits（feat:、fix:、refactor: など）を使用してください。
• 明示的に依頼された場合を除き、インフラストラクチャファイル（docker-compose、CI 設定）を追加しないでください。