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

2025-07-28

前提条件の確認

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

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

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

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

HomebrewはMac用のパッケージマネージャーで、開発ツールのインストールを簡単に行えます。

/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

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

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

3. Vue CLIのインストール

Vue.jsプロジェクトのスキャフォールディングツールです。

npm install -g @vue/cli

インストール確認：

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

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

vue create my-vue-app

オプション選択：

  • Vue 3を選択（2023年現在の最新安定版）
  • 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）でアプリケーションにアクセスできます。

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

1. Vue DevTools

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

2. テスト関連ツール

npm install -D jest @vue/test-utils @testing-library/vue
# または
npm install -D vitest happy-dom @vue/test-utils

3. よく使うライブラリ

npm install axios pinia vue-router

環境設定の確認ポイント

  1. Node.jsバージョン: node -vで18.x以上を確認
  2. npmバージョン: npm -vで8.x以上を確認
  3. Vue CLIバージョン: vue --versionで5.x以上を確認
  4. ポート競合: 他のアプリで8080や5173ポートを使用していないか確認
  5. ファイアウォール: 開発サーバーがブロックされていないか確認

トラブルシューティング

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

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

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

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

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

Rosetta 2経由で実行：

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

プロジェクト構成の確認

標準的な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

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

同じカテゴリーの記事