Vue 3 環境のセットアップと最初のアプリの構築：Node.js から「Hello World」まで
Vue 3の開発環境のセットアップは、Node.jsのインストール、create-vueというスケルトン作成ツールの使用、Viteの起動、そしてブラウザの起動という、たった4つのステップで完了します。このレッスンでは、ゼロから順を追って解説しますので、5分でVueを起動・実行できるようになります。
Vueアプリの開発には、次の3つが必要です：Node.js（ランタイム）＋パッケージマネージャー（npm/pnpm）＋コードエディタ（VS Codeが推奨）。これら3つをすべてインストールすれば、あとはコマンドラインから作業を進めます。
1. 学習内容
- Node.js とは何ですか？また、なぜフロントエンド開発に必要なのでしょうか？
- npm、pnpm、yarn 各パッケージマネージャーの違いと選び方
- 公式の
create-vue足場ツールの使い方とそのオプション - Viteの開発サーバーの仕組みとその速度面での利点
- VS Code と Volar 拡張機能の設定（Vue 3 には必須）
- 5分で「Hello World」を動作させるための標準的な手順
2. 新入社員のための開発環境のセットアップ
(1) 課題：5つのツールのインストールに丸1日かかってしまった
アリスは、シニアフロントエンド開発者としてVue 3のチームに加わったばかりだ。初日、彼女は開発環境のセットアップに4時間を費やした：
- Node.js：会社ではバージョン 20.x が指定されていたが、彼女は 22.x をインストールした → プロジェクトで「エンジンが互換性なし」というエラーが発生した
- パッケージマネージャー：チームではpnpmを使用しているが、彼女のパソコンにはnpmしかインストールされていない → 同僚のコードが実行できない
- VS Code: Volar 拡張機能がインストールされていない →
.vueすべてのファイルに赤い下線が引かれている - Vue DevTools: ブラウザ拡張機能がインストールされていない → デバッグ中にコンポーネントツリーが表示されない
- Gitの設定：ユーザー名とメールアドレスが設定されていない → コミットログに「unknown」と表示される
チームリーダーのチャーリーはため息をついた：
「アリス、だからこそ setup.md というドキュメントがあるんだ。新入社員はみんな、環境のセットアップに1日もかかっている。ワンコマンドでセットアップできる仕組みが必要なんだ。」
(2) Vue 3の公式ソリューション：4つのステップ、5分
BASH
# 1. Installation Node.js 20.x LTS（Recommended for use with nvm Multi-Version Management）
# Mac/Linux: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# Windows: Download nvm-windows，https://github.com/coreybutler/nvm-windows
# 2. Install pnpm (2x faster than npm, Save Disk Space 50%)
npm install -g pnpm
# 3. Use create-vue Create a Project（Vue 3 Official Scaffolding）
pnpm create vue my-app
# Interaction Options：TypeScript? Yes / JSX? No / Router? Yes / Pinia? Yes / Vitest? No / E2E? No
# 4. Start the development server
cd my-app
pnpm install
pnpm dev
# → Open in a browser http://localhost:5173 See Vue Home Page
(3) 収益
チームが新しい「5分セットアップ」ガイドを導入した結果、オンボーディングにかかる時間は1日から30分に短縮されました：
- セットアップ時間：4時間 → 5分（48倍速い）
- 最初のコミット：2日目 → 1日目の午前中
- 最初のPRがマージされた：第1週 → 3日目
- 新入社員の採用満足度：60% → 95%（セットアップに関する不満が解消）
3. Node.js とは何ですか？なぜそれが必要なのでしょうか？
Node.js は、ブラウザの外で JavaScript をローカルに実行できる クロスプラットフォームの JavaScript ランタイム です。フロントエンド開発者は、npm、Vite、Webpack などのビルドツールを実行するためにこれが必要です。
(1) Vue開発におけるNode.jsの役割
graph LR
subgraph Node.jsEcology
N[Node.js 20+]
P[npm/pnpm/yarn]
V[Vite/Webpack]
T[TypeScript Compiler]
end
subgraph Developer Workflow
D[Developer]
I[VS Code + Volar]
B[Browser]
end
N --> P
P --> V
V --> T
D --> I
D --> B
style N fill:#339933,color:#fff
style P fill:#cb3837,color:#fff
style V fill:#646cff,color:#fff
(2) Node.js のバージョンの選択
| バージョン | ステータス | 推奨事項 | ユースケース |
|---|---|---|---|
| 18.x LTS | メンテナンス中 | ⭐⭐⭐⭐ | レガシープロジェクトとの互換性 |
| 20.x LTS | 現在のメインストリーム版 | ⭐⭐⭐⭐⭐ | 新規プロジェクトに最適な選択肢 (Vue 3 を使用するにはバージョン 18 以降が必要です) |
| 22.x LTS | 最新版 | ⭐⭐⭐⭐ | 早期アクセス版、将来的なメインストリーム版 |
| 16.x 以前 | EOL | ❌ | 推奨されません |
(3) おすすめのツール：nvm（Node Version Manager）
nvm を使えば、1台のコンピュータに複数のバージョンの Node.js をインストールし、プロジェクトに応じて切り替えることができます。
BASH
# Installation nvm
# Mac/Linux:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# Windows:
# Download nvm-windows: https://github.com/coreybutler/nvm-windows
# Use nvm to install Node 20
nvm install 20
nvm use 20
# Verification
node --version # v20.x.x
npm --version # 10.x.x
4. パッケージマネージャー：npm 対 pnpm 対 yarn
(1) 主要な3つのパッケージマネージャーの比較
| ディメンション | npm | pnpm | yarn |
|---|---|---|---|
| 速度 | 1倍 | 2～3倍 | 1.5～2倍 |
| ディスク使用率 | 100% | 30～50% | 60～80% |
| 依存関係の分離 | 弱い（ネスト型） | 強い（シンボリックリンク） | 中程度（PnP） |
| モノレポ | 対応 | ✅ 最適 | 対応 |
| 習得の難易度 | 最も簡単 | 中程度 | 中程度 |
| 2026年のおすすめ度 | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
(2) 推奨：pnpm
pnpmは、以下の理由から、2026年には事実上の標準となっています：
- 2～3倍高速：共有ハードリンク＋並列インストール
- スペースを50%節約：
node_modulesにはハードリンクを使用し、重複を回避する - 厳格な依存関係：ファントム依存関係（宣言されていないパッケージへの依存関係）は、デフォルトで無効になっています。
- モノレポ対応:
pnpm-workspace.yamlシンプルな設定
BASH
# Installation pnpm
npm install -g pnpm
# Verification
pnpm --version # 9.x.x
# Install project dependencies
pnpm install # 2-3x faster than npm install
(3) 3つのパッケージマネージャーのインストールコマンドの比較
| 操作 | npm | pnpm | yarn |
|---|---|---|---|
| 依存関係をインストール | npm install |
pnpm install |
yarn install |
| パッケージを追加 | npm i vue |
pnpm add vue |
yarn add vue |
| グローバルインストール | npm i -g vue |
pnpm add -g vue |
yarn global add vue |
| スクリプトを実行 | npm run dev |
pnpm dev |
yarn dev |
| ダウンロード | npm uninstall vue |
pnpm remove vue |
yarn remove vue |
5. 公式の create-vue スキャフォールディング・ツール
Vue 3 では、プロジェクトの作成に create-vue の使用が公式に推奨されています（従来の vue-cli に代わるものです）。
(1) プロジェクトを作成するためのコマンド
BASH
# Use pnpm (Recommended)
pnpm create vue my-vue-app
# Use npm
npm create vue@latest my-vue-app
# Use yarn
yarn create vue my-vue-app
(2) 対話オプションの説明
| オプション | 既定値 | 推奨値 | 説明 |
|---|---|---|---|
| プロジェクト名 | my-vue-app | ✅ | プロジェクト名（現在のディレクトリ名として . を使用することも可能です） |
| TypeScript | いいえ | ✅ はい | エンタープライズプロジェクトでの利用を強く推奨 |
| JSX | いいえ | いいえ | Vueのテンプレート構文の方が洗練されている |
| Vue Router | いいえ | ✅ はい | SPA が必要 |
| Pinia | いいえ | ✅ はい | 状態管理（Vuexの代替） |
| Vitest | いいえ | ✅ はい | ユニットテスト |
| E2Eテスト | なし | 任意 | Playwright / Cypress |
| ESLint | いいえ | ✅ はい | コードチェック |
| Prettier | いいえ | ✅ はい | コードのフォーマット |
(3) 作成後のディレクトリ構造
TEXT
my-vue-app/
├── public/ # Static Resources
│ └── favicon.ico
├── src/ # Source Code
│ ├── assets/ # Image、Font
│ ├── components/ # Public Components
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ └── icons/
│ ├── router/ # Vue Router Layout
│ │ └── index.ts
│ ├── stores/ # Pinia stores
│ │ └── counter.ts
│ ├── views/ # Page Components
│ │ ├── HomeView.vue
│ │ └── AboutView.vue
│ ├── App.vue # Root Component
│ └── main.ts # Input File
├── index.html # HTML Entrance
├── package.json # Project Metadata
├── tsconfig.json # TypeScript Layout
├── vite.config.ts # Vite Layout
└── README.md
6. Viteとは何ですか？なぜWebpackよりも高速なのですか？
Vite（フランス語で「速い」の意味）は、Vue 3 チームによってリリースされた次世代のフロントエンドビルドツールであり、驚異的な速さのコールドスタートを最大の強みとしています。
(1) Vite と Webpack の速度比較
| 起動シナリオ | Vite | Webpack 5 | 違い |
|---|---|---|---|
| コールドスタート（初回起動） | 0.5～1秒 | 10～30秒 | 30倍 |
| ホットモジュール交換 (HMR) | 50 ms未満 | 1～3秒 | 60倍 |
| 大規模プロジェクト（1,000モジュール以上） | 1～2秒 | 30～60秒 | 30倍 |
| 本番ビルド | 5～15秒 | 30～90秒 | 5倍 |
(2) Viteはなぜこれほど高速なのか？
graph TB
subgraph Traditional Tools Webpack
W1[Bundle all modules at startup]
W2[The browser received bundle.js]
W3[Parse and execute the entire bundle]
end
subgraph New Tool Vite
V1[Do not package at startup]
V2[Direct browser request ESM Module]
V3[Compile Individual Modules on Demand]
end
W1 --> W2 --> W3
V1 --> V2 --> V3
style W1 fill:#ff6b6b
style V3 fill:#42b883,color:#fff
「Vite」の秘密：
- 開発モードではネイティブESMを使用する：ブラウザはJSを直接読み込み
<script type="module">、バンドリングは不要です - オンデマンドコンパイル：現在のページで使用されているモジュールのみをコンパイルする
- esbuildのビルド前依存関係：Go言語で書かれたesbuildは、JavaScriptで書かれたBabelよりも100倍高速です。
- 本番環境でのRollupの利用：エコシステムの互換性を維持し、ビルド出力を最適化する
(3) Viteの一般的なコマンド
BASH
# Start the development server（Hotfix）
pnpm dev
# Production Build（Output to dist/ Table of Contents）
pnpm build
# Preview the production build locally
pnpm preview
# Type Checking（Vue 3 + TS）
pnpm type-check
- VS Code + Volar の設定
(1) 必須の拡張機能
| 拡張機能 | 機能 | 必須？ |
|---|---|---|
| Vue - 公式 (Volar) | Vue 3 SFC のシンタックスハイライト、TypeScript の型推論、テンプレートのオートコンプリート | ✅ |
| ESLint | JavaScript / TypeScript のコードチェック | ✅ |
| Prettier | コードのフォーマット（保存時の自動フォーマット） | ✅ |
| Vue VSCode スニペット | Vue コードスニペット (vbase → テンプレート) |
任意 |
| タグの自動リネーム | HTML/Vueタグの自動リネーム | オプション |
| パス・インテリセンス | ファイルパスのオートコンプリート | オプション |
(2) 推奨される VS Code の設定
JSON
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
},
"eslint.validate": ["javascript", "typescript", "vue"],
"typescript.tsdk": "node_modules/typescript/lib"
}
(3) おすすめの VS Code ショートカット 5 選
| ショートカット | 機能 | 使用例 |
|---|---|---|
Ctrl+P |
ファイルをすばやく開く | コンポーネントを検索 |
Ctrl+Shift+P |
コマンドパネル | 任意のコマンドを実行 |
Alt+Shift+F |
フォーマットコード | 完了して保存するとき |
F12 |
定義へジャンプ | 関数のソースを表示 |
Ctrl+Shift+F |
グローバル検索 | コード参照を検索 |
8. 完全な例：5分でVue 3を立ち上げて動作させる
(1) ▶ サンプル：ステップ 1 - Node.js 20 のインストール
BASH
# Mac/Linux Use nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20
nvm use 20
# Windows Use nvm-windows，Download：https://github.com/coreybutler/nvm-windows
# Open after installation PowerShell:
nvm install 20
nvm use 20
# Verification
node --version # v20.x.x
npm --version # 10.x.x
(2) ▶ サンプル：ステップ 2 - pnpm をグローバルにインストールする
BASH
npm install -g pnpm
# Verification
pnpm --version # 9.x.x or higher
(3) ▶ サンプル：ステップ 3 - Vue 3 プロジェクトの作成
BASH
# Navigate to the directory where you want to create the project.
cd ~/projects
# Create a Project（Interaction Mode）
pnpm create vue my-first-vue-app
# Follow the prompts：
# ✅ TypeScript? Yes
# ✅ JSX? No
# ✅ Vue Router? Yes
# ✅ Pinia? Yes
# ✅ Vitest? No
# ✅ E2E? No
# ✅ ESLint? Yes
# ✅ Prettier? Yes
(4) ▶ サンプル：ステップ4 - 開始と確認
BASH
# Go to the project directory
cd my-first-vue-app
# Install Dependencies
pnpm install
# Start the development server
pnpm dev
# Terminal Output：
# VITE v5.4.0 ready in 500 ms
# ➜ Local: http://localhost:5173/
# ➜ press h + enter to show help
ブラウザを開き、http://localhost:5173/ にアクセスしてください。Vueのデフォルトのウェルカムページが表示されます = 5分で完了しました ✅
(5) ▶ サンプル：ステップ 5 - コードの 1 行目を変更する
src/components/HelloWorld.vue を開き、msg という変数を見つけて、自分の名前に変更してください：
VUE
<script setup>
import { ref } from 'vue'
// Change it to your name
const msg = ref('Hello Alice! Welcome to Vue 3!')
</script>
保存すると、ブラウザが自動的に再読み込みされ、新しいコンテンツが表示されます。この5行のコードで、初めてのVueのカスタマイズが完了します。
(6) ▶ サンプル：「Hello World」の5ステップのフローチャート
sequenceDiagram
participant D as Developer
participant N as Node.js
participant C as create-vue
participant V as Vite
participant B as Browser
D->>N: 1. Installation Node 20
N-->>D: v20.x.x
D->>C: 2. pnpm create vue my-app
C-->>D: Generate a Project Skeleton
D->>N: 3. pnpm install
N-->>D: Install Dependencies（30s）
D->>V: 4. pnpm dev
V-->>B: 5. http://localhost:5173
B-->>D: Vue Home Page
D->>D: Change 1, Run the code
D->>B: Automatically refresh after saving
(7) ▶ サンプル：環境確認コマンドの一覧
BASH
# Check if the development environment is ready with a single click
node --version # The output should be v18+ or v20+
npm --version # The output should be 9+ or 10+
pnpm --version # The output should be 8+ or 9+ (If not installed: npm i -g pnpm)
git --version # The output should be 2.30+
code --version # The output should be 1.80+（If not installed：https://code.visualstudio.com）
# View Global Packages
npm list -g --depth=0
❓ よくある質問
Q Node.js を使わなければならないのでしょうか？代わりにDenoやBunを使ってもいいですか？
A Bun（Nodeの3倍高速）を使用できますし、Denoでも動作しますが、Bunの方がVueのツールチェーンとの互換性が優れています。本番環境では、依然としてNode.js LTS（最も安定したエコシステムを備えているため）を推奨します。このチュートリアルではNode 20を使用していますが、Bunユーザーもシームレスに切り替えることができます。
Q pnpm を使わなければならないのですか？ npm だけで済ませることはできませんか？
A はい、可能です。npm は Node.js に同梱されており、別途インストールする必要はありません。pnpmの利点は、処理速度が2～3倍速く、ディスク容量も節約できる点ですが、npm 10以降でも十分です。このチュートリアルでは説明のためにpnpmを使用していますが、npmのコマンドは同じです（npm install / npm run dev）。
Q ViteとWebpack、どちらを選ぶべきですか？
A すべての新規プロジェクトにはViteを使用してください（Vue 3チームによる推奨）。Webpackはレガシープロジェクトのメンテナンス用に留めておきましょう。Viteはコールドスタートが30倍速く、HMRも60倍高速で、はるかに優れた開発体験を提供します。高品質な出力を確保するため、本番環境向けのビルドにはRollupを使用してください。
Q create-vue と create-vite の違いは何ですか？
A create-vue は Vue の公式スキャフォールディングツール（Vue プロジェクトの作成用）であり、create-vite は Vite の公式スキャフォールディングツール（あらゆるフロントエンドプロジェクトの作成用）です。Vueプロジェクトでcreate-vueを使用すると、Vue Router、Pinia、Vitestなど、Vueエコシステムが自動的に設定されます。
Q TypeScript を使わなければならないのでしょうか？ 通常の JavaScript を使ってもいいですか？
A はい、可能です。create-vueで「No」を選択すると、通常のJavaScriptプロジェクトが生成されます。エンタープライズプロジェクトではTypeScriptの使用が推奨されます。型推論により、バグを50%削減できるからです。このチュートリアルのフェーズ4.6では、TypeScriptの統合について詳しく解説しています。まずは通常のJavaScriptから始めて、後でTypeScriptを学ぶことも可能です。
Q Vite dev を起動した後、ポート 5173 にアクセスしてもページが表示されないのはなぜですか？
A 以下の 3 点を確認してください：(1) ターミナルに
Local: http://localhost:5173/ と表示されていますか？; (2) ブラウザでJavaScriptが無効になっていませんか？ (3) 他のプロセスがポート5173を使用していませんか？（lsof -i :5173で確認してください。Macの場合はsudo lsof -iTCP:5173 -sTCP:LISTENを使用してください）。Q VS CodeにVolarをインストールした後も、.vueファイルにエラーが表示されるのはなぜですか？
A (1) ウィンドウを再読み込みする必要があります
Ctrl+Shift+P → 「ウィンドウを再読み込み」； (2) プロジェクトのルートディレクトリに tsconfig.json が含まれていることを確認してください； (3) Volar 拡張機能が「Vue - Official」であることを確認してください（非推奨となった旧バージョンの Vetur ではありません）。📖 まとめ
- Vue 3 での開発には、4つのツールが必要です。Node.js 20 以降、パッケージマネージャー（pnpm を推奨）、create-vue スキャフォールディングツール、そして VS Code + Volar です。
- 2026年に新規プロジェクトを開始する場合、Node.js 20.x LTSが推奨されます
- pnpmはnpmよりも2～3倍高速で、ディスク容量の使用量が50％少なく、2026年のデファクトスタンダードとなっている
- create-vue は Vue 3 の公式スケルトン生成ツールであり、旧バージョンの vue-cli に代わるものです
- Viteは、Vueチームがリリースした次世代のビルドツールであり、Webpackに比べて起動速度が30倍速い
- VS Code と Volar 拡張機能の組み合わせは、Vue 3 開発における標準的な環境です
- 5分でできる「Hello World」：Nodeのインストール → pnpmのインストール → create-vue → pnpm install → pnpm dev
📝 練習問題
(1) 基礎問題（難易度：⭐）
このレッスンの手順に従って、Vue 3 プロジェクトをゼロからセットアップし my-first-vue、正常に実行し pnpm dev、ウェルカムページを表示してください。ターミナルの出力（Node、pnpm、Vite のバージョンを含む）のスクリーンショットを撮影してください。
(2) 上級問題（難易度：⭐⭐）
create-vue を使用して、以下のオプション my-fullstack-vue を指定してプロジェクトを作成します：
- TypeScript：はい
- ルータービュー：はい
- ピニア：はい
- Vitest：はい
- ESLint：はい
- よりきれい：はい
正常に実行されたら、src/views/HomeView.vue のタイトルを「Hello Alice!」に変更し、どの行を変更したかをメモしておいてください。
(3) チャレンジ問題（難易度：⭐⭐⭐）
ViteとWebpackの開発経験の比較：
- コールドスタート時間の測定（Vite 対 Webpack 5）
- ホットリロードの所要時間（コードを1行変更してからブラウザが再読み込みされるまでの時間）を測定する
- Mermaid を使用して比較表を作成し、500文字の体験レポートを執筆してください。
