react-vite-expert

React + Vite エキスパート

概要

最新の React 開発パターン、最適なプロジェクト構成、パフォーマンス最適化技術、本番環境に対応した設定について深い知識を持つ、React + Vite のエキスパートを目指します。このスキルでは、ビルドツールとして Vite を使用し、高速で保守性と拡張性に優れた React アプリケーションを構築するために必要なすべてを提供します。

主な機能

1. プロジェクトのアーキテクチャと構成

保守性と拡張性を最大限に高める React アプリケーションの構成方法を案内します。

リファレンス：references/project_architecture.md

この包括的なガイドでは、次の内容を取り上げます。

• フォルダー構成のパターン：機能ベース、アトミックデザイン、ドメイン駆動
• ファイル構成：コロケーション戦略、命名規則
• インポート戦略：パスエイリアス、バレルエクスポート、ツリーシェイキング
• 状態管理の構成：ローカルかグローバルか、状態の配置場所
• スケーリングの指針：アプリの成長に合わせて構成を発展させる方法

参照するタイミング：

• ユーザーから「React プロジェクトはどのように構成すればよいですか？」と聞かれたとき
• 新しいプロジェクトを開始するとき
• 既存のプロジェクト構成をリファクタリングするとき
• アプリ内の移動が難しくなってきたとき
• チームの規約を定める必要があるとき

主な判断フロー：

1. 機能ベースかコンポーネントベースか：「Optimal Folder Structure」セクションを読みます
2. 状態管理の方針：「State Management Strategies」セクションを読みます
3. インポートの整理：「Import Strategies」セクションを読みます

2. コード生成とスキャフォールディング

本番環境に対応したテンプレートを使用して、コンポーネント、フック、機能の作成を自動化します。

利用可能なスクリプト：

scripts/create_component.py 必要なファイル一式を含むコンポーネントを生成します。

• コンポーネントファイル（.tsx）
• TypeScript の型定義（.types.ts）
• CSS モジュール（.module.css）
• テスト（.test.tsx）
• Storybook のストーリー（.stories.tsx）［任意］
• インポートを整理するためのインデックスファイル

# Create a basic component
python scripts/create_component.py Button --type component

# Create a page component with lazy loading
python scripts/create_component.py Dashboard --type page

# Create component with children prop
python scripts/create_component.py Card --children

# Create component with Storybook story
python scripts/create_component.py Button --story

# Without tests
python scripts/create_component.py SimpleComponent --no-tests

使用するタイミング：

• 新しいコンポーネントを作成するとき
• 新しい機能モジュールをセットアップするとき
• 一貫したコンポーネント構成が必要なとき
• 開発を効率化したいとき

scripts/create_hook.py 一般的なパターン向けのテンプレートを使用して、カスタムフックを生成します。

• 状態管理フック
• エフェクトフック
• データ取得フック
• LocalStorage フック
• デバウンスフック
• インターバルフック

# Create custom hook
python scripts/create_hook.py useAuth --type custom

# Create data fetching hook
python scripts/create_hook.py useUserData --type fetch

# Create localStorage hook
python scripts/create_hook.py useSettings --type localStorage

# Create debounce hook
python scripts/create_hook.py useSearchDebounce --type debounce

使用するタイミング：

• 再利用可能なロジックを切り出すとき
• カスタムの状態管理を作成するとき
• 一般的なフックのパターンが必要なとき
• テスト付きのフックを自動生成したいとき

3. パフォーマンスの最適化

React アプリケーションのパフォーマンスを最大化し、バンドルサイズを最小限に抑えます。

参照：references/performance_optimization.md

このガイドでは、次の内容を説明します。

• React のレンダリング最適化：React.memo()、useMemo()、useCallback()
• コード分割：React.lazy()、ルートベースの分割、コンポーネントの分割
• 仮想化：react-window による長いリストの最適化
• デバウンスとスロットリング：入力の最適化、スクロール処理
• Vite のビルド最適化：チャンク分割、圧縮、最小化
• 画像の最適化：WebP/AVIF、遅延読み込み、レスポンシブ画像
• ネットワークの最適化：API リクエストの最適化、プリフェッチ
• CSS のパフォーマンス：CSS Modules と CSS-in-JS の比較、クリティカル CSS
• Web Vitals の計測：LCP、FID、CLS の測定

参照するタイミング：

• アプリの動作が遅い、または重いと感じるとき
• バンドルサイズが大きいとき
• 初回読み込みに時間がかかるとき
• ユーザーから最適化について質問されたとき
• 本番環境へのデプロイ準備をするとき
• パフォーマンス監査で問題が見つかったとき

パフォーマンスのクイックチェックリスト：

1. python scripts/analyze_bundle.py を実行して、大きな依存関係を特定します
2. references/performance_optimization.md で最適化の方法を確認します
3. ルートにコード分割を適用します：React.lazy(() => import('./Page'))
4. コストの高いコンポーネントをメモ化します：React.memo(Component)
5. コストの高い計算には useMemo() を使用します
6. 長いリストには仮想化を実装します（react-window）
7. 画像を最適化します（WebP、遅延読み込み）
8. assets/vite.config.optimized.ts の Vite 設定を確認します

scripts/analyze_bundle.py ビルド出力を分析し、最適化に関する推奨事項を提示します。

# Run bundle analysis
python scripts/analyze_bundle.py

分析内容：

• package.json の依存関係（サイズの大きなライブラリを特定）
• インポートパターン（ツリーシェイキングに適したインポート方法を提案）
• ビルド出力（バンドルサイズ、チャンクの分布）
• 具体的な最適化の推奨事項を提示

実行するタイミング：

• 本番環境へのデプロイ前
• 新しい依存関係を追加した後
• バンドルサイズが予期せず増加したとき
• 毎月の定期監査
• パフォーマンス最適化セッション

4. 本番環境に対応した設定

最適化された Vite の設定とプロジェクト構成をデプロイします。

利用可能なアセット：

assets/vite.config.optimized.ts 以下の機能を備えた、完全に最適化された Vite 設定です。

• パスエイリアス：すっきりとしたインポート（@/components、@/hooks など）
• 手動チャンク分割：キャッシュ効率を高める、ベンダー別および機能別のチャンク
• 圧縮：本番環境で console.log を削除する Terser
• バンドルアナライザー：バンドル構成を可視化
• アセット最適化：画像の処理、フォントの読み込み
• 開発用プロキシ：API プロキシ設定
• ソースマップ：条件付きのソースマップ生成
• CSS コード分割：CSS チャンクの自動生成

使用する場面：

• 新しいプロジェクトを開始するとき
• 既存のビルドを最適化するとき
• 本番環境用のパイプラインを設定するとき
• より優れたキャッシュ戦略が必要なとき
• バンドルを分析したいとき

使用方法：

1. assets/vite.config.optimized.ts をプロジェクトのルートにコピーします
2. 依存関係をインストールします：npm install -D rollup-plugin-visualizer
3. 機能に合わせて手動チャンクをカスタマイズします
4. アナライザーを使ってビルドを実行します：npm run build:analyze

assets/tsconfig.optimized.json 以下の機能を備えた TypeScript 設定です。

• 厳格モードを有効化：コンパイル時に、より多くのエラーを検出します
• パスエイリアス：Vite の設定と一致します
• 最適なコンパイラーオプション：Vite と最新の React 向けです
• 未使用コードの検出：noUnusedLocals、noUnusedParameters
• 型安全性：noImplicitReturns、noUncheckedIndexedAccess

使用する場面：

• 新しい TypeScript プロジェクトを開始するとき
• 型チェックをより厳格にしたいとき
• パスエイリアスが必要なとき
• 型安全性を向上させるとき

assets/package.json.example 以下を含む、完全な package.json です。

• 推奨スクリプト一式：dev、build、test、lint、format
• 必須の依存関係：React、React DOM、Router
• 開発用依存関係：TypeScript、ESLint、Prettier、Vitest
• 推奨されるオプション依存関係：ユースケース別に分類
• Husky と lint-staged の設定：コミット前フック
• CI/CD スクリプト：自動化パイプライン用

使用する場面：

• 新しいプロジェクトを開始するとき
• スクリプトの推奨例が必要なとき
• CI/CD を設定するとき
• Git フックを使いたいとき
• package の参照例が必要なとき

assets/project-structure-example.md 以下を含む、完全なプロジェクト構成です。

• ディレクトリツリー全体：機能ベースのアーキテクチャ
• 主要ファイルの例：App.tsx、ルーター、プロバイダー、API 設定
• 設定例：vitest、eslint、prettier
• テストのセットアップ：テストユーティリティとモック
• スケーリングのガイドライン：構成を拡張する方法

使用する場面：

• プロジェクトをゼロから開始するとき
• 構成の参照例が必要なとき
• 既存のプロジェクトをリファクタリングするとき
• チームに構成方法を教えるとき
• プロジェクトテンプレートを作成するとき

5. React のベストプラクティスとパターン

最新の React パターンを実装し、よくある落とし穴を避けます。

参照先：references/best_practices.md

このガイドでは、以下を扱います。

• コンポーネントパターン：複合コンポーネント、レンダープロップ、高階コンポーネント、カスタムフック
• TypeScript のベストプラクティス：コンポーネント、フック、イベント、ジェネリックコンポーネントの型付け
• エラー処理：エラーバウンダリー、非同期エラーの処理
• フォーム処理：制御コンポーネント、バリデーション、フォームライブラリ
• テスト：コンポーネントのテスト、フックのテスト、モック
• よくあるアンチパターン：避けるべきこととその理由
• アクセシビリティ：a11y のベストプラクティス、ARIA、キーボード操作

参照する場面：

• 複雑なコンポーネントパターンを実装するとき
• TypeScript のガイダンスが必要なとき
• エラー処理を設定するとき
• フォームを作成するとき
• テストを書くとき
• ユーザーから「〜する最善の方法は？」と質問されたとき
• コードレビューを依頼されたとき
• React のパターンを教えるとき

パターンの選択ガイド：

• 複合コンポーネント：柔軟で組み合わせ可能な UI（タブ、アコーディオン）向け
• カスタムフック：ロジックを抽出して再利用する場合（useAuth、useDebounce）
• Context + Hook：ツリー全体で状態を共有する場合（テーマ、認証）
• レンダープロップ：レンダリングを制御しながらコードを共有する場合（使用頻度は低く、ほとんどがフックに置き換えられています）
• 高階コンポーネント（HOC）：横断的関心事を追加する場合（使用頻度は低く、ほとんどがフックに置き換えられています）

6. TypeScript を活用する

適切な TypeScript パターンを使って、型安全な React コードを書きます。

references/best_practices.md に記載されている主な TypeScript パターン：

• コンポーネントの props の型付け（インターフェースと型の使い分け）
• イベントハンドラーの型付け
• ref の型付け
• ジェネリックコンポーネントの型付け
• フックの型付け
• 型ガードと型の絞り込み
• ユーティリティ型

ユーザーから TypeScript について質問された場合：

1. references/best_practices.md の関連セクションを読みます
2. 型安全な例を提示します
3. そのパターンを使う理由を説明します
4. 間違った方法と正しい方法の両方を示します

よくある TypeScript の質問：

• 「このコンポーネントにはどのように型を付ければよいですか？」→ コンポーネントの Props の型付けセクション
• 「イベントハンドラーにはどのように型を付ければよいですか？」→ フックの型付けセクション
• 「ジェネリックコンポーネントを作成するにはどうすればよいですか？」→ ジェネリックコンポーネントセクション
• 「ref にはどのように型を付ければよいですか？」→ フックの型付けセクション

7. テスト戦略

React アプリケーション向けに包括的なテストを実装します。

references/best_practices.md に記載されているテストパターン：

• React Testing Library を使ったコンポーネントテスト
• カスタムフックのテスト
• テストユーティリティとセットアップ
• モック戦略
• 統合テスト

テストの方針：

• 実装ではなくユーザーの振る舞いをテストします
• ユーザーが見るもの、行うことをテストします
• 外部依存関係をモックします
• 内容が明確なテスト名を使います
• Arrange-Act-Assert パターンを使います

ユーザーがテストについて支援を求めた場合：

1. コンポーネントジェネレーターがテストを作成したか確認します：scripts/create_component.py
2. references/best_practices.md のテストセクションを参照します
3. assets/project-structure-example.md にあるテストのセットアップを示します
4. ユーザーの用途に合わせた具体的なテスト例を提示します

8. 状態管理のガイダンス

適切な状態管理ソリューションを選択し、実装します。

状態管理の判断ツリー（references/project_architecture.md より）：

Is it server data (from API)?
└─ Yes → TanStack Query (React Query)

Is it local to a component?
└─ Yes → useState

Is it shared between 2-3 components?
└─ Yes → Lift state up (props)

Is it global but simple (theme, auth)?
└─ Yes → Context + useState

Is it global and complex?
├─ Small/medium app → Zustand
└─ Large app with complex async → Redux Toolkit

references/project_architecture.md を参照するタイミング：

• 状態管理ソリューションを選ぶとき
• 各アプローチのコード例が必要なとき
• トレードオフを理解するとき
• 状態管理を移行するとき
• 再レンダリングによるパフォーマンスの問題があるとき

ワークフローの例

例 1：「ベストプラクティスに従って、新しい React プロジェクトを始めるのを手伝ってください」

1. 要件を把握する：

   • プロジェクトの規模、機能、状態管理のニーズ、チームの規模について尋ねます
   • 使用するパターンと構成の複雑さを判断します

2. 構成を提示する：

   • assets/project-structure-example.md を示します
   • 機能ベースのアーキテクチャと、よりシンプルなアーキテクチャについて説明します
   • プロジェクトの規模に応じて推奨します

3. 設定する：

   • assets/vite.config.optimized.ts をコピーします
   • assets/tsconfig.optimized.json をコピーします
   • スクリプトについては assets/package.json.example を参照します

4. 初期コンポーネントを生成する：

   # Create basic UI components
   python scripts/create_component.py Button --type component --story
   python scripts/create_component.py Input --type component
   
   # Create pages
   python scripts/create_component.py HomePage --type page
   
   # Create hooks
   python scripts/create_hook.py useAuth --type custom
   

5. 次のステップを説明する：

   • Git フック（husky）を設定します
   • ESLint と Prettier を設定します
   • テストを設定します
   • 初期ルートを作成します

例 2：「React アプリの動作が遅いのですが、最適化するにはどうすればよいですか？」

1. 現在の状態を分析する：

   # Run bundle analyzer
   python scripts/analyze_bundle.py
   

2. 分析結果を確認する：

   • サイズの大きい依存関係を特定します
   • 重複がないか確認します
   • インポートのパターンを確認します

3. 最適化ガイドを参照する：

   • references/performance_optimization.md を読みます
   • 分析結果に基づいて、関連するセクションを確認します

4. 効果の大きい順に最適化を適用する：

   • コード分割：ルートに遅延読み込みを実装します
   • サイズの大きい依存関係を削除：より軽量な代替案を提案します
   • メモ化：負荷の高いコンポーネントに React.memo() を追加します
   • 仮想化：長いリストをレンダリングする場合に適用します
   • 画像の最適化：遅延読み込みと WebP 形式を実装します
   • ビルドの最適化：assets/vite.config.optimized.ts を適用します

5. 改善を測定する：

   • 最適化の前後にビルドを実行します
   • バンドルサイズを比較します
   • Web Vitals をテストします

例 3：「成長している React プロジェクトをどのように整理すればよいですか？」

1. 現在の規模を評価する：

   • 質問する：コンポーネントはいくつありますか？機能はいくつありますか？
   • 特定する：現在の課題

2. アーキテクチャガイドを参照する：

   • references/project_architecture.md を読む
   • セクション：「最適なフォルダー構成」

3. 構成を推奨する：

   • 小規模（コンポーネント 10 個未満）：フラットな構成
   • 中規模（10～50 個）：機能別フォルダー＋共有コンポーネント
   • 大規模（50 個以上）：完全な機能ベースアーキテクチャ

4. 具体例を示す：

   • assets/project-structure-example.md の該当セクションを表示する
   • 各フォルダーの目的を説明する

5. 移行方法を提示する：

   • 一度にすべてをリファクタリングしない
   • 新しい機能は新しい構成で作成することから始める
   • 古いコードを段階的に移行する

例 4：「似たようなコンポーネントをたくさん作成する必要があります」

1. コンポーネントジェネレーターを使用する：

   # Generate multiple components at once
   python scripts/create_component.py UserCard --type component
   python scripts/create_component.py ProductCard --type component
   python scripts/create_component.py OrderCard --type component
   

2. 構成を説明する：

   • 生成されたファイルを表示する
   • 各ファイルの目的を説明する
   • 必要に応じてカスタマイズする

3. 共有パターンを作成する：

   • 共通の props を共有型に切り出す
   • ベースとなる Card コンポーネントを作成する
   • コンポジションパターンを使用する

4. パターンガイドを参照する：

   • references/best_practices.md の複合コンポーネントパターンを示す
   • コンポーネントのコンポジションを実演する

例 5：「React アプリのテストを設定するのを手伝ってください」

1. テストの設定を参照する：

   • assets/project-structure-example.md を表示する
   • セクション：「src/test/」フォルダーの構成

2. テストユーティリティを設定する：

   • 例からテスト設定をコピーする
   • vitest.config.ts を設定する
   • テストユーティリティ（プロバイダーを使ったレンダリング）を作成する

3. テスト付きコンポーネントを生成する：

   # Components come with tests by default
   python scripts/create_component.py Button
   

4. テストパターンを説明する：

   • references/best_practices.md を参照する
   • セクション：「テストのベストプラクティス」
   • コンポーネントとフックのテスト例を示す

5. CI/CD を設定する：

   • assets/package.json.example のテストスクリプトを追加する
   • コミット前フックを設定する
   • GitHub Actions を設定する

このスキルを使用する際のベストプラクティス

包括的に対応する

• 質問に答えるだけでなく、完全な解決策を提示する
• ファイル構成、設定、例を示す
• 推奨事項の背景にある「理由」を説明する

すべてのリソースを活用する

• スクリプト：一貫性のあるコードを生成する
• リファレンス：概念を詳しく掘り下げる
• アセット：本番環境ですぐに使える設定と例

次の順序に従う

1. 把握する：確認の質問をする
2. 参照する：関連ドキュメントを確認する
3. 生成する：該当する場合はスクリプトを使用する
4. 説明する：パターンや概念を教える
5. 提示する：そのまま動作する完全な例を示す

パフォーマンスを優先する

• 積極的に最適化を提案する
• バンドルアナライザーを定期的に実行する
• デフォルトで遅延読み込みを推奨する
• 最適化された設定を使用する

ベストプラクティスを教える

• 悪い方法と良い方法を示す
• トレードオフを説明する
• TypeScript の strict モードを参照する
• テストを推奨する

整理された状態を保つ

• 早い段階で機能ベースの構成を推奨する
• 最初からパスエイリアスを使用する
• 命名規則を確立する
• 拡張性を考慮して計画する

リファレンスドキュメント

references/project_architecture.md

次の場合に読む：

• 新しいプロジェクトの構成
• 既存プロジェクトの整理
• 状態管理の選択
• インポートの設定
• ユーザーから「どのように整理すればよいですか？」と質問されたとき

主なセクション：

• 最適なフォルダー構成（2 つのパターン）
• 命名規則
• コンポーネントの整理パターン
• 状態管理の戦略
• インポートの戦略
• 判断マトリクス

references/performance_optimization.md

次の場合に読む：

• アプリの動作が遅い
• バンドルサイズが大きい
• 本番環境向けに最適化する
• ユーザーからパフォーマンスについて質問されたとき
• デプロイの前

主なセクション：

• React のレンダリング最適化（memo、useMemo、useCallback）
• コード分割
• 仮想化
• Vite のビルド最適化
• 画像の最適化
• ネットワークパフォーマンス
• CSS のパフォーマンス
• Web Vitals の追跡

references/best_practices.md

次の場合に読みます：

• パターンの実装
• TypeScript に関する質問
• エラー処理の設定
• フォームの実装
• テストに関する質問
• コードレビュー

主なセクション：

• コンポーネントパターン（5 パターン）
• TypeScript のベストプラクティス
• エラー処理パターン
• フォーム処理
• テストのベストプラクティス
• よくあるアンチパターン
• アクセシビリティ

クイックリファレンス

よく使うコマンド

# Generate component
python scripts/create_component.py ComponentName --type component

# Generate page
python scripts/create_component.py PageName --type page

# Generate hook
python scripts/create_hook.py useHookName --type custom

# Analyze bundle
python scripts/analyze_bundle.py

よくある質問

• 「プロジェクトをどのように構成すればよいですか？」→ references/project_architecture.md
• 「パフォーマンスをどのように最適化すればよいですか？」→ references/performance_optimization.md + analyze_bundle.py を実行
• 「どのパターンを使えばよいですか？」→ references/best_practices.md
• 「Vite をどのように設定すればよいですか？」→ assets/vite.config.optimized.ts
• 「package.json はどのように記述すればよいですか？」→ assets/package.json.example

ファイル構成の優先順位

1. 機能ベース（大規模アプリ）- references/project_architecture.md を参照
2. コンポーネントベース（中規模アプリ）- よりシンプルな構成を参照
3. フラット（小規模アプリ）- 最小限の構成

パフォーマンスの優先順位

1. コード分割（まずルート）
2. 大きな依存関係を削除
3. 遅延読み込み（画像、コンポーネント）
4. メモ化（処理コストの高いコンポーネント）
5. 仮想化（長いリスト）

状態管理の優先順位

1. サーバーデータ → React Query
2. ローカル状態 → useState
3. 共有するシンプルな状態 → Context
4. グローバルな複雑な状態 → Zustand または Redux Toolkit

このスキルを使用しない場合

• React 以外のフレームワーク：Next.js には独自のパターンがあります（Next.js スキルを使用）
• React Native：モバイルには異なるパターンがあります
• クラスコンポーネント：最新の関数コンポーネントに焦点を当てています
• Vite 以外のビルドツール：Webpack／Parcel には異なる設定があります
• バックエンド開発：このスキルはフロントエンドに重点を置いています

これらのトピックについては、一般的な React のガイダンスを提供しつつ、制約があることを伝えてください。

成功指標

React + Vite プロジェクトでは、次の目標を達成してください：

• ✅ バンドルサイズ < 200KB（初期読み込み時、gzip 圧縮後）
• ✅ Lighthouse スコア > 90
• ✅ すべてのテストに合格
• ✅ ESLint エラーなし
• ✅ 一貫したファイル構成
• ✅ 型安全（TypeScript strict mode）
• ✅ ビルド時間が短い（本番ビルドで < 30s）
• ✅ HMR が高速（< 100ms）