こんにちは、かつコーチです。
前回はVue.jsとReactの立ち位置の違いについて解説しました。
今回は、実際に自分のパソコンでVueを動かせるようにする「環境構築」をやっていきます。
手を動かして初めて実感が湧く部分なので、ぜひ一緒に進めてみてください。
Vue.jsの開発環境に必要なもの
Node.jsのインストールを確認する
Vueの開発環境を作るには、まずNode.js（JavaScriptをブラウザの外で動かすための実行環境）が必要です。
すでにReactの学習でNode.jsをインストール済みの人は、そのまま使えます。
ターミナルで以下のコマンドを実行し、バージョンが表示されればインストール済みです。
node -v
# v20.11.0 のようにバージョンが表示されればOK
もし何も表示されない・エラーが出る場合は、Node.js公式サイトからLTS版（長期サポート版）をインストールしてください。
なぜViteを使うのか
Vueの環境構築には、Vite（読み方は「ヴィート」、フランス語で「速い」の意）というビルドツールを使うのが現在の主流です。
以前はVue CLIというツールが標準でしたが、現在は開発サーバーの起動やホットリロード（コード変更の即時反映）が圧倒的に速いViteが公式に推奨されています。
Reactの学習でCreate React AppやViteに触れた人は、同じような役割のツールだとイメージすればOKです。
私が初めてVue CLIからViteに乗り換えたときは、開発サーバーの起動時間が体感で「一瞬」になり、その速さの違いに驚いた記憶があります。
Viteでプロジェクトを作成する
コマンド一つでプロジェクトを作る
ターミナルで、プロジェクトを作りたいディレクトリに移動してから、以下のコマンドを実行します。
npm create vue@latest
実行すると、対話形式でいくつか質問されます。
✔ Project name: … my-vue-app
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? … No
✔ Add ESLint for code quality? … Yes
質問への回答の考え方
このブログのコード例はTypeScript（<script setup lang="ts">）で統一しているので、「Add TypeScript?」は必ずYesを選んでください。
Vue RouterとPiniaは、それぞれルーティングと状態管理を扱う後半の記事であらためて詳しく解説するので、今の段階ではNoで問題ありません。
必要になったタイミングで、個別にインストールする方法も後の記事で紹介します。
ESLint（コードの書き方をチェックするツール）は、初心者のうちから入れておくと、うっかりミスに気づきやすくなるのでおすすめです。
プロジェクトを起動してみる
依存パッケージのインストールと起動
質問に答え終わると、プロジェクトのフォルダが作成されます。
以下の手順で、実際にブラウザで表示してみましょう。
cd my-vue-app
npm install
npm run dev
npm run devを実行すると、ターミナルに次のような表示が出ます。
VITE v5.x.x ready in 320 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
表示されたhttp://localhost:5173/をブラウザで開くと、Vueのロゴが入ったウェルカムページが表示されれば成功です。
プロジェクトの構成を確認する
主要なファイルとフォルダ
作成されたプロジェクトの中身を、簡単に確認しておきましょう。
| ファイル・フォルダ | 役割 |
|---|---|
src/main.ts | アプリの起動地点（エントリーポイント） |
src/App.vue | アプリ全体のルートコンポーネント |
src/components/ | 個別のコンポーネントを置くフォルダ |
vite.config.ts | Viteの設定ファイル |
package.json | 依存パッケージやコマンドの定義 |
ReactのCreate React AppやVite + Reactのプロジェクト構成を知っている人には、役割の対応がイメージしやすいはずです。
React編でのsrc/App.tsxが、Vueではsrc/App.vueにあたる、という感覚で捉えると理解が早いです。
.vueファイルという独自の拡張子
Vueでは、コンポーネントを単一ファイルコンポーネント（Single File Component、略してSFC）と呼ばれる.vueという拡張子のファイルで管理します。
<script setup lang="ts">
// ロジックを書く部分
</script>
<template>
<!-- HTMLに近いテンプレートを書く部分 -->
</template>
<style scoped>
/* このコンポーネントだけに効くCSSを書く部分 */
</style>
1つのファイルに「ロジック」「テンプレート」「スタイル」の3つがまとまっているのが特徴です。
Reactでは、ロジックとJSXは1つの.tsxファイルにまとまっていても、スタイルは別ファイル（CSS ModulesやCSS-in-JSなど）に分けることが多かったので、この「3点セットが1ファイルに完結する」感覚は最初は新鮮に感じるかもしれません。
つまずきやすいポイント：npm run devが動かない
バージョン不一致によるエラー
私が実際につまずいた経験として、古いNode.jsのバージョンのままnpm create vue@latestを実行し、npm run devの段階でよく分からないエラーに遭遇したことがあります。
❌ Before：Node.jsのバージョンを確認せずに進める
node -v
# v16.13.0（Viteの推奨バージョンより古い）
npm create vue@latest
npm install
npm run dev
# → Viteが依存するパッケージが正しく動かず、原因不明のエラーで止まる
古いバージョンのNode.jsだと、Viteや周辺パッケージが要求する機能が使えず、エラーメッセージだけを見ても原因が分かりにくいことがあります。
✅ After：先にNode.jsのバージョンを最新のLTSに揃えておく
node -v
# v20.11.0（LTS版に更新済み）
npm create vue@latest
npm install
npm run dev
# → 正常に開発サーバーが起動する
エラーの原因調査に時間を溶かす前に、まず「Node.jsのバージョンが古くないか」を確認する習慣をつけておくと、無駄なつまずきを大きく減らせます。
まとめ
この記事のポイント
- Vueの開発環境は、Node.jsをインストールした上で
npm create vue@latestを実行するだけで作れる - ビルドツールにはViteが公式推奨で、起動やホットリロードが高速
- TypeScriptは必ず
Yesを選び、Vue RouterとPiniaは後の記事で個別に扱う - コンポーネントは
.vueという拡張子の単一ファイルコンポーネント（SFC）で管理する npm run devでエラーが出たら、まずNode.jsのバージョンを疑ってみる
次に読むべき記事
環境が整ったところで、次は.vueファイルの中身、特に<template>部分の書き方を詳しく見ていきます。
Mustache構文とディレクティブという、Vueの基本中の基本を押さえていきましょう。
→ 次の記事：テンプレート構文の基本：Mustache構文とディレクティブ