Skip to Content
ドキュメントはじめに環境構築Mac

環境構築（Mac）

このページで学ぶこと

  • 開発に必要なツールをMacにインストールできる
  • ターミナルを使った基本操作ができる
  • Node.jsをnvmで管理する理由がわかる

インストールするもの一覧

ツール用途
HomebrewMacのパッケージ管理ツール
VS Codeコードエディタ
Gitバージョン管理（macOSに標準搭載だが更新する）
nvmNode.jsのバージョン管理ツール
Node.jsJavaScriptの実行環境

やってみよう

ステップ1: ターミナルを開く

Command + スペース で Spotlight を開き、「ターミナル」と検索して起動する。
以降の手順はすべてターミナルで実行する。

ステップ2: Homebrew をインストールする

Homebrew は Mac のパッケージ管理ツールで、様々なソフトウェアを簡単にインストールできる。

以下のコマンドをターミナルに貼り付けて実行する。

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

途中でパスワードを求められたら、Mac のログインパスワードを入力する（入力中は何も表示されないが正常）。

インストール完了後、ターミナルの指示に従って PATH の設定をする。
以下のような表示が出たら、表示されたコマンドをそのまま実行する。

==> Next steps:
- Run these commands in your terminal to add Homebrew to your PATH:
    echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"
plaintext

M1/M2/M3 Mac（Apple Silicon）と Intel Mac で PATH が異なります。
表示されたコマンドをそのままコピーして実行してください。

確認する。

brew --version
bash

Homebrew 4.x.x のように表示されれば成功。

ステップ3: VS Code をインストールする

brew install --cask visual-studio-code
bash

インストール後、VS Code を起動して画面が表示されればOK。

日本語化する

VS Code 上で Command + Shift + X を押して拡張機能タブを開き、Japanese Language Pack を検索してインストールする。
インストール後、右下に「Restart」ボタンが出るので押すと日本語になる。

code コマンドを使えるようにする

VS Code 上で Command + Shift + P を押してコマンドパレットを開き、
Shell Command: Install 'code' command in PATH を検索して実行する。

確認する。

code --version
bash

バージョンが表示されればOK。

ステップ4: Git をインストールする

macOS には Git が標準搭載されているが、古い場合があるので Homebrew で最新版を入れる。

brew install git
bash

確認する。

git --version
bash

git version 2.xx.x のように表示されれば成功。

ステップ5: nvm をインストールする

なぜ nvm を使うのか？
Node.js は直接インストールもできますが、プロジェクトごとにバージョンが違うことがよくあります。
nvm を使うと、バージョンを簡単に切り替えられます。将来プロジェクトに参加するときに役立ちます。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
bash

インストール後、ターミナルを一度閉じて再度開く。

確認する。

nvm --version
bash

バージョン番号が表示されれば成功。

表示されない場合
以下をターミナルで実行して、設定ファイルに nvm の読み込みを追加する。

echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.zshrc
source ~/.zshrc
bash

ステップ6: Node.js をインストールする

nvm を使って Node.js をインストールする。

nvm install 22
nvm use 22
bash

確認する。

node --version
npm --version
bash

v22.xx.x のように表示されれば成功。

ステップ7: VS Code でターミナルを開く

VS Code を開き、Control + @（または Command + J）でターミナルを開く。
以下を実行して、VS Code 内でも Node.js が使えることを確認する。

node --version
bash

同じバージョンが表示されればOK。

確認しよう

  • brew --version でバージョンが表示される
  • git --version でバージョンが表示される
  • nvm --version でバージョンが表示される
  • node --version で v22.xx.x が表示される
  • npm --version でバージョンが表示される
  • VS Code のターミナルでも node --version が動く

よくあるエラー

brew: command not found
→ Homebrew インストール後の PATH 設定が済んでいない。
　ターミナルを閉じて再度開き、もう一度 brew --version を試す。
　それでも出る場合は、インストール時に表示された PATH 設定コマンドを再実行する。

nvm: command not found
→ ターミナルを一度閉じて再度開く。それでも出る場合は上記の .zshrc への追記を試す。

node --version が古いバージョンを返す
→ nvm 以外でインストールした Node.js が残っている可能性がある。
　which node を実行して、/Users/xxx/.nvm/... のパスが返ってくるか確認する。
　返ってこない場合は nvm use 22 を再実行する。

AIに聞いてみよう

プロンプト例:
「Mac で nvm をインストールしたのに nvm コマンドが認識されません。原因と対処法を教えてください」

エラーメッセージが出たら、そのまま AI に貼り付けて聞いてみましょう。

次のステップ

→ とんペディアへようこそ
→ AIとの付き合い方

Last updated on
WindowsAIとの付き合い方