セットアップ手順

この章でわかること: 前ページの「必要なもの」を、実際に用意する順番。GUI中心で、 ターミナル操作は最小限にしています。OS で手順が分かれるところは Mac / Windows の タブを切り替えてください(一度選ぶと、以降のタブも同じ OS に揃います)。

手順の最新版は公式で確認を

ダウンロード先や画面は更新されることがあります。うまくいかないときは各サービスの 公式ページ、または Claude Code に「この手順でエラーが出た」と相談してください。

順番に用意する

1. Node を入れる

   Mac

   nodejs.org を開き、LTS版(安定版)のインストーラー (.pkg)をダウンロードして、ダブルクリックで普通のアプリのように入れます。 ターミナルは不要です。

   Windows

   PowerShell(スタートメニューで「PowerShell」と検索)を開き、次の1行を実行します。

   winget install OpenJS.NodeJS.LTS

   GUI で入れたい場合は、nodejs.org から LTS版の インストーラー(.msi)をダウンロードしてダブルクリックでも構いません。

2. Git を入れる(ターミナルを少しだけ使います)

   Claude Code は内部で Git を使うため、これが入っていないと動きません。 お使いの OS に合わせて入れます。

   Mac

   ターミナル(アプリ「ターミナル」)を開いて次の1行を実行するのが一番手軽です。 これは Mac に開発用の道具一式(Gitを含む)を入れるための、Apple 公式の命令です。

   xcode-select --install

   ダイアログが出たら「インストール」を選びます(数分かかります)。

   コマンドが怖い/詰まったら、Claude Code に任せる

   黒い画面のコマンドに不安があれば、Claude Code デスクトップ版にこの画面を見せて 「Git を入れたい。今こう表示されているので、次に何をすればいい?コマンドは代わりに 実行して」と頼めば、案内・実行まで代行してくれます。無理に自分で打つ必要はありません。

   うまくいかないときは Homebrew で

   xcode-select --install がエラーになったり、うまく進まないことがあります。 その場合は、Homebrew(Mac に色々なソフトを入れるための定番の「アプリ屋さん」)を 入れてから Git を入れる方法が確実です。下の1行目は Homebrew 公式が案内している インストール用の命令、2行目でその Homebrew を使って Git を入れます。

   # 1) Homebrew を入れる(公式 https://brew.sh の手順)
   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   # 2) Git を入れる
   brew install git

   意味の分からないコマンドをそのまま貼るのが不安な場合は、この Aside ごと Claude Code に見せて「これを安全に実行したい。1行ずつ何をするか説明しながら進めて」と 頼むのが確実です。出所のはっきりしない他人のコマンドを、いきなり自分のPCで実行しない—— という慎重さ自体は、セキュリティの観点でも正しい感覚です。

   Windows

   PowerShell(スタートメニューで「PowerShell」と検索)を開いて次の1行を実行します。

   winget install Git.Git

   インストールが終わったら、PowerShell を一度閉じて開き直します (新しいウィンドウで git が使えるようになります)。

   完了したら git --version と打って、バージョンが表示されれば成功です。詰まったら エラーをそのまま Claude Code に貼って相談してください。

   ここだけターミナルが楽

   このサイトはGUI中心ですが、Git の用意だけは上の方法が最短です。コマンドの意味が 気になれば、そのまま Claude Code に「このコマンドは何?」と聞けば教えてくれます。

3. Claude Code デスクトップ版を入れる

   公式サイト(claude.com)から、お使いの OS のデスクトップアプリを ダウンロードしてインストールします。

   Mac

   Mac 版のアプリをダウンロードしてインストールします。

   Windows

   Windows 版のアプリをダウンロードしてインストールします。

   インストールできたら、Claude のアカウントでサインインします (利用には有料プランが必要)。これがAIに指示を出す作業場になります。

4. GitHub アカウントを作る

   github.com で無料アカウントを作成します。作ったものの 保管庫になります。

5. Vercel アカウントを作る

   vercel.com で 「Continue with GitHub」(GitHubで続ける)を 選んで登録します。GitHubと繋がっていると、後の公開がワンクリックに近くなります。

6. 動かしてみる

   Claude Code に「Next.js のプロジェクトを新しく作って、開発サーバーを起動して」 と頼みます。Claude Code のプレビュー(またはブラウザ)に初期画面が出れば、 土台は完成です。

ターミナルはどこで出てくる?

Next.js を自分のパソコンで動かす(開発サーバーの起動など)場面で、わずかに必要に なります。Mac では「ターミナル」、Windows では「PowerShell」がその黒い画面です。 とはいえ Claude Code デスクトップ版が大半を代わりに実行してくれるので、 自分で黒い画面に打ち込む量は最小限です。

AIにこう頼むと良い

「お使いの OS(Mac/Windows)での手順を、GUI中心で・ターミナルは最小限で教えて。 各ステップで何を確認すればOKかも教えて」と頼むと、つまずきにくい案内が返ってきます。

なぜ大事か

環境構築は最初の関門ですが、一度通れば毎回同じ土台で作業できます。「何を・どの順で」 さえ分かっていれば、細かい操作はAIに任せられます。