Lecture 02Git、Node.js、pnpmをインストールする
開発履歴を保存するGitと、Next.jsを手元で動かすためのNode.js / pnpmを準備します。
AIに開発を任せるとき、いちばん怖いのは 「気づいたら戻れなくなっていた」 という状態です。 この不安をなくしてくれる道具が Git です。 Gitがあれば、AIが大胆な変更を加えたあとでも、いつでも前の状態に戻すことができます。
このレクチャーでは、Gitが何のために必要かをイメージし、 自分のパソコンにGitが入っているかを確認します。 さらに、この講座のWebアプリを手元で動かすために必要なNode.js と pnpm も準備します。 実際の使い方（commit や branch）は Lecture 15 で詳しく扱うので、 ここでは「開発を始められる土台を準備する」という気持ちで進めます。
1Gitは「やり直せる」を保証してくれる仕組み
Gitは、ファイルの変更履歴を 小さな区切り で保存してくれる道具です。 ふだん私たちがWordやPagesで「上書き保存」を繰り返すと、過去の状態は消えてしまいます。 Gitはこれを「上書きではなく追記」にしてくれます。何度でも過去のどこにでも戻れる、 というわけです。
AI開発では、AIが一気にたくさんのファイルを書き換えることが日常的に起きます。 そのときGitが入っていれば、「1分前の状態」「昨日の動いていた状態」など、 好きな時点に巻き戻して比較できます。 Gitは セーブポイント のあるゲームのようなものだと思ってください。
2AI開発で、Gitがとくに大事な理由
Gitはエンジニア専用の道具ではありません。 むしろ、非エンジニアがAIで開発する場面でこそ価値が大きい 道具です。
- AIに「全画面を作り直して」と依頼したあとでも、気に入らなければ前の状態に丸ごと戻せる。
- 「どのファイルが・なぜ変わったか」を後から自分のペースで振り返ることができる。
- 次のレクチャーで作るGitHubに クラウドバックアップ として保存できる。
このレクチャーでは「入っているか」だけ確認すればOK
Gitの操作（commitやbranch）は、Lecture 15で改めて扱います。 ここでは、パソコンにGitが入っている状態を作るだけ がゴールです。 AppleのMacでは最初から入っていることも多いので、まずは確認から始めましょう。
3公式リソース
- Git 公式ダウンロードページ— macOS / Windows / Linux すべてに対応
- Node.js 公式サイト— Next.jsを動かすために必要。LTS版を選びます
- pnpm 公式インストールガイド— pnpmの公式インストール手順
4Gitのインストールと確認
- まずすでに入っているか確認します。 Codex Appのターミナル、もしくは macOS の
ターミナル.app/ Windows のPowerShellを開きます。 git --versionと入力してEnter。git version 2.x.xのような表示が出たら、すでにGitは入っています。手順は完了です。- 「
command not found」のように表示された場合は、上のリンクからGit公式ダウンロードページ を開き、自分のOSに合うインストーラを取得します。 - ダウンロードしたインストーラを起動し、表示される選択肢はそのまま「次へ」で進めます。 分からない選択肢が出てきたら、その画面のスクリーンショットを撮ってCodexに「
これは何を選べばよいですか？」と聞きましょう。 - インストール後、ターミナルをいったん閉じて開き直し、もう一度
git --versionを実行します。バージョン番号が表示されれば準備完了です。
「ターミナルって何？」と感じても大丈夫
ターミナルは Lecture 06 で改めて扱います。 ここでは「文字でパソコンに命令する画面」だと思ってください。 Codex Appの中にもターミナルがあるので、そこで git --version を打っても構いません。
5Node.jsのインストールと確認
Node.js は、Next.jsなどのWebアプリを手元のパソコンで動かすための土台です。 ブラウザで見る画面を作る前に、裏側でファイルを読み込み、開発用サーバーを起動してくれます。 この講座では Node.js 20.9以上 が必要です。
- ターミナルで
node -vを実行します。v20.9.0以上、またはv22.x.xのような表示ならOKです。 - バージョンが表示されない、または古い場合は、上の Node.js公式サイト を開きます。
- ダウンロード画面では、基本的に LTS と書かれた安定版を選びます。 macOS / Windows それぞれのインストーラをダウンロードしてください。
- インストーラを開き、表示される案内に沿ってインストールします。 特別な理由がなければ、初期設定のまま進めて問題ありません。
- インストール後、ターミナルを閉じて開き直し、 もう一度
node -vを実行します。 バージョン番号が表示されれば準備完了です。
Node.jsは「アプリを動かすエンジン」
Webアプリのコードは、ファイルとして置いてあるだけでは動きません。 Node.jsが入ることで、pnpm dev のようなコマンドを使い、 自分のパソコン上でアプリを起動できるようになります。
6pnpmのインストールと確認
pnpm は、Next.jsが使う部品をまとめてインストールする道具です。 スマホにアプリを入れるときのApp Storeに少し似ています。 このリポジトリには pnpm-lock.yaml があるので、 講義中はpnpmで作業をそろえます。
- まず
pnpm -vを実行し、すでに入っているか確認します。 バージョン番号が出れば、この手順は完了です。 - 入っていない場合は、Node.jsに同梱されている Corepack を有効にします。 ターミナルで
corepack enableを実行してください。 - 次に
corepack prepare pnpm@latest --activateを実行します。 これでpnpmを使える状態にします。 - ターミナルを閉じて開き直し、もう一度
pnpm -vを実行します。 数字が表示されればOKです。 - リポジトリをCloneしたあと、プロジェクトフォルダで
pnpm installを実行すると、必要な部品がまとめて入ります。 続けてpnpm devを実行すると、開発用サーバーが起動します。
npm installと混ぜない
この講座では pnpm install を使います。npm install と混ぜると、別のロックファイルができて 状態が分かりにくくなることがあります。 迷ったらCodexに「このプロジェクトではどのパッケージマネージャーを使うべきですか」と聞きましょう。
7この講座で使う確認コマンド
ここまで終わったら、ターミナルで次の3つを確認します。 すべてバージョン番号が表示されれば、講義中にコードをCloneして動かす準備が整っています。
git --versionnode -vpnpm -v
8覚えておきたいこと
- Gitは「変更履歴を保存して、いつでも前に戻せる」道具。
- AIに大きな変更を任せるときの 安全網 として機能する。
- このレクチャーのゴールは
git --versionでバージョン番号が表示されること。 - Node.jsは、Next.jsアプリを自分のパソコンで動かすための土台。
- pnpmは、このプロジェクトに必要な部品をそろえるための道具。
Git、Node.js、pnpmの準備状況をCodexに確認してもらう
次の依頼文をCodex Appに貼り付け、Git、Node.js、pnpmが正しく入っているか・ このプロジェクトを動かす準備ができているかを、初心者向けに説明してもらいましょう。
- 「
git --versionを実行して、結果を分かりやすく解説してください」 - 「
node -vとpnpm -vを実行して、 このNext.jsプロジェクトを動かす準備ができているか確認してください」 - 「このリポジトリで
pnpm installとpnpm devを実行する前に、注意点があれば初心者向けに教えてください」
9理解確認チェックリスト
- Gitは「変更履歴を保存する道具」だと自分の言葉で説明できる。
git --versionでバージョン番号が表示される。node -vでNode.jsのバージョン番号が表示される。pnpm -vでpnpmのバージョン番号が表示される。- AI開発でGitが必要な理由を、ひとつ以上言える。