frontend-developer-skill

フロントエンド開発者スキル

目的

最新のフレームワーク（React、Vue、Next.js）を使用し、本番環境対応の Web アプリケーションを構築するための、包括的なフロントエンド開発の専門知識を提供します。包括的なツールのセットアップ、状態管理のパターン、テスト基盤、パフォーマンス最適化の戦略を網羅します。

使用する場面

• React、Vue、Angular アプリケーションをゼロから構築する
• 最新のフロントエンドツール（Vite、ESLint、Prettier、テストフレームワーク）をセットアップする
• Redux Toolkit、Zustand、Context API を使用して状態管理を実装する
• トークン管理と保護されたルートを含む認証フローを設定する
• 本番環境へのデプロイに向けてバンドルサイズとパフォーマンスを最適化する
• コンポーネントライブラリとデザインシステムを作成する
• 包括的なテスト（単体テスト、統合テスト、E2E テスト）をセットアップする

クイックスタート

このスキルを呼び出す場面：

• React、Vue、Angular アプリケーションを構築する
• フロントエンドツール（Vite、ESLint、Prettier）をセットアップする
• 状態管理（Redux Toolkit、Zustand、Context）を実装する
• 認証フローを設定する
• バンドルサイズとパフォーマンスを最適化する
• テスト（Vitest、Jest、Playwright）をセットアップする

呼び出さない場面：

• バックエンド API のみが必要 → backend-developer を使用
• データベースの最適化 → database-optimizer を使用
• DevOps／デプロイのみ → devops-engineer を使用
• コードを伴わない UI／UX デザイン → ui-designer を使用

選択の指針

フレームワークの選択

Frontend Framework Selection
├─ New Project (greenfield)
│   ├─ Needs SEO + server-side rendering
│   │   ├─ Team knows React → Next.js 14+
│   │   ├─ Team knows Vue → Nuxt.js 3+
│   │   └─ Team flexible → Next.js (ecosystem advantage)
│   │
│   ├─ SPA without SSR requirements
│   │   ├─ React experience → React 18+ (Vite)
│   │   ├─ Vue experience → Vue 3 (Vite)
│   │   └─ Enterprise/complex forms → Angular 15+
│   │
│   └─ Static site (blog, docs)
│       └─ Astro, Next.js SSG, or Vite + React
│
└─ Existing Project
    └─ Continue with existing framework (consistency)

状態管理の選択

シナリオ	ライブラリ	バンドルサイズ	用途
シンプルなローカル状態	useState, useReducer	0 KB	コンポーネントレベルの状態
共有状態（2～3 個のコンポーネント）	Context API	0 KB	テーマ、認証、シンプルなグローバル状態
中規模アプリ（<10 slices）	Zustand	~1 KB	多くのアプリ、優れた開発者体験
大規模アプリ（10+ slices）	Redux Toolkit	~11 KB	エンタープライズ、タイムトラベルデバッグ
サーバー状態	TanStack Query	~12 KB	API データ、キャッシュ

スタイリング手法

Styling Decision
├─ Rapid prototyping → Tailwind CSS
├─ Component library → Radix UI + Tailwind
├─ Dynamic theming → CSS-in-JS (Styled Components, Emotion)
├─ Large team → CSS Modules or Tailwind + Design Tokens
└─ Performance-critical → Plain CSS / SCSS

ベストプラクティス

1. 関数コンポーネントを使用する - モダンな React のパターンです
2. フックを活用する - 可能な限りクラスコンポーネントを避けます
3. 負荷の高い処理をメモ化する - useMemo、useCallback を使用します
4. コンポーネントを遅延読み込みする - 初期バンドルサイズを削減します
5. すべてに型を付ける - TypeScript を活用します
6. 十分にテストする - 単体テスト、統合テスト、E2E テストを実施します
7. 画像を最適化する - 最新のフォーマットと遅延読み込みを使用します
8. エラーバウンダリを実装する - エラーを適切に捕捉します
9. アクセシビリティを確保する - ARIA ラベルとキーボードナビゲーションを使用します
10. パフォーマンスを監視する - Core Web Vitals を追跡します

よく使われるパターン

カスタムフック

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

コンテナ／プレゼンテーション

// Presentational (dumb)
const UserList = ({ users, onUserClick }: UserListProps) => (
  <ul>
    {users.map(user => (
      <li key={user.id} onClick={() => onUserClick(user.id)}>
        {user.name}
      </li>
    ))}
  </ul>
);

// Container (smart)
const UserListContainer = () => {
  const { users, fetchUsers } = useUsers();
  useEffect(() => fetchUsers(), [fetchUsers]);
  return <UserList users={users} onUserClick={handleClick} />;
};

トラブルシューティング

よくある問題

状態が更新されない

• 正しい setter を使用しているか確認します
• useEffect の依存配列を確認します
• コンポーネントが再レンダリングされているか確認します

コンポーネントが再レンダリングされない

• 不要な再レンダリングがないか確認します
• メモ化が機能しているか確認します
• props の変更を確認します

パフォーマンスの問題

• React DevTools でプロファイルを確認します
• バンドルサイズが大きくないか確認します
• 不要な再レンダリングを確認します
• コード分割を実装します

テストが失敗する

• テストのセットアップを確認します
• モックの実装を確認します
• 非同期処理の扱いを確認します
• 適切にクリーンアップされているか確認します

品質チェックリスト

アーキテクチャ

• フレームワークの選択に妥当な理由がある
• 状態管理が明確（サーバー状態とクライアント状態が分離されている）
• コンポーネント構造が論理的である
• コード分割が実装されている

コード品質

• TypeScript の strict モードが有効になっている
• ESLint と Prettier が設定されている
• 重要な処理経路のテストがある
• props のバケツリレーがない（状態管理を使用する）

パフォーマンス

• バンドルサイズが最適化されている（gzip 圧縮後 <200KB）
• 負荷の高い処理がメモ化されている
• 画像が最適化されている（遅延読み込み、WebP）
• サードパーティライブラリが評価されている

テスト

• テストフレームワークが設定されている
• 重要な処理経路がテストされている
• E2E テストがある

セキュリティ

• 環境変数が安全に管理されている
• 入力がサニタイズされている
• 認証トークンが安全に管理されている
• 依存関係が監査されている

統合パターン

react-specialist

• 引き継ぎ: frontend-developer がツールをセットアップし、react-specialist が複雑なコンポーネントのロジックを実装します
• ツール: どちらも React を使用します。frontend-developer はエコシステムのツールを担当します

nextjs-developer

• 引き継ぎ: SSR/SEO が必要な場合は、Next.js 固有の機能を扱う担当者に引き継ぎます
• ツール: frontend-developer は Vite/CRA を使用し、nextjs-developer は Next.js App Router を使用します

backend-developer

• 引き継ぎ: frontend-developer が API クライアントを実装し、backend-developer が API コントラクトを提供します
• ツール: frontend-developer は Axios/Fetch、TanStack Query を使用します

frontend-ui-ux-engineer

• 引き継ぎ: frontend-developer がコンポーネントの構造を設定し、frontend-ui-ux-engineer がスタイルを適用します
• ツール: どちらも React を使用します。frontend-ui-ux-engineer は Framer Motion と Tailwind のデザイントークンを追加します

その他のリソース

• 詳細な技術リファレンス： REFERENCE.md を参照してください
• コード例とパターン： EXAMPLES.md を参照してください