frontend-engineering

フロントエンドエンジニアリングの方法論

フロントエンドエンジニアリングとは、アプリケーションのユーザー向けレイヤーを構築する技術です。コンポーネント、状態管理、API 連携、レスポンシブレイアウト、クライアントサイドのパフォーマンスなどが含まれます。この方法論は、UX デザイン（ユーザージャーニー、ワイヤーフレーム、アクセシビリティ標準）と品質検証（qa-methodology）の橋渡しをします。

フロントエンドエンジニアの担当領域

担当すること	担当しないこと
コンポーネントの実装 — UI コンポーネントの構成、props/state インターフェース、レンダリングパターン、ライフサイクル	ユーザージャーニー、ワイヤーフレーム、アクセシビリティ標準、インタラクションデザイン — これらは product-design-and-ux の担当です
状態管理 — クライアントサイドの状態アーキテクチャ、データ取得パターン、キャッシュ、楽観的更新	API コントラクトの設計 — これは api-design-and-evolution の担当です
API 連携 — フロントエンドとバックエンド間のデータフロー、認証フロー（OAuth、JWT）、リアルタイム更新	テスト戦略と自動化 — これは QA-engineer の担当です
レスポンシブデザインの実装 — レイアウトシステム、ブレークポイント、デバイス間テスト	ビジュアルアイデンティティとブランドガイドライン — これは brand-designer の担当です
クライアントサイドのパフォーマンス — バンドルの最適化、遅延読み込み、Core Web Vitals、レンダリングの最適化	編集コンテンツとコピー — コンテンツ・マーケティングチームの担当であり、このスキルの範囲外です
フロントエンドのテスト — コンポーネントテスト、統合テスト、ビジュアルリグレッション、アクセシビリティテスト	コードレビューと品質ゲート — これは qa-methodology の担当です
フロントエンド機能の E2E テストシナリオとユーザーフローのカバレッジ	ブラウザテストツール（Playwright）の操作 — 仕様の作成・実行、セレクター、ネットワークのモック、スクレイピング — playwright に案内してください
モバイルアプリの実装（iOS/Android/Flutter/React Native）	モバイルプラットフォーム関連作業 — スキャフォールディング、ビルドとコード署名、デバイス／エミュレーターでのテスト、ストアへの申請、モバイルのライフサイクル — mobile-development に案内してください。このスキルの担当はウェブフロントエンドです
ビルドツール — バンドラー設定、TypeScript 設定、リンティング、フォーマット、開発環境	CI/CD パイプラインのインフラストラクチャ — これは platform-engineer の担当です

React のコンポーネントやフックの作業には react を、Vite の設定、モード、プラグイン、ビルドには vite を読み込んでください。このスキルは、フレームワークに依存しないアーキテクチャとフロントエンド戦略を引き続き担当します。

参考ファイル

参考資料	読み込むタイミング
references/component-architecture.md	コンポーネントツリーを設計するとき — 構成パターン、props/state インターフェース、ライフサイクル、アクセシビリティの基礎
references/state-management.md	状態管理を選択・実装するとき — クライアント状態とサーバー状態、データ取得、キャッシュ、楽観的更新
references/api-integration.md	フロントエンドをバックエンドに接続するとき — API クライアントの設計、認証トークンのフロー、UI でのエラー処理、リアルタイムサブスクリプション
references/responsive-layout-testing.md	レスポンシブデザインを実装するとき（レイアウトシステムの選択 — Grid と Flexbox と Container Queries、ブレークポイント戦略、デバイス間テストの方法論）、およびフロントエンドコードをテストするとき（Testing Library を使ったコンポーネントテスト、Playwright/Cypress を使った統合テスト、ビジュアルリグレッション、axe-core と Lighthouse CI を使ったアクセシビリティテスト、テストデータの管理）
references/performance.md	クライアントサイドのパフォーマンスを最適化するとき — Core Web Vitals、バンドル分析、コード分割、レンダリングの最適化

テンプレート

テンプレート	使用する場面
templates/component-state-design-record.md	機能のコンポーネントツリーと状態の所有権を設計するとき — 分解、状態のスコープ設定、データ取得、エラー／読み込み時の UX
templates/performance-budget.md	パフォーマンス目標を定義するとき — バンドルのバイト数の予算、Core Web Vitals の予算、計測の設定、CI での適用

スクリプト

スクリプト	使用する場面
scripts/bundle-budget-checker.py	バンドルサイズのレポートを、合計およびチャンクごとの予算と照合します。予算を超過すると失敗（終了コード 1）するため、CI でパフォーマンスの低下を防止できます

基本原則

構成の単位はページではなくコンポーネントです — 再利用や組み合わせが可能な単位としてコンポーネントを設計し、構築します。ページはコンポーネントを組み立てて作成するものであり、一枚岩として作るものではありません。適切に設計されたコンポーネントは、作成者も想像していなかった場面で再利用できます。

状態は、それを必要とするコンポーネントと一緒に管理します — すべての状態をグローバルストアに置く必要はありません。ローカル状態はローカルに保ちます。サーバー状態は取得してキャッシュします。本当に共有が必要なアプリケーション状態だけをグローバルコンテキストに置きます。

理想的なケースだけでなく、あらゆる状態を想定して設計します — データに依存するすべてのコンポーネントには、少なくとも読み込み中、空、エラー、成功の 4 つの状態があります。4 つすべてを設計するのは単なる気配りではなく、レジリエントなユーザー体験を生み出します。

アクセシビリティは機能ではなく、必須要件です — キーボード操作、スクリーンリーダー対応、色のコントラスト、フォーカス管理は、付加的な改善ではありません。実装において満たすべき要件の一部です。

パフォーマンスは UX に関わる問題です — 読み込み時間の 1 ミリ秒も、レイアウトのずれも、ぎこちない操作も、ユーザーの信頼を損ないます。パフォーマンス予算の設定、バンドル分析、レンダリングの最適化は、後回しにするものではなく、フロントエンドエンジニアリングの一部です。