かんきょうを つくろう🛠️
ここまでブラウザだけでHTML・CSS・JSを書いてきたね。ここからは、じぶんのMacの中でも同じことができるように道具をそろえていくよ。プロのエンジニアも実際に毎日使っている定番ツールだよ。ターミナルにコマンドをコピペしていくだけでOK！
🖥️ その前に：ターミナルってなに？
「ターミナル」は、文字だけでMacに指示を出せるアプリだよ。Command + SpaceでSpotlight検索を開いて「ターミナル」と打てば起動できるよ。この先出てくる$で始まるコードは、ぜんぶこのターミナルに貼り付けてEnterキーを押してね（$マーク自体は打たなくてOK、コピーボタンを押せば自動で除かれるよ）。
🧭 ターミナルの基本操作
道具を入れる前に、ターミナルでの「フォルダの移動」だけ覚えておこう。この4つだけでじゅうぶん。
pwd | 今じぶんがどこのフォルダにいるか表示する（print working directory） |
ls | 今いるフォルダの中身を一覧表示する（list） |
cd フォルダ名 | 指定したフォルダに移動する（change directory） |
mkdir フォルダ名 | 新しいフォルダを作る（make directory） |
試しに、デスクトップに新しいフォルダを作って移動してみよう。
$ pwd 今の場所を確認（例: /Users/あなたの名前） $ cd ~/Desktop デスクトップに移動（ ~ はホームフォルダを表す記号） $ mkdir my-first-project my-first-projectという名前のフォルダを作る $ cd my-first-project 作ったフォルダに移動 $ ls 中身は空っぽのはず（何も表示されなければOK）
cd ..で1つ上のフォルダに戻れるよ（..は「親フォルダ」を表す記号）。道に迷ったら、まずpwdで今の場所を確認する癖をつけよう。
上から順番に、ひとつずつ進めていこう。
Homebrewを入れる
Homebrewは、Mac用のいろんな開発ツールを「宅配便」みたいに届けてインストールしてくれる、パッケージ管理ツールだよ。これから入れるpnpmやgitも、Homebrewを使うと一発で入れられる。
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
インストールが終わったら、画面に出てくる案内にしたがって、Homebrewを使えるようにするコマンドも実行しよう（Apple Siliconの場合）。
$ echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile $ eval "$(/opt/homebrew/bin/brew shellenv)"
確認してみよう：
$ brew --version Homebrew 6.0.12-83-g590c6e2 ←こんな感じでバージョンが出ればOK！
pnpmを入れる
pnpmは、npmやyarnと同じ「JavaScriptのパッケージ管理ツール」の仲間。ディスク容量を節約しながら、爆速でパッケージをインストールできるのが特徴で、最近のモダンなプロジェクトでよく使われているよ。
$ brew install pnpm
$ pnpm --version 11.12.0 ←こんな感じで数字が出ればOK！
Node.jsを準備する
Node.jsは「ブラウザの外でJavaScriptを動かすためのエンジン」。この後使うViteというツールも、Node.jsの上で動いているよ。実はpnpm自身にNode.jsのバージョンを管理する機能があるので、それを使って入れよう。
$ pnpm runtime set node lts -g
pnpm env use --global ltsという古い書き方をネットで見かけることがあるけど、pnpmのバージョンアップでpnpm runtimeコマンドに変わったよ（このサイトは2026年7月時点の最新情報で書いてるよ）。
$ node --version v24.17.0 ←こんな感じで数字が出ればOK！
gitを入れて、名前を設定する
gitは「作業の変更履歴をセーブしていくツール」（くわしくはGit & GitHubのページで説明するよ）。まずは入れて、自分の名前とメールアドレスを設定しておこう。
$ brew install git $ git config --global user.name "あなたの名前" $ git config --global user.email "あなたのメールアドレス"
"あなたの名前"の部分は、実際に自分のニックネームやメールアドレスに書きかえてから実行してね。GitHubに登録するメールアドレスと合わせておくと後で楽だよ。
$ git --version git version 2.55.0 ←こんな感じで数字が出ればOK！
GitHub CLI（gh）を入れる
ghは、ブラウザを開かなくてもターミナルからGitHubを操作できる公式ツール。Pull Requestを作ったり、リポジトリを作ったりが全部コマンドでできるようになるよ。
$ brew install gh $ gh auth login
gh auth loginを実行すると、いくつか質問されるよ。迷ったら次を選べばOK：
GitHub.com → HTTPS → Yで認証情報を保存 → ブラウザでログイン（Login with a web browser）。表示されたコードをコピーして、開いたブラウザに貼り付ければ完了。
$ gh --version gh version 2.96.0 ←こんな感じで数字が出ればOK！
VS Codeを入れる
VS Codeは、いま世界でいちばん使われているコードエディタ。Homebrewで入れちゃおう。
$ brew install --cask visual-studio-code
VS Codeを開いたら、コマンドパレット（Command + Shift + P）から「Shell Command: Install 'code' command in PATH」を実行しておくと、ターミナルからcode .と打つだけでそのフォルダをVS Codeで開けるようになって便利だよ。
ぜんぶ確認しよう
最後に、ここまで入れたものが全部使える状態か、まとめてチェック。
$ brew --version && pnpm --version && node --version && git --version && gh --version
5行ぶん、それぞれのバージョン番号がずらっと表示されたら、かんきょう準備は完了🎉