DescubreApple

Apple, Mac, iPhone, iPad

OS X

Visual Studio Codeを使ってMacで本格的なWweb開発環境を設定する方法

Apple Silicon搭載のMacでVisual Studio Codeを作業できる状態にするためのステップバイステップガイドです。インストール、拡張機能、Zshとの連携、Homebrew、そしてReact、Vue、Node.js向けの実用的な設定を扱います。

JG
著者 · 読了時間 約9分AI生成画像
Cómo configurar Visual Studio Code en Mac para desarrollo web profesional
Como Configurar Visual Studio Code En Mac Para Desarrollo Web Profesional

MacでVisual Studio Codeを使ったWeb開発環境を構築するのは難しくありませんが、「インストールしてある」状態と「本格的に作業できるように設定してある」状態の差は数時間分の作業と、ほとんど誰も教えてくれない細かな調整にあります。このガイドでは、Apple Silicon搭載のMacmでVS Codeを実際のコーディングに使える状態にすることを目指します。流行の40個もの拡張機能ではなく、本当に役立つものだけを選び、ZshおよびHomebrewのターミナル連携を行い、React、Vue、Node.jsの実プロジェクトに耐える設定にしていきます。

所要時間の目安：まったくの初心者なら30〜45分です。macOS Sequoia 15.xおよびVentura 13.xに対応し、M1、M2、M3、M4チップのどのMacでも利用できます。

事前準備

VS Codeに触れる前に、Macの最低限の準備をしておきましょう。

  • macOS 13 Ventura以降。VS Codeは古いバージョンでも動きますが、最近の拡張機能の多くは13以上を必要とします。
  • Xcodeのコマンドラインツール。ターミナルで初めてgitを実行すると自動的にインストールされます。手動で行う場合はxcode-select --installを実行してください。
  • Homebrewのインストール。Node、Git、各種ユーティリティを管理するのに最もすっきりした方法です。手順はbrew.shをご覧ください。
  • GitHubアカウント（CopilotやSettings Syncを使う場合）。

推奨環境の概要：

コンポーネント 推奨バージョン（2026年）
macOS Sequoia 15.4以降
Visual Studio Code 1.95以降（Universal / Apple Silicon）
Node.js 22 LTS
Git 2.47以降
シェル Zsh（macOSの標準）
Homebrew 4.4以降

Apple Silicon用の正しいバージョンをダウンロードする

ここでよくある間違いがあります。code.visualstudio.comにアクセスして、Apple Silicon用のバイナリをダウンロードしてください。IntelやUniversal版ではありません。Universal版も動きますが、サイズが約2倍になり、M1、M2、M3、M4のMacであればメリットはありません。

チップを確認するには、Appleメニュー → このMacについて を開きます。「Apple M…」と表示されていればSilicon版です。

Homebrewを既に使っているなら、こちらの方法が便利です：

brew install --cask visual-studio-code

Homebrewがアーキテクチャを判別して正しいパッケージをダウンロードします。その後の更新もbrew upgrade --cask visual-studio-codeだけで済み、DMGを手動でダウンロードする必要がありません。

初回インストールと基本設定

（DMGを使った場合は）VS Codeをアプリケーションフォルダにドラッグして起動します。初回起動時には次のとおりに進めてください：

  1. インターネットからダウンロードしたアプリを開くことを許可します。
  2. テーマを選びます。Default Dark Modernが無難です。日中に長時間作業するならGitHub Light Defaultのほうが目が疲れにくいでしょう。

    3. §h125;設定の同期は今は飛ばして、後で行いましょう。

最初にやっておくとよいのは、ターミナルからcodeコマンドを使えるようにすることです。⌘ + Shift + Pでコマンドパレットを開き、「shell command」と入力してShell Command: Install ‘code’ command in PATHを選びます。これで任意のフォルダからcode .と入力すれば、そのプロジェクトがVS Codeで開きます。

ZshとターミナルのContinuation設定

macOSはCatalina以降、既定でZshを使っています。VS Codeはこれを自動的に検出しますが、統合ターミナルは細かく調整しておくとよいでしょう。

⌘ + ,で設定を開き、次の項目を探します：

  • terminal.integrated.defaultProfile.osx → zshに設定します。
  • terminal.integrated.fontSize → 14インチのRetinaディスプレイなら13または14にします。
  • terminal.integrated.fontFamily → Powerlevel10kを使うならMesloLGS NFにし、そうでなければシステムの既定のままにします。

Zshで快適な環境を作るには、Oh My Zshをインストールします：

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

さらに、よく使われる2つのプラグインzsh-autosuggestionsとzsh-syntax-highlightingを追加しましょう。Homebrewでインストールできます（brew install zsh-autosuggestions zsh-syntax-highlighting）。有効化するには~/.zshrcの末尾に2行追加します。正確なパスはお使いの環境に応じて各プラグインの公式ドキュメントを確認してください。

VS Codeの統合ターミナルを再起動（⌃ + `で開きます）すると、インテリジェントな補完が使えるようになります。

Node.jsをHomebrewでインストールする（公式インストーラーを使わない理由）

nodejs.orgから.pkgをダウンロードすることもできます。しかし、Node 22からNode 24に移行したい場合や、2つのプロジェクトで異なるバージョンを使い分けたい場合には、後で苦労することになります。

賢い選択はnvm（Node Version Manager）です：

brew install nvm
mkdir ~/.nvm

~/.zshrcに以下を追加します：

export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"

source ~/.zshrcで再読み込みすれば、nvm install 22、nvm use 22、nvm install 20などが使え、プロジェクトごとにバージョンを切り替えられます。VS Codeは統合ターミナルでこれを自動的に認識します。

Web開発に欠かせない拡張機能

ここでの落とし穴は「念のため」と20個もの拡張機能を入れてしまうことです。VS Codeが遅くなり、拡張機能同士が衝突することもあります。本当に価値のあるものは以下のとおりです：

どのWebプロジェクトにも必要な基本：

  • ESLint（Microsoft）— JS/TSのリンター。必須です。
  • Prettier – Code formatter— 自動整形。既定のフォーマッターとして設定しましょう。
  • EditorConfig for VS Code— 他人のプロジェクトにある.editorconfigを尊重します。
  • GitLens— エディタ内でGitの履歴を確認できます。無料版で十分です。

React / Next.js向け：

  • ES7+ React/Redux/React-Native snippets— スニペットで素早く入力できます（rafceなど）。
  • Simple React Snippetsのほうが軽量を好むならこちらもあります。

Vue向け：

  • Vue – Official（旧Volar）。インストールし、Veturがあれば無効にしてください。
  • TypeScript Vue Plugin (Volar)はTypeScriptを使う場合に入れてください。

Node.js向け：

  • REST Client— PostmanのようにVS Codeを離れずにエンドポイントを試せます。
  • DotENV— .envファイルの構文ハイライトに使います。

作業効率向上：

  • Path Intellisense— ファイルパスを補完します。
  • Error Lens— エラーを下線だけでなく行内に表示します。
  • Auto Rename Tag— HTML/JSXのタグをペアで同時に名前変更します。

「React Extension Pack」のような全部入りのパックは避けてください。使わない機能まで入り、起動が遅くなります。

効果の大きいsettings.jsonの設定

⌘ + Shift + Pでパレットを開き、「Preferences: Open User Settings (JSON)」を検索します。次の設定を追加・調整してください：

{
  "editor.fontSize": 14,
  "editor.fontFamily": "JetBrains Mono, Menlo, monospace",
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,
  "editor.linkedEditing": true,
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "workbench.startupEditor": "none",
  "terminal.integrated.fontSize": 13,
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

重要なポイント：formatOnSaveとPrettierの組み合わせでスタイルの議論がなくなります。linkedEditingはHTMLタグをペアで同時に変更します。また、ミニマップを無効にすると13インチのMacBook Airでも実際の作業スペースが広がります。

JetBrains Monoがない場合はbrew install --cask font-jetbrains-monoでインストールできます。Fira CodeやCascadia Codeもリガチャ対応で良い選択肢です。

GitとGitHub：すっきりした認証

グローバルなアイデンティティを設定します：

git config --global user.name "Your Name"
git config --global user.email "you@email.com"
git config --global init.defaultBranch main

GitHubとの認証には、Microsoft公式のGitHub Pull Requests and Issues拡張機能を使うのが現代的な方法です。最初のpush時にブラウザでOAuthフローが開き、認証情報はmacOSのキーチェーンに保存されます。手動でトークンを扱う必要も、~/.netrcを編集する必要もありません。

SSHを好む場合は、ssh-keygen -t ed25519 -C "you@email.com"で鍵を生成し、GitHubの Settings → SSH keys に公開鍵を登録してください。

GitHub Copilotとその代替

Copilotは個人利用で月額10ドル（2026年時点で為替によりおよそ9.50ユーロ）です。学生認証を受けた人や、人気のオープンソースプロジェクトのメンテナーは無料で利用できます。拡張機能としてインストールし、同じGitHubアカウントで認証します。

有力な代替手段：

  • Codeium— 個人利用は無料。Marketplaceの公式拡張機能です。
  • Continue— オープンソースで、自分のモデル（Claude、GPT-4、Ollama経由のローカルモデルなど）に接続できます。
  • Cursor— 拡張機能ではなく、VS Codeを完全にフォークしたエディタです。Copilotでは物足りない場合に試す価値があります。

フロントエンドのWeb開発では、インライン補完の完成度はまだCopilotが最も高いと言えます。Codeiumもかなり近く、しかも無料です。

複数のMacで設定を同期する

MacBook ProとMac miniの両方を使っているなら、Settings Syncを有効にしましょう。コマンドパレットで「Settings Sync: Turn On」を実行します。設定、拡張機能、キーバインド、スニペット、UIの状態を同期できます。データはMicrosoftアカウントまたはGitHubアカウントに保存されます。

アカウントを使いたくない場合の手動の方法は、settings.jsonと拡張機能の一覧をプライベートなGitHubリポジトリに保存することです。インストール済みの拡張機能は次のコマンドで一覧化できます：

code --list-extensions > extensions.txt

もう一方のMacでは、簡単なループでそれらを再インストールできます。

よくある問題

大きなプロジェクトを開くとVS Codeが遅くなる。node_modulesと.nextをインデックス作成から除外するため、settings.jsonに次のように設定します：

"files.watcherExclude": {
  "**/node_modules/**": true,
  "**/.next/**": true,
  "**/dist/**": true
}

ターミナルでcodeコマンドが動かない。「Shell Command: Install ‘code’ command in PATH」をもう一度実行してください。それでも動かない場合は、/usr/local/binが$PATHに含まれているか確認してください。

保存時にPrettierが整形しない。既定のフォーマッターとして設定されているか、また.prettierignoreでそのファイルが除外されていないかを確認してください。

ターミナルでnvmやnodeが見つからない。多くの場合、~/.zshrcが読み込まれていないことが原因です。統合ターミナルがBashではなくZshを使っているか確認してください。設定 → terminal.integrated.defaultProfile.osxで確認できます。

Copilotが何も提案しない。下部バーのアイコンで認証されているか、そしてそのファイルの言語が拡張機能の除外リストに入っていないかを確認してください。

MacでVS Codeの代替になるエディタ

VS Codeは最も使われていますが、Macで優れたエディタはほかにもあります。パフォーマンスが特に重要なら、ネイティブでRust製のZed（1秒以内に起動）をチェックしてみてください。JavaScript/TypeScriptの大規模な開発には、JetBrainsのWebStormがリファクタリングの面で依然として強力ですが、個人利用では初年度以降年額169ユーロかかります。

コンテナを多用するなら、Apple Silicon向けに適切に設定されたDocker Desktopと組み合わせるとよいでしょう。バッテリーを消耗しすぎないように設定できます。また、1日中コードを書くなら、MacBookのキーボードと外付けのメカニカルキーボードの違いは、1か月も使えば手首に表れるはずです。

よくある質問（FAQ）

8GBのMacBook Air M3でVS Codeは快適に動きますか？ はい、小〜中規模のプロジェクト（React、Vue、静的サイト）なら問題ありません。大規模なモノレポや、複数のDockerコンテナを同時に動かす場合は、16GBあると非常に助かります。

ChatGPTを使っているのにCopilotの料金を払う価値はありますか？ 状況によります。Copilotは入力中にインラインで提案を出しますが、ブラウザのChatGPTではそれができません。タブ間で頻繁にコードをコピー＆ペーストしているなら、Copilotで時間を節約できます。単発の質問をするだけなら不要でしょう。

iOSやネイティブMac開発にもVS Codeを使えますか？ 技術的にはSwift向けの拡張機能で可能ですが、ビルドと署名にはXcodeが依然として必要です。Appleのアプリを含まない純粋なSwiftなら、公式のSwift拡張機能を入れたVS Codeで問題なく作業できます。

VS Codeを完全にアンインストールするには？ アプリをゴミ箱に入れ、~/Library/Application Support/Codeと~/.vscodeを削除してください。Homebrewでインストールした場合はbrew uninstall --cask visual-studio-codeを実行した後、これらのフォルダを削除します。

VS Code Insidersは使う価値がありますか？ 毎日更新される試験版です。新機能を先に使いたい場合や、拡張機能を開発している場合には便利です。日常の作業には安定版を使い続けることをおすすめします。

JG

OS Xの他の記事

🇯🇵 JA