※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。
Vue に慣れてくると、次にぶつかるのが「1つの .vue ファイルがどんどん長くなって読めなくなる」問題でした。一覧・検索フォーム・削除ダイアログ…全部を1ファイルに書いた結果、数百行の迷路に。ここで必要になるのがコンポーネント設計、つまり画面を部品に分ける考え方です。この記事では、その基本を整理します。
※ 学習用に調べた内容を個人的にまとめたものです。文章は AI の補助を受けて作成しています。
コンポーネント＝画面の「部品」
Vue では画面を小さな部品（コンポーネント）に分けて作ります。ボタン1つ、入力フォーム、一覧の1行…それぞれを独立した .vue にして、組み合わせて画面を作ります。レゴブロックで大きな作品を組み立てるイメージです。
たとえば「タスク一覧ページ」は、こんな部品の集まりに分解できます。
TaskListPage.vue … ページ全体（親）
├── TaskSearchForm.vue … 検索フォーム
├── TaskTable.vue … 一覧の表
│ └── TaskRow.vue … 表の1行
└── TaskDeleteDialog.vue … 削除確認ダイアログこうしておくと、1ファイルが小さく保たれ、「検索フォームを直したい」と思ったら TaskSearchForm.vue だけ見ればよくなります。
分けるときの4つの基本
- 1つの画面を巨大な .vue にしない（長くなったら部品に切り出す合図）
- 表示（見た目）と処理を分ける（後述）
- 親から子へデータを渡す（props）
- 子から親へイベントを通知する（emits）
props と emits の具体的な書き方は、次の記事で詳しく扱います。ここでは「親子でデータとイベントをやりとりして部品をつなぐ」とだけ押さえておけば十分です。
表示とロジックを分ける
部品化でつまずきやすいのが「どこで分けるか」。おすすめは、まず「見た目の部品（components）」と「ロジック（データ取得や計算）」を分けることです。
ページ / 部品（.vue） … 見た目とタスク操作
↓ 呼び出す
composable（use〜.ts） … データ取得・状態・処理のロジック.vue に API 呼び出しや複雑な計算を全部書くと、すぐ読みにくくなります。ロジックは composable（useTasks.ts のような関数）に逃がすと、.vue は「表示すること」に集中できます。composable は別記事で詳しく扱います。
どこで分ける？の目安
| 分けたほうがよいサイン | 理由 |
|---|---|
| 同じ見た目を複数の場所で使う | 部品にすれば再利用でき、修正も1か所で済む |
| 1つの .vue が長すぎて追えない | 意味のあるまとまりで切り出すと読みやすい |
| 役割がはっきり違う部分がある | 「検索」「一覧」「ダイアログ」など責務ごとに分割 |
やりすぎにも注意
逆に、何でもかんでも細かく分けすぎると、今度は「部品が多すぎてどこに何があるか分からない」状態になります。「再利用する」「長すぎる」「責務が違う」のどれかに当てはまったら分けるくらいの温度感がちょうどよいです。最初から完璧を狙わず、育ってきたら切り出す、で十分です。
実務では、関連する部品・ロジック・APIを features/tasks/ のような機能単位のフォルダにまとめると、迷子になりにくくなります。この構成は最終回の CRUD アプリ編でまとめて扱います。
もっと体系的に学ぶなら（書籍）
この記事はシリーズの一部です。TypeScript前提で Composition API・Pinia・Vue Router・テストまで一冊で体系的に学びたい方には、内容がそのまま重なる次の本がおすすめです。
PR
📕 紙の本
 | Vue 3 フロントエンド開発の教科書 [ WINGSプロジェクト 齊藤 新三 ] 価格:3960円 |
📱 電子書籍版
 | Vue 3 フロントエンド開発の教科書 【電子書籍】[ WINGSプロジェクト 齊藤新三【著】 ] 価格:3960円 |
次に読む
PR
