vue3-component-decomposition

Vue 3 コンポーネントの分割

読みやすさを損なわずに、大きな Vue 3 コンポーネントを小さくテスト可能な単位に分割します。

使用する場面

• コンポーネントが複数の関心事（UI の描画、データ取得、フォームロジック、フィルタリング、副作用）を扱っている
• setup() または <script setup> の内容が増えて、全体を把握しにくくなっている
• テンプレートに複雑な式や繰り返しのブロックが含まれている
• ある機能への変更が、無関係な動作を頻繁に壊している

分割のワークフロー

1. コードを移動する前に、責務を整理します。
   • view（マークアップ／プレゼンテーション）
   • state（refs／reactive／computed）
   • effects（watch／watchEffect／ライフサイクル）
   • io（API 呼び出し）
2. まずプレゼンテーション用のサブコンポーネントを抽出します。
3. 親と子の間に明示的なインターフェース（props、emits、slots）を定義します。
4. 再利用可能な状態管理ロジックをコンポーザブルに抽出します。
5. 親コンポーネントは、データフローと機能の構成を調整する役割を担います。

コンポーネントのベストプラクティス

• 1 ファイルにつき 1 コンポーネントを使用し、複数の単語からなるコンポーネント名を付けます。
• テンプレートの式はシンプルに保ち、複雑な式は computed の値に移します。
• v-for には :key を使用し、同じ要素で v-if と v-for を組み合わせないでください。
• 型付きで明示的な props の契約と、型付きの emits を使用します。
• 可変の UI 領域には、真偽値の props を増やすのではなく slots を優先します。
• 子コンポーネントは、1 つの UI 上の関心事に集中させます。

コンポーザブルのベストプラクティス

• use 接頭辞を付けてコンポーザブルに名前を付けます（useOrdersTable、useUserFilters）。
• 分割代入してもリアクティビティが保たれるよう、refs／computed／メソッドをプレーンなオブジェクトとして返します。
• リアクティブな入力（値／ref／getter）を受け取り、toValue() で正規化します。
• ロジックがリアクティブな入力に依存する場合は、watchEffect() 内で toValue() を呼び出します（または refs／getters を直接監視します）。
• DOM の副作用は onMounted() で実行し、必ず onUnmounted() でクリーンアップします。
• 意図的に共有状態を構築する場合を除き、隠れたグローバル可変状態は避けます。

推奨する構成

src/
  components/
    feature/
      OrdersPage.vue               # orchestrator
      OrdersToolbar.vue            # presentational controls
      OrdersTable.vue              # table rendering
      OrdersTableRow.vue           # row rendering
  composables/
    useOrdersQuery.ts              # fetch/pagination/sort
    useOrdersFilters.ts            # filter state and derived query
    useOrdersSelection.ts          # row selection logic

守るべき指針

• 独立した価値のない小さなラッパーは抽出しないでください。
• 「何でもこなすコンポーザブル」は作らず、ビジネス上の機能ごとに分割します。
• 親の状態全体を子に渡さず、必要な props だけを渡します。
• プレゼンテーション用コンポーネントにビジネスロジックを混在させないでください。

PR チェックリスト

• 親コンポーネントが実装の羅列ではなく、機能を調整するものとして読める
• 子コンポーネントの API が明確で、単独で動作を把握できる
• コンポーザブルの責務が明確で、予測しやすい戻り値の形になっている
• 副作用がクリーンアップされ、SSR に安全である
• テンプレートの複雑さが軽減され、より小さな単位を対象にテストできる

参考資料

• Vue ドキュメント：コンポーザブル - https://vuejs.org/guide/reusability/composables.html
• Vue スタイルガイド（古いものですが、今でも参考になります）：
  • https://vuejs.org/style-guide/rules-essential.html
  • https://vuejs.org/style-guide/rules-strongly-recommended.html