🔰基礎技術

Web開発ツールのインストール完全ガイド｜Mac/Windows対応手順書

2026年1月14日

前回の記事で、Webアプリ開発に必要な「4つの神器（道具）」の役割について解説しました。
今回は、それらを実際にあなたのパソコンにインストールしていきます。

「黒い画面を使うの？」「設定難しそう」と身構える必要はありません。
基本的には「公式サイトからダウンロードして、次へと完了を押すだけ」です。

今回はMacの画面を基準に説明しますが、Windowsの方も手順はほぼ同じです。
Windows特有の違いがある部分には、しっかりと注釈を入れていますので安心してください。

事前準備：ターミナル（PowerShell）の場所を確認しよう

インストールが成功したかどうかを確認するために、PCに最初から入っているターミナル（PowerShell）を使います。
今のうちに場所を確認して、開いておきましょう。

💻 ターミナル（PowerShell）の開き方

  • Macの方：
    「command + スペースキー」を押してSpotlight検索を開き、「ターミナル」と入力してEnter。
    （または アプリケーション > ユーティリティ > ターミナル.app）
  • Windowsの方：
    スタートメニューの検索バーに「powershell」と入力し、「Windows PowerShell」を開く。

黒（または青/白）の画面が出て、文字が入力できる状態になればOKです。
この画面は後で「ちゃんと入ったかな？」の確認に使います。

STEP 1. 展示場：Google Chrome のインストール

まずは一番簡単なブラウザからいきましょう。
既に使っている人は、このステップは飛ばしてOKです。

  1. 公式サイトへアクセス：
    SafariやEdgeで「Google Chrome」と検索し、ダウンロードページへ行きます。
  2. ダウンロード＆インストール：
    「Chromeをダウンロード」ボタンをクリック。
    Mac： googlechrome.dmg を開き、Chromeアイコンを「アプリケーション」フォルダにドラッグ＆ドロップします。
    Windows： インストーラーを実行して、画面の指示に従ってインストールします。

STEP 2. 作業台：VSCode のインストール

次は、プログラミングの主役となる「コードエディタ」です。

  1. 公式サイトへアクセス：
    https://code.visualstudio.com/ にアクセスします。
  2. ダウンロード：
    トップページにある青いボタン「Download for Mac」（Windowsの方は「for Windows」）をクリックします。
  3. インストール：
    Mac： ダウンロードしたZipファイルを解凍し、出てきた「Visual Studio Code.app」を「アプリケーション」フォルダに移動させます。
    Windows： インストーラーを実行し、「次へ」を押して完了させます。
  4. 日本語化（初回設定）：
    VSCodeを起動し、左側のブロックのアイコン（Extensions）をクリック。
    検索バーに「Japanese」と入力し、「Japanese Language Pack...」の「Install」ボタンを押します。
    右下に「Restart（再起動）」が出たらクリックして完了です。

STEP 3. バッテリー：Node.js のインストール

ここが一番の難所に見えますが、実は簡単です。
「推奨版（LTS）」を選ぶことだけ間違えないでください。

  1. 公式サイトへアクセス：
    https://nodejs.org/ にアクセスします。
  2. 「LTS」版をダウンロード（重要！）：
    画面にボタンが2つありますが、必ず左側の「LTS（推奨版）」を選んでください。
    ※「Current（最新版）」は実験的な機能が含まれており、動作が不安定になることがあります。
  3. インストール：
    ダウンロードしたインストーラー（Macは.pkg、Windowsは.msi）を開きます。
    基本的には設定を変えず、「続ける」「同意する」「インストール」を連打していけばOKです。

✅ ちゃんと入ったか確認しよう

ここで最初に開いておいた「ターミナル（またはPowerShell）」を使います。
以下のコマンド（半角英数字）を入力して、Enterキーを押してください。

node -v

画面に v22.xx.x のような数字が表示されれば大成功です！
もし「command not found」や「用語として認識されていません」と出た場合は、一度ターミナルを閉じて、もう一度開き直してから試してみてください。

STEP 4. セーブ機能：Git のインストール

最後は「タイムマシン機能」であるGitです。
ここはMacとWindowsで少し手順が違います。

🍎 Macの方

実はMacには、標準でGitの導入プログラムが用意されています。

  1. ターミナルで以下のコマンドを入力してEnterを押します。
    git --version
  2. まだ入っていない場合：
    「"git"コマンドを実行するには、コマンドライン・デベロッパ・ツールが必要です」というポップアップが出ます。
    「インストール」をクリックしてください。
    ※ダウンロードに数分かかります。
  3. 確認：
    完了後、もう一度 git --version と入力し、git version 2.xx.x と出ればOKです。

🪟 Windowsの方

Windowsには標準で入っていないため、専用ソフトを入れます。

  1. 「Git for Windows」で検索し、公式サイト（git-scm.com）からダウンロードします。
  2. インストーラーを実行します。
    たくさん設定画面が出てきますが、何も変えずに全て「Next」で進めて大丈夫です。
  3. 完了したら、PowerShellで git --version と入力し、バージョン番号が出ればOKです。

最後の仕上げ：Gitのユーザー設定

Gitは「誰がセーブしたか」を記録するために、最初に名前とメールアドレスを登録しないと使えません。
ターミナル（PowerShell）で、以下の2行を1行ずつ入力してEnterを押してください。
※ " " の中身は自分のものに変えてください。本名でなくてOKです。

git config --global user.name "Taro Yamada"
git config --global user.email "taro@example.com"

これでエラーが出なければ設定完了です！

まとめ：環境構築完了！

お疲れ様でした！これであなたのパソコンは「開発マシン」に生まれ変わりました。

  • Chrome： 表示確認OK
  • VSCode： コード書き込みOK
  • Node.js： プログラム実行OK
  • Git： 履歴保存OK

これでもう、プログラミングを始める準備は完璧です。
次回は、プログラミング言語を選定します。

-🔰基礎技術