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

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

2025年7月28日 /

はじめに

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

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

前提条件の確認

まず、MacBookがVue.js開発に対応しているか確認しましょう。

  • OSバージョン: macOS 10.15 Catalina以降を推奨
  • ストレージ: 空き容量が10GB以上（開発ツールや依存関係用）
  • メモリ: 8GB以上（16GB推奨）

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

Homebrewのインストール（パッケージマネージャー）

Homebrewは、macOSでさまざまなソフトウェアを簡単にインストール・管理できるパッケージマネージャーです。インストール後はPATHを設定することで、brewコマンドをターミナルから利用できるようになります。Homebrewから、開発ツールのインストールを簡単に行えます。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

インストール後、PATHを通します（M1/M2 Macの場合）

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zshrc
source ~/.zshrc

Node.jsとnpmのインストール

Vue.jsの開発にはNode.jsとnpmが必要です。Homebrewを利用してLTS（長期サポート）版をインストールし、node -vとnpm -vで正しく導入されていることを確認します。また、複数のNode.jsバージョンを切り替えたい場合は、nvmを利用すると便利です。推奨としてVue.jsはNode.js環境で動作します。LTS（長期サポート）版をインストールしましょう。

brew install node

インストール確認は次のコマンドを実行して確認します。

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

代替案：Nodeのバージョン管理ツールを利用する場合は次の通りです。

brew install nvm
mkdir ~/.nvm
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
echo '[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"' >> ~/.zshrc
source ~/.zshrc
nvm install --lts
nvm use --lts

Vue CLIのインストール

Vue CLIは、Vue.jsプロジェクトを簡単に作成できるスキャフォールディングツール（公式ツール）です。npm install -g @vue/cliでインストールし、vue –versionを実行して正しく導入されていることを確認しましょう。コマンドでインストール可能です。

npm install -g @vue/cli

インストール後の確認もコマンドで可能です。

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

VS Codeの設定

必須拡張機能

Vue.jsを快適に開発するために、VS Codeへ必要な拡張機能を導入しましょう。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プロジェクトの作成

新しい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にアクセスすることで、アプリケーションの動作をブラウザで確認できます。

トラブルシューティング

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

npmのインストール時に権限エラーが発生する場合は、~/.npmやグローバルモジュールのディレクトリの所有者を現在のユーザーへ変更します。これにより、管理者権限を使わずにパッケージをインストールできるようになる場合があります。

sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

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

Vue CLIのインストールに失敗する場合は、既存のVue CLIをアンインストールし、npmのキャッシュを削除した後、再度インストールを実行します。これにより、破損したキャッシュや古い設定が原因の問題を解消できることがあります。

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

M1/M2 Macで問題が発生した場合

Appleシリコン搭載Macで互換性の問題が発生する場合は、Rosetta 2を利用してIntel環境としてターミナルを起動し、インストールを実行します。Intel向けのパッケージしか対応していない場合でも、正常にセットアップできる可能性があります。

arch -x86_64 zsh
# その後、再度インストールコマンドを実行

まとめ

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

また、依存関係の更新やキャッシュの整理など、定期的なメンテナンスを行うことで環境を安定した状態に保てます。ここまで準備が整えば、macOSでVue.jsアプリケーションの開発をスムーズに始められるでしょう。