Skip to content
Code Blue プログラミング学習ノート
Javascript/Vue.js

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

2025年7月28日 /

前提条件の確認

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

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

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

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

  1. Node.js公式サイトにアクセス
  2. LTS（推奨版）をダウンロード（例: 18.x.x）
  3. インストーラーを実行
  • 「Add to PATH」オプションを必ずチェック
  • デフォルト設定で問題ありません

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

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

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

  1. VS Code公式サイトからダウンロード
  2. インストーラーを実行
  3. 推奨設定：
  • 「PATHに追加」にチェック
  • 「ファイルコンテキストメニューに追加」にチェック

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

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

VS Codeの設定

必須拡張機能

  1. Volar – Vue 3用の公式拡張機能
  2. ESLint – コード品質チェック
  3. Prettier – コードフォーマッター
  4. JavaScript (ES6) code snippets – 便利なスニペット
  5. Path Intellisense – ファイルパスの補完
  6. 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プロジェクトの作成

  1. プロジェクトを作成したいディレクトリに移動
  2. 以下のコマンドを実行：
vue create my-vue-app
  1. オプション選択：
  • 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のインストール（推奨）

  1. Git公式サイトからダウンロード
  2. インストール時に以下を選択：
  • 「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用ターミナルツール（任意）

環境設定の確認ポイント

  1. Node.jsバージョン: node -vで18.x以上を確認
  2. npmバージョン: npm -vで8.x以上を確認
  3. Vue CLIバージョン: vue --versionで5.x以上を確認
  4. ファイアウォール設定: 開発サーバーがブロックされていないか確認
  5. 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': '' }
      }
    }
  }
}

定期メンテナンス

  1. 依存関係の更新：
   npm outdated
   npm update
  1. 未使用依存関係の削除：
   npm prune
  1. キャッシュクリア：
   npm cache clean --force

Windowsでの開発のヒント

  1. WSL2の利用（任意）：
  • Microsoft Storeから「Ubuntu」をインストール
  • WSL2上でNode.js環境を構築することも可能
  1. PowerShellプロファイルのカスタマイズ：
   notepad $PROFILE

以下を追加：

   function vue-serve { npm run serve }
   function vue-dev { npm run dev }
  1. ファイル監視制限の解除：
   echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

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