Tooling - Vue開発環境とツールチェーン

ロードマップ: Vue.js学習ロードマップ

What（何についてか）

Vue 3 の実務開発で、Single-File Components を快適に書き、型で守り、観察し、検査するためのツールチェーン全体を整理する。対象は Vite, IDE / LSP, Vue Devtools, TypeScript 支援, テスト, lint / format, SFC を支える下位パッケージである。

Why（なぜ必要か）

Vue はフレームワーク本体だけを理解しても十分ではない。.vue ファイルはビルド前提のソース形式であり、開発体験や保守性は周辺ツールによって大きく左右される。SFC を前提にした modern Vue の実務では、ツールチェーン込みで理解する必要がある。

How（どう動くか）

Tooling 全体像

flowchart TD
  A[".vue SFC"] --> B["@vue/compiler-sfc"]
  B --> C["@vitejs/plugin-vue"]
  C --> D["Vite dev server / build"]
  D --> E["runtime-only Vue app"]
  A --> F["vue_ls / editor support"]
  A --> G["vue-tsc"]
  A --> H["eslint-plugin-vue"]
  A --> I["Prettier"]
  E --> J["Vue Devtools"]

1. Try It Online

Vue SFC Playground と StackBlitz 上の Vue + Vite は、ローカル環境を作らずに Vue を試すための実験場である。前者は SFC のコンパイル結果の観察に向き、後者は Vite ベースの実開発に近い。

2. Project Scaffolding

新規 Vue 3 プロジェクトの標準は Vite である。create-vue が公式の雛形作成ツールであり、Vite が dev server と build の中心になる。Vue CLI は webpack ベースの旧世代ツールチェーンで、現在は maintenance mode である。

3. In-Browser Template Compilation

現代の Vue 開発では、SFC のテンプレートはビルド時に事前コンパイルされる。そのため通常は compiler を含まない runtime-only build を使う。ビルドなしでテンプレートを直接ブラウザ解釈させる場合だけ、compiler を含む full build が必要になる。

4. IDE Support

Vue 3 では、SFC の template と script を横断して理解できるエディタ支援が重要になる。VS Code では Vue - Official が標準であり、Neovim では vue_ls を中心に vtsls を併用する理解が実務的である。.vue を主担当するのは vue_ls で、vtsls は TypeScript / JavaScript 支援を補う。

5. Browser Devtools

Vue Devtools は、実行中アプリのコンポーネントツリー、props、state、状態管理イベント、パフォーマンスを観察するためのツールである。通常のローカル開発では Chrome Extension を第一候補とする。Vite Plugin や standalone app は補助的選択肢として扱う。

6. TypeScript

Vue では template も型の世界に含まれる。SFC の editor 上の型支援は Vue language tools が担い、CLI 上の一括検査は vue-tsc が担う。vue-tsc は .vue を理解した型検査ゲートとして使う。

7. Testing

Vite 時代の新規 Vue プロジェクトでは、unit / component test は Vitest が基本になる。E2E は公式例では Cypress が挙げられているが、Playwright などの選定は Testing ガイド側の検討対象として切り分ける。

8. Linting / Formatting

Vue チームは eslint-plugin-vue を提供している。Vite ベースでは lint は dev server に埋め込むより、ESLint を独立運用し、editor・CI・build 前で回す構成が推奨される。整形は Prettier を中心に揃えるとチーム運用が安定する。

9. Lower-Level Packages

• @vue/compiler-sfc: SFC を解析・変換するコア
• @vitejs/plugin-vue: Vite に SFC サポートを接続する公式プラグイン
• vue-loader: webpack / Vue CLI 系で SFC を扱う公式 loader

実務での判断軸

• 新規 Vue 3 プロジェクトは Vite を選ぶ
• .vue は事前コンパイル前提で考える
• editor 支援と runtime 観察は別物として両方用意する
• 型検査は editor だけで終わらせず vue-tsc を使う
• lint と format はツールとして分離し、チームで統一する
• テストは Vitest を基準にし、E2E の細かい選定は別章で比較する

Options API → Composition API 差分（補足）

項目	Options API（旧）	Composition API（新）
標準開発体験	Vue CLI / Vetur 文脈が多かった	Vite / Vue language tools / <script setup> が中心
型支援の主戦場	script 中心	script + template を横断して型支援
コンポーネント記述	export default {} を中心に組み立てる	SFC + <script setup> を前提に簡潔に記述する

Key Concepts

用語	説明
Vite	Vue 3 の標準的な開発サーバ兼ビルドツール
create-vue	公式の Vue プロジェクト雛形生成ツール
runtime-only build	compiler を含まず、事前コンパイル済みテンプレート前提の Vue ビルド
vue-tsc	.vue を理解して型検査する CLI
vue_ls	Vue SFC を主担当する language server
Vue Devtools	実行中の Vue アプリの状態を観察するツール
eslint-plugin-vue	Vue SFC 向け lint ルールを提供する ESLint プラグイン
@vue/compiler-sfc	SFC 解析・変換の中核パッケージ
@vitejs/plugin-vue	Vite へ Vue SFC サポートを接続する公式プラグイン
vue-loader	webpack 系で Vue SFC を扱う loader