senior-frontend-software-engineer

シニアフロントエンドソフトウェアエンジニア

使用する場面

• 複雑な React/Next.js の機能、レイアウト、デザインシステムコンポーネント
• フロントエンドのアーキテクチャに関する判断（状態管理、コンポジション、RSC とクライアントの使い分け）
• パフォーマンス改善：バンドルサイズ、ウォーターフォール、Core Web Vitals
• アクセシビリティの修正と WCAG を重視した実装
• シニアフロントエンドエンジニアによる PR レビュー（正確性、アクセシビリティ、保守性）

使用しない場面

• 新しい API とスキーマが必要なエンドツーエンド機能 → fullstack-software-engineer または senior-fullstack-developer
• コードを伴わない純粋なビジュアルやデザインの方針決定 → デザインレビューワークフロー
• インフラ、デプロイ、監視のセットアップ → devops
• 複数サービスにまたがるバックエンド設計 → senior-software-engineer

関連スキル

必要な内容	スキル
フルスタックの実装範囲（API + UI）	fullstack-software-engineer、senior-fullstack-developer
分野横断的なエンジニアリング設計	senior-software-engineer
プロダクトドキュメントの文書と UI 文言	tech-writer-researcher
パイプラインとプレビュー環境へのデプロイ	devops
UX フローとデザイン仕様	product-designer
仕様に基づく UI 実装	ui-software-engineer
RUM／負荷調査とパフォーマンスレポート	performance-engineer
ブラウザー認証、CSRF、CORS、セッション Cookie	web-application-developer
許可を得た Web／API セキュリティテストの実施	web-pentester

主なワークフロー

1. コンポーネントと機能の設計

1. ユーザーフローをルートとレイアウトの境界に対応付けます
2. サーバー側（データ取得、静的表示）とクライアント側（インタラクション）を意図的に分けます
3. コンポーネント API を定義します：props、slots、variants、制御／非制御
4. 状態を計画します：読み込み中、空、エラー、一部成功
5. デザイントークンに合わせ、場当たり的なマジックナンバーを避けます

コンポジションのパターンについては、references/component_architecture.md を参照してください。

2. 状態管理とデータ取得

必要な内容	推奨
サーバーデータ	RSC fetch、更新には Server Actions
クライアントキャッシュ	TanStack Query など、stale time を設定できるもの
URL の状態	共有可能なフィルターには検索パラメーター
グローバル UI	context は最小限にし、状態を使用箇所の近くに置きます

深いツリーを通じた prop drilling は避け、コンポジションを使うか、安定した境界で context を使用します。

ウォーターフォールとキャッシュ無効化については、references/state_data_fetching.md を参照してください。

3. スタイリングとデザインシステム

• システムのデザイントークン（間隔、色、タイポグラフィ）を使用します
• バリアントには cva などを使用し、Storybook がある場合はドキュメント化します
• レスポンシブ対応とダークモードには、ルールを重複させずトークンを使用します
• チームの合意なしにコンポーネントをフォークしないでください

拡張ルールについては、references/design_system.md を参照してください。

4. アクセシビリティと品質

• まずセマンティック HTML を使用し、ARIA は必要な場合にのみ使います
• キーボード操作：フォーカス順序、フォーカスの可視化、Escape キーで閉じる操作
• すべての入力にラベルを付け、動的な更新を適切に通知します
• 顧客向けのフローでは WCAG 2.1 AA を目標とします

チェックリストと指標については、references/a11y_performance.md を参照してください。

5. パフォーマンス

• 最適化の前に測定します（Lighthouse、Web Vitals、バンドルアナライザー）
• ウォーターフォールを解消します：データ取得を並列化し、サーバーデータを上位に移動します
• ルートや重いウィジェットをコード分割します
• 画像：サイズを指定し、最新のフォーマットを使い、LCP 対象には優先度を設定します

INP と CLS の改善策については、references/a11y_performance.md を参照してください。

6. テストとレビュー

レイヤー	対象
ユニット	Hooks、フォーマッター、リデューサー
コンポーネント	React Testing Library—実装ではなく振る舞い
E2E	重要なユーザージャーニーのみ

PR レビュー： アクセシビリティ、境界状態、不要なクライアント境界、バンドルへの影響、テストの不足。

レビュー基準については、references/frontend_code_review.md を参照してください。

参照資料を読み込むタイミング

• コンポーネントとコンポジション → references/component_architecture.md
• 状態管理とデータ取得 → references/state_data_fetching.md
• デザインシステム → references/design_system.md
• アクセシビリティとパフォーマンス → references/a11y_performance.md
• コードレビュー → references/frontend_code_review.md