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

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

2025年7月28日 /

はじめに

Vue.jsは、シンプルな構文と高い拡張性を兼ね備えた人気のJavaScriptフレームワークです。本記事では、Windows 11環境でVue.jsの開発を始めるために必要な準備を、初めての方にも分かりやすく解説します。

Node.jsのインストールから開発環境の構築、プロジェクトの作成、開発サーバーの起動までを順番に紹介するため、環境構築でつまずくことなくVue.js開発をスタートできるようになります。

前提条件の確認

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

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

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

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

Vue.jsの開発に必要なNode.jsを公式サイトからダウンロードし、LTS（長期サポート版）をインストールします。インストール時は「Add to PATH」にチェックを入れ、インストールさせます。完了後にnode -vとnpm -vで正しくインストールされたことを確認します。

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

インストール後、コマンドプロンプトで確認します。

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

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

VS Codeをインストールし、開発環境を準備します。インストール時は「PATHに追加」と「ファイルコンテキストメニューに追加」にチェックを入れることで、より便利に利用できます。

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

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

Microsoft StoreからWindows Terminalをインストールすると、コマンドライン操作を快適に行えます。既定のターミナルに設定しておくと、開発作業をスムーズに進められます。

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

VS Codeの設定

必須拡張機能

Vue.js開発では、VolarによるVue 3のサポートに加え、ESLintでコード品質をチェックし、Prettierでコードを自動整形できます。また、JavaScriptのスニペットやファイルパス、npmモジュールの補完機能を追加することで、効率よく開発を進められます。

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

推奨設定（settings.json）

settings.jsonでは、インデント幅や保存時の自動整形、自動保存などを設定できます。また、Vue 3ではVolarを利用するため、Veturのテンプレート検証を無効化し、Vueファイルの既定フォーマッターをVolarに設定することで、快適な開発環境を構築できます。

{
  "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プロジェクトの作成

プロジェクトを作成したいディレクトリに移動して以下のコマンドを実行してプロジェクトを作成します。例としてmy-vue-appというプロジェクト名です。

vue create my-vue-app

セットアップでは、複数の選択肢があります。Vue 3を選択し、必要に応じてTypeScriptを有効にします。学習段階であればJavaScriptでも問題ありません。

また、ルーティング機能を提供するRouterや状態管理ライブラリのPinia、コード品質を保つためのESLintとPrettierを追加することで、実践的な開発環境を構築できます。

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

Viteを利用すると、軽量かつ高速なVue.jsプロジェクトを作成できます。npm create vite@latestでVueテンプレートを指定してプロジェクトを作成し、作成したディレクトリへ移動した後、npm installを実行して必要なパッケージをインストールします。これで、Viteを利用した開発環境の準備が完了します。

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

プロジェクト構成の確認

標準的な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       # プロジェクト説明

開発サーバーの起動

プロジェクトディレクトリへ移動した後、Vue CLIを使用している場合はnpm run serve、Viteを使用している場合はnpm run devを実行して開発サーバーを起動します。

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

起動が完了すると、Vue CLIではhttp://localhost:8080、Viteではhttp://localhost:5173にアクセスすることで、アプリケーションの動作をブラウザで確認できます。

Windows特有の設定

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

PowerShellでスクリプトの実行が制限されている場合は、実行ポリシーを変更することで開発ツールを正常に利用できるようになります。

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

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

Gitをインストールすると、ソースコードのバージョン管理が行えます。インストール時は、コマンドラインで利用できる設定や、Visual Studio Codeを既定のエディターとして使用する設定を選択するのがおすすめです。インストール時に以下を選択して実施します。

  • 「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」

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

Windowsではファイルパスの長さが制限される場合があります。長いパスを有効にする設定を行うことで、プロジェクトのディレクトリ構造が深くなってもエラーが発生しにくくなります。管理者権限でPowerShellを開き対応します。

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

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

Vue DevTools

Vue DevToolsは、Vueアプリケーション専用のブラウザ拡張機能です。コンポーネントの状態やデータの流れを確認できるため、デバッグや動作確認を効率的に行えます。

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

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

Windows TerminalやGit Bashを利用すると、コマンドライン操作がより快適になります。開発環境に応じて使いやすいターミナルを選択しましょう。

環境設定の確認ポイント

開発を始める前に、Node.jsやnpm、Vue CLIのバージョンが要件を満たしていることを確認します。また、開発サーバーがファイアウォールでブロックされていないか、PATHが正しく設定されていてコマンドをどこからでも実行できるかも確認しておきましょう。

トラブルシューティング

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

権限不足によるエラーが発生した場合は、PowerShellを管理者権限で起動し、npm-windows-upgradeを利用してnpmを更新すると解決できることがあります。管理者権限でPowerShellを開き対応します。

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

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

Vue CLIのインストールに失敗する場合は、既存のVue CLIをアンインストールし、npmキャッシュを削除した後、再度インストールすることで改善する場合があります。

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

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

ウイルス対策ソフトが開発ツールの動作を妨げることがあります。その場合は、開発ディレクトリを除外リストへ追加するか、一時的に保護機能を無効化して動作を確認します。

まとめ

本記事では、Windows 11でVue.jsの開発を始めるための環境構築から、開発を快適に進めるための設定までを紹介しました。ホットリロードや環境変数、API連携時のプロキシ設定を活用することで、効率的な開発環境を構築できます。

また、依存関係の更新やキャッシュの整理など、定期的なメンテナンスを行うことで環境を安定した状態に保てます。さらに、必要に応じてWSL2やPowerShellのカスタマイズを取り入れることで、より快適な開発環境を実現できます。ここまで準備が整えば、Windows 11でVue.jsアプリケーションの開発をスムーズに始められるでしょう。