🎯 この記事はこんな人向けです
- 初めて Vue.js（Vue3）をプロジェクトに導入するエンジニア
- Vue3で「最初にやっておくべき初期設定」を知りたい人
⚙️ 1. 事前準備（必要なツール）
プロジェクトを作成する前に、開発環境を整えます。
- Node.js
- エディタ: VS Code
- VS Code 拡張機能: 「Vue - Official」（※旧 Volar / 過去の Vetur は非推奨なので無効化してください）
💻 OS別の補足・環境構築のアドバイス
OSによって使うターミナルや Node.js のセットアップ方法が少し異なります。ご自身の環境に合わせて準備してください。
| OS | 推奨ターミナル | Node.jsのインストールおすすめ | 注意点 |
|---|---|---|---|
| macOS | ターミナル |
fnm や nvm（バージョン管理ツール）経由、または公式サイトの .pkg
|
パスを通す設定で迷ったら公式サイトのインストーラーが確実です。 |
| Windows | PowerShell |
fnm / nvm-windows または公式サイトの .msi
|
標準コマンドプロンプト（cmd）は非推奨です。文字化けや権限エラーが起きやすいため、PowerShellを使いましょう。 |
| Linux (Ubuntu等) | デフォルトのターミナル |
nvm または fnm
|
apt 経由だとNode.jsのバージョンが古いことがあるため、バージョン管理ツールの使用を推奨します。 |
💡 Windowsユーザー向けワンポイント
WindowsでPowerShell起動時に実行権限のエラー（PSSecurityExceptionなど）が出た場合は、現在のセッションのみ一時的に許可を出す以下のコマンドを実行してください（システム全体の設定を変更しないため安全です）。Set-ExecutionPolicy -Scope Process -ExecutionPolicy RemoteSigned
🚀 2. プロジェクトの作成（Vite + Vue3）
ターミナル（コマンドプロンプト）を開き、プロジェクトを作成したいディレクトリで以下のコマンドを実行します。
npm create vue@latest
コマンドを実行すると、対話形式でプロジェクトの設定を聞かれます。基本的には以下のように設定するのがおすすめです。
✔ Project name: … my-vue-app （任意のプロジェクト名）
✔ Add TypeScript? … Yes （型安全な開発のため推奨）
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes/No （ページ遷移が必要ならYes）
✔ Add Pinia for state management? … Yes/No （大規模な状態管理が必要ならYes）
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? … No
✔ Add ESLint for code quality? … Yes （コード品質維持のため推奨）
✔ Add Prettier for code formatting? … Yes （自動フォーマットのため推奨）
アプリの起動
質問が終わるとフォルダが作成されるので、以下のコマンドで依存ライブラリをインストールしてローカルサーバーを起動します。
cd my-vue-app
npm install
npm run dev
ターミナルに表示された URL（例: http://localhost:5173/）にブラウザでアクセスし、Vue のウェルカム画面が表示されれば導入成功です！
📁 3. ディレクトリ構造の解説
生成された主要なファイル・フォルダの役割は以下の通りです。
my-vue-app/
├── src/
│ ├── assets/ # 画像やグローバルCSSなどの静的ファイル
│ ├── components/ # 再利用するUIパーツ（コンポーネント）
│ ├── App.vue # アプリのルート（親）コンポーネント
│ └── main.ts # アプリのエントリーポイント（Vueの起動処理）
├── index.html # アプリが描画されるHTMLの土台
├── vite.config.ts # Viteの設定ファイル
└── package.json # 依存ライブラリやスクリプト定義
📝 4. 最初のコンポーネントを書いてみよう
src/App.vue の内容を消して、Vue 3 の標準的な書き方である Composition API（<script setup>） で簡単なカウンターを作ってみます。
<template>
<main class="container">
<h1>{{ title }}</h1>
<p class="count-display">現在のカウント: <strong>{{ count }}</strong></p>
<div class="button-group">
<button @click="increment">+1 増やす</button>
<button @click="reset" class="secondary">リセット</button>
</div>
</main>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// 1. 表示用のテキスト（型推論される）
const title = ref('Vue3へようこそ！')
// 2. リアクティブな数値データの定義
const count = ref<number>(0)
// 3. イベントハンドラー
const increment = () => {
count.value++ // script内では .value を使ってアクセス
}
const reset = () => {
count.value = 0
}
</script>
<style scoped>
/* scoped を付けると、このコンポーネント内だけにスタイルが適用される */
.container {
max-width: 400px;
margin: 50px auto;
text-align: center;
font-family: sans-serif;
}
.count-display {
font-size: 1.2rem;
}
.button-group {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 20px;
}
button {
padding: 8px 16px;
font-size: 1rem;
cursor: pointer;
border-radius: 4px;
border: none;
background-color: #42b883;
color: white;
}
button.secondary {
background-color: #666;
}
</style>
🚨 初心がハマりがちな「2つのポイント」
① .value の書き忘れ（Script側）
ref() で定義した変数を JavaScript/TypeScript 側で書き換えるときは、必ず .value を付ける必要があります。
- ❌
count++ - ⭕
count.value++
(※ <template> タグ内では .value は自動で解除されるため不要です)
② <style scoped> の活用
<style> タグに scoped 属性を付け忘れると、CSSがアプリ全体（他コンポーネント）に及んでしまいデザイン崩れの原因になります。特別な理由がない限り scoped を付与しましょう。
🚀 まとめ
- Vue3の開発環境は
npm create vue@latestで一発構築 - エディタは VS Code + 「Vue - Official」 が必須
- 基本スタイルは
<script setup lang="ts">＋ref()を使えば間違いなし！
Vue3は学習コストが低く、Viteのおかげでビルド速度も爆速です。ぜひ快適なVue3開発を楽しんでください！