Windows 11でVue.js開発を始めるための完全ガイド

2025-07-28

前提条件の確認

Windows 11でVue.js開発を始める前に、以下の条件を満たしていることを確認してください。

OSバージョン: Windows 11 21H2以降（推奨）
ストレージ: 空き容量10GB以上（開発ツールや依存関係用）
メモリ: 8GB以上（16GB推奨）
アーキテクチャ: 64-bit版OS
管理者権限: ソフトウェアインストールに必要な管理者権限

必要なツールのインストール

1. Node.jsのインストール

Node.js公式サイトにアクセス
LTS（推奨版）をダウンロード（例: 18.x.x）
インストーラーを実行

「Add to PATH」オプションを必ずチェック
デフォルト設定で問題ありません

インストール後、コマンドプロンプトで確認：

node -v  # v18.x.x など
npm -v   # 9.x.x など

2. Visual Studio Codeのインストール

VS Code公式サイトからダウンロード
インストーラーを実行
推奨設定：

「PATHに追加」にチェック
「ファイルコンテキストメニューに追加」にチェック

3. Windows Terminalのインストール（推奨）

Microsoft Storeから「Windows Terminal」を検索
インストールして既定のターミナルに設定

VS Codeの設定

必須拡張機能

Volar – Vue 3用の公式拡張機能
ESLint – コード品質チェック
Prettier – コードフォーマッター
JavaScript (ES6) code snippets – 便利なスニペット
Path Intellisense – ファイルパスの補完
npm Intellisense – npmモジュールの補完

推奨設定（settings.json）

{
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "files.autoSave": "onFocusChange",
  "vetur.validation.template": false, // Volar使用時は無効化
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  }
}

Vue CLIのインストール

管理者権限でPowerShellまたはコマンドプロンプトを開き、以下を実行：

npm install -g @vue/cli

インストール確認：

vue --version  # @vue/cli 5.x.x など

プロジェクトの作成

新しいVueプロジェクトの作成

プロジェクトを作成したいディレクトリに移動
以下のコマンドを実行：

vue create my-vue-app

オプション選択：

Vue 3を選択
TypeScriptを使用するかどうか（学習中はJavaScriptでも可）
RouterとPinia（Vuexの後継）を追加
ESLint + Prettierを選択

またはViteを使用する場合（より軽量）

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install

開発サーバーの起動

cd my-vue-app
npm run serve  # Vue CLIの場合
# または
npm run dev    # Viteの場合

正常に起動すると、http://localhost:8080（Vue CLI）またはhttp://localhost:5173（Vite）でアプリケーションにアクセスできます。

Windows特有の設定

1. 実行ポリシーの変更（必要な場合）

PowerShellでスクリプト実行がブロックされる場合：

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

2. Gitのインストール（推奨）

Git公式サイトからダウンロード
インストール時に以下を選択：

「Git from the command line and also from 3rd-party software」
「Use Visual Studio Code as Git’s default editor」
「Checkout Windows-style, commit Unix-style line endings」

3. 長いパス問題の解決（必要な場合）

管理者権限でPowerShellを開き：

New-ItemProperty -Path "HKLM:\SYSTEM\CurrentControlSet\Control\FileSystem" `
-Name "LongPathsEnabled" -Value 1 -PropertyType DWORD -Force

追加でインストールすると便利なツール

1. Vue DevTools

ブラウザ拡張機能で、Vueアプリのデバッグに役立ちます。

2. Windows用ターミナルツール（任意）

環境設定の確認ポイント

Node.jsバージョン: node -vで18.x以上を確認
npmバージョン: npm -vで8.x以上を確認
Vue CLIバージョン: vue --versionで5.x以上を確認
ファイアウォール設定: 開発サーバーがブロックされていないか確認
PATH設定: コマンドがどの場所からでも実行できるか確認

トラブルシューティング

1. パーミッションエラーが発生した場合

管理者権限でPowerShellを開き：

npm install -g npm-windows-upgrade
npm-windows-upgrade

2. Vue CLIがインストールされない場合

npm uninstall -g @vue/cli
npm cache clean --force
npm install -g @vue/cli

3. ウイルス対策ソフトがブロックする場合

開発ディレクトリを除外リストに追加するか、一時的に無効化

プロジェクト構成の確認

標準的なVue.jsプロジェクトの構成：

my-vue-app/
├── node_modules/   # 依存関係
├── public/         # 静的ファイル
├── src/            # メインソースコード
│   ├── assets/     # 画像などのアセット
│   ├── components/ # Vueコンポーネント
│   ├── router/     # ルーティング設定
│   ├── stores/     # Piniaストア
│   ├── views/      # ページコンポーネント
│   ├── App.vue     # ルートコンポーネント
│   └── main.js     # エントリーファイル
├── .eslintrc.js    # ESLint設定
├── .gitignore      # Git無視設定
├── package.json    # プロジェクト設定
└── README.md       # プロジェクト説明

開発ワークフローの最適化

1. ホットリロードの確認

ファイルを保存すると自動的にブラウザが更新されることを確認

2. 環境変数の設定

.envファイルを作成：

VUE_APP_API_URL=https://api.example.com

使用時：

const apiUrl = process.env.VUE_APP_API_URL;

3. プロキシ設定（API連携時）

vue.config.jsを作成：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

定期メンテナンス

依存関係の更新：

   npm outdated
   npm update

未使用依存関係の削除：

   npm prune

キャッシュクリア：

   npm cache clean --force

Windowsでの開発のヒント

WSL2の利用（任意）：

Microsoft Storeから「Ubuntu」をインストール
WSL2上でNode.js環境を構築することも可能

PowerShellプロファイルのカスタマイズ：

   notepad $PROFILE

以下を追加：

   function vue-serve { npm run serve }
   function vue-dev { npm run dev }

ファイル監視制限の解除：

   echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

これで、Windows 11上でVue.js開発を始める準備が整いました。最初のプロジェクトを作成し、Vue.jsの開発を楽しんでください！

同じカテゴリーの記事