AI駆動趣味開発講座【第四講】GitHubリポジトリ作成からローカルへのクローン・VS Code操作実践（Push & Pull）

Lecture 04: GitHub Repository Integration, Clone & VS Code Hands-on (Push & Pull)

← AI駆動趣味開発講座：まとめページに戻る | ← 第三講へ | 第五講へ →

はじめに：手元のコードをクラウドへ！GitHub連携と双方向同期をマスター

前回の 【第三講】 では、コードを読まないAI駆動開発だからこそGitが「絶対の安全装置」になる理由を学び、Gitの仕組みや概念、そしてクラウド（GitHub）と手元をつなぐ準備を整えました。

今回お届けする 【第四講】 からは、いよいよ実際に手を動かして、GitHubと手元のPC（VS Code）を行き来する双方向の連携 を体験します！

手元の変更をクラウドへ送り込む 「Push（プッシュ）」 と、クラウドの変更を手元に取り込む 「Pull（プル）」 のサイクルをマスターすることで、大切なコードを安全にクラウド保管できるようになります。

いきなり本番のアプリで操作するのは緊張するので、今回は 安全なテスト環境（demo リポジトリ ＆ test フォルダー）を使って、ノーリスクで基本サイクルを一周マスター します！

リポジトリ作成前に知っておきたい！README・.gitignore・.env の役割

GitHubで新しいリポジトリを作成しようとすると、設定画面に 「Add README」 や 「Add .gitignore」 という項目が登場します。
「これらは一体何者なのか？」「いつ・どうやって作るべきなのか？」を整理しておきましょう。

① README（リードミー）とは？ — プロジェクトの「顔」と「取扱説明書」

• ファイル名: 通常は README.md（Markdown記法で記述されたファイル）
• 役割: リポジトリのトップページ一番下に自動で大きく表示される、プロジェクトの概要や使い方のドキュメントです。
• なぜ必要なのか？:
  自分自身が数ヶ月後に見返したときや、他の人に共有したときに「このアプリは何をするものか」「どうやって起動するのか（npm run dev など）」をパッと理解できるようにするためです。
• いつ作るのか？:
  リポジトリ作成時にGitHubに自動で作らせることもできますし、開発が進んでから後から手動（またはAIに「READMEを書いて！」と指示して）で作ることもできます。いつでも自由に作れるので、最初は作らなくても全く問題ありません。

② .gitignore（ギットイグノア）とは？ — Gitの「追跡除外リスト」

• ファイル名: .gitignore（先頭にドットが付いた隠しファイル）
• 役割: 「このファイルやフォルダーは、Gitの履歴管理やGitHubへのアップロード対象から無視（Ignore）してください」と指示するための設定ファイルです。
• なぜAI趣味開発で極めて重要なのか？:
  1. 巨大な一時フォルダーの除外:
     Node.jsなどで作られる node_modules/ のような膨大なライブラリ群をGitに含めると、容量がギガバイト単位に膨らみ、プッシュやクローンが非常に遅くなったりエラーの原因になります。
  2. 秘密情報（APIキーなど）の流出防止:
     後述する「生成AIのAPIキー」を書き込んだ設定ファイル（.env など）を誤ってGitHubにプッシュしてしまう事故を未然に防ぐ、絶対の防波堤 になります。
• いつ作るのか？:
  第二講で実行したようなプロジェクト生成コマンド（npm init vue など）を使うと、適切な .gitignore が最初から自動生成されていることがほとんどです。もちろん、後から手動で除外したいファイル名を1行書き足すだけでいつでも更新できます。

③ .env（ドットエンブ）とは？ — APIキーなどの機密情報を守る「金庫番」

• ファイル名: .env、.env.local など（先頭にドットが付いた環境変数ファイル）
• 役割: アプリ内で使用する設定値や、外部サービスと通信するための 「秘密のパスワードやAPIキー」 を手元だけに保存しておくためのファイルです。
• なぜAI駆動趣味開発で絶対に知っておくべきなのか？:
  • 次の【第三部】以降で登場する OpenAI（ChatGPT）やGoogle Gemini、Anthropic Claudeなどの生成AI APIキー は、あなた個人のクレジットカードや課金アカウントに直結した「現金そのもの」です。
  • この .env をうっかりGitHub（公開リポジトリはもちろん、非公開でも）にプッシュしてしまうと、世界中を巡回している悪質なボットに数秒でキーを盗まれ、一晩で数十万円以上の高額請求が発生する という悲惨な事故が実際に頻発しています。
• 鉄則：.gitignore に .env を絶対に登録する！:
  • 「秘密キーはすべて .env に書く」
  • 「.gitignore に .env や .env*.local を指定し、Gitの追跡から絶対に除外する」
    この2つを徹底することで、万が一GitHubへプッシュしても秘密鍵がクラウドへ流出することは100%防げます。
• クラウドにデプロイするときはどうするの？:
  • 「Gitに上げないなら、クラウドで動く本番アプリはどうやってAPIキーを使うの？」と思いますよね。
  • 次回登場する Vercel などのプラットフォームには 「Environment Variables（環境変数設定画面）」 が用意されており、GitHubを経由せず、管理画面に直接安全にAPIキーを登録する仕組みになっています。これなら世界中に一切漏らすことなく安全に動かせます！

【今回のハンズオンではどうする？】
今回はテスト用の空リポジトリ（demo）を使って、もっともシンプルに「クローン ➔ プッシュ ➔ プル」の仕組みを体感することが目的です。
そのため、リポジトリ作成時はチェックを入れず、まずは完全な空っぽ（Empty）の状態 からスタートします！（READMEも.gitignoreも、必要になったタイミングでいつでも簡単に追加できるので安心してください）

本講で体験する全体フロー

今回は、世界中の開発者が毎日行う「双方向の同期サイクル」をそのまま体験します：

【ステップ1〜2：クラウド（GitHub）】
   ① 新規リポジトリ「demo」を作成 (Private)
   ② クローン用URLをコピー
               │
               ▼
【ステップ3〜4：ローカル（VS Code）】
   ③ 作業フォルダー（test）をVS Codeで開く
   ④ git clone でリポジトリをダウンロード
               │
               ▼
【ステップ5：ローカル ➔ クラウドへ送信（Push）】
   ⑤ test.py を作成（print("hello AI!")）
   ⑥ git add . ➔ git commit -m "first commit"
   ⑦ git push origin main でGitHubへアップロード！
               │
               ▼
【ステップ6：クラウド ➔ ローカルへ同期（Pull）】
   ⑧ GitHub（ブラウザ）上で直接 test.py を編集（print("change!")）してコミット
   ⑨ VS Codeで git pull origin main を実行
   ⑩ 手元のエディタが自動で最新状態に書き換わる感動を体感！

手元（ローカル）とクラウド（GitHub）がつながれば、次回【第五講】でWebアプリを世界中へ無料公開する準備が完璧に整います！

ステップ1：GitHub上で新しいリポジトリを作成する

まずは、クラウド側（GitHub）にコードの保管場所である 「リモートリポジトリ」 を新規作成します。

1. ダッシュボードから「New」をクリック

GitHub（ https://github.com/ ）にログインし、画面左上の 「Top repositories」 横にある緑色の 「New」 ボタンをクリックします。

2. リポジトリの設定を入力する

「Create a new repository」画面が表示されます。

以下のように入力します：

3. Copilotの設定はスキップして作成

画面下に「3. Jumpstart your project with Copilot (optional)」が表示されますが、今回は手動でクローンから体験するため、何も入力せず空欄のまま、右下の緑色のボタン 「Create repository」 をクリックします。

ステップ2：作成完了画面（Quick setup）でクローンURLをコピー

リポジトリが作られると、「Quick setup」 画面が表示されます。

画面中央の「Quick setup」ボックス内に表示されているリポジトリのURLをコピーします（右側のコピーアイコンをクリック）：

https://github.com/[あなたのユーザー名]/demo.git

（※第三講で設定したSSH接続を使う場合は「SSH」タブを選んで git@github.com:... をコピーしてもOKです）

ステップ3：VS Codeで作業フォルダーを開く

次に、手元のPC（ローカル環境）の準備です。作業用のフォルダーを用意してVS Codeで開いていきましょう。

1. VS Codeを起動する

まずは、PCにインストールしてある VS Code を起動します。

まだフォルダーを開いていない初期画面が表示されます。

2. 作業フォルダーを選択して開く

アプリやリポジトリを扱う際は、専用のフォルダーを1つ用意して開きます。

上部メニューの 「ファイル」➔「フォルダーを開く...」（または左側メニューの「フォルダーを開く」ボタン）をクリックします。

好きな場所（ユーザー直下やデスクトップなど）に、半角英数字で作業用のフォルダー（今回は例として test）を用意して選択し、右下の 「フォルダーの選択」 をクリックします。

3. 「フォルダーの作成者を信頼しますか？」のダイアログ

フォルダーを開くと、画面中央にセキュリティ確認ダイアログが表示されることがあります。

突然表示されると驚くかもしれませんが、これはVS Codeの安全確認機能（Workspace Trust）です。自分で作成した安全なフォルダーですので、青いボタンの 「フォルダーを信頼して続行」（または「はい、作成者を信頼します」）をクリックしてそのまま進めてOKです。

ステップ4：リポジトリをローカルにクローンする（git clone）

ここから、VS Codeの画面で実際の操作を進めていきます！

1. ターミナルを開く

VS Codeのメニューから 「ターミナル」➔「新しいターミナル」 を開きます（Ctrl + @）。
ターミナルのカレントディレクトリが test になっていることを確認します：

PS C:\Users\[ユーザー名]\test>

2. git clone を実行

先ほどコピーしたURLを使ってクローンを実行します：

git clone https://github.com/[あなたのユーザー名]/demo.git

実行すると以下のメッセージが表示されます：

Cloning into 'demo'...
warning: You appear to have cloned an empty repository.

「warning: You appear to have cloned an empty repository.」
（警告：空のリポジトリをクローンしたようです）と出ますが、まだ中身が何もない初期状態なのでこれで大成功です！

クローンが完了すると、左側のエクスプローラー内に demo フォルダーが作成されます。

ステップ5：初めてのファイル作成・コミット・プッシュ！（Push）

続いて、ローカルで作ったファイルをクラウド（GitHub）へ送り込みます。

① demo フォルダー内へ移動する

ターミナルでクローンした demo の中に入ります：

cd demo

プロンプトが PS C:\Users\[ユーザー名]\test\demo> に切り替わります。

② test.py を新規作成する

エクスプローラーの demo フォルダーの中に、新しいファイル test.py を作成します。
中身に以下の1行を書き込んで保存（Ctrl + S）してください：

print("hello AI!")

③ ステージング ＆ 初回コミット

変更したファイルを記録対象としてステージに上げ、コミットメッセージを添えて履歴を確定します：

git add .
git commit -m "first commit"

[main (root-commit) 16e9f60] first commit
 1 file changed, 1 insertion(+)
 create mode 100644 test.py

手元のローカルリポジトリに最初の履歴（first commit）が記録されました！

④ GitHubへプッシュ（送信）

ローカルの記録をクラウドのリモートリポジトリへアップロードします：

git push origin main

Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 236 bytes | 236.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
To https://github.com/[あなたのユーザー名]/demo.git
 * [new branch]      main -> main

⑤ GitHubで反映を確認！

ブラウザでGitHubの demo リポジトリ画面を開き、再読み込み（F5）してみましょう。

先ほどまで空っぽだったリポジトリに test.py が表示され、コミットメッセージ 「first commit」 が刻まれていることが確認できます！
これで、「ローカル ➔ クラウドへのPush」 が完了しました！🎉

ステップ6：クラウド側で変更してローカルへ取り込む！（Pull）

Gitのもうひとつの重要機能が、「リモートの変更を手元のPCへ取り込む（Pull）」 操作です。
クラウド側でファイルを編集して、手元のVS Codeへ同期させてみましょう！

① GitHub（ブラウザ）上で直接ファイルを編集する

GitHubの画面で test.py をクリックし、右上の鉛筆アイコン（Edit this file）をクリックして編集画面に入ります。

2行目に print("change!") を書き足します：

print("hello AI!")
print("change!")

編集できたら、画面右上の緑色のボタン 「Commit changes...」 をクリックし、そのままコミットします。これで、クラウド（GitHub）側だけが一足先に更新された状態になりました。

② VS Codeで git pull を実行する

VS Codeの画面に戻ります。この時点では、手元の test.py にはまだ1行目しかありません。

ターミナルで以下のコマンドを実行します：

git pull origin main

remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
Unpacking objects: 100% (3/3), 912 bytes | 114.00 KiB/s, done.
From https://github.com/[あなたのユーザー名]/demo
 * branch            main       -> FETCH_HEAD
   16e9f60..29497f0  main       -> origin/main
Updating 16e9f60..29497f0
Fast-forward
 test.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

コマンドを実行した瞬間、VS Codeで開いている test.py に、GitHubで書き足した print("change!") が自動的にパッと反映されます！

これが 「Pull（引っ張ってくる＝同期）」 です！

【発展コラム】すでに手元で作ったプロジェクトをGitHubと連携する方法

本講では、「GitHubで空のリポジトリを作成 ➔ git clone して手元に持ってくる」 という【クローン起点】の最も確実な基本手順を体験しました。

しかし、実際の開発（例えば第二講で作ったVue.jsアプリなど）では、「すでに手元のPCでプロジェクトを作り始めていて、後からGitHubにアップロードして連携したい！」 という場面がとてもよくあります。

そのようなときは、以下の図のように 「手元のフォルダーをGit化し、リモートの住所（URL）を後から登録する」 という手順を踏みます。

連携の4ステップ

① プロジェクトフォルダ ──( git init )──▶ ② ローカルGitリポジトリ
                                              │
                                              ├─ git remote add origin <URL> ─▶ ③ GitHubリポジトリ
                                              │                                        ▲
                                              └────── git push -u origin main ─────────┘

1. プロジェクトフォルダーをGit化する（git init）

VS Codeで既存のプロジェクトフォルダーを開き、ターミナルで初期化コマンドを実行します：

git init

これでフォルダーの中に隠しフォルダー（.git）が作られ、普通のフォルダーが「ローカルGitリポジトリ」へと生まれ変わります。

2. ファイルを記録（コミット）する

フォルダー内のファイル全体をステージに上げ、最初のスナップショットを記録します：

git add .
git commit -m "first commit"

3. GitHubのリモート先を登録する（git remote add origin）

GitHub上で空のリポジトリを新規作成し、そのURLを手元のGitに「origin」という名前で登録（紐付け）します：

git remote add origin https://github.com/[あなたのユーザー名]/[リポジトリ名].git

4. クラウドへ初回送信（git push）

メインブランチ名を main に整え、GitHubへ一括送信します：

git branch -M main
git push -u origin main

-u origin main を指定してプッシュすることで、「手元の main と GitHubの main を今後自動で対応させる」という設定が完了します。以降は単に git push や git pull と打つだけで同期できるようになります。

第四講のまとめ

今回の一連のハンズオンで、手元のPCからクラウド（GitHub）への安全なバックアップと双方向同期のパイプラインが開通しました！

これで、手元のPCが万が一クラッシュしても、AIが予期せぬコード書き換えを行っても、いつでもクラウドから安全に復元できる「絶対の防波堤」が手に入りました！

次回予告（第五講へ進む）

▶ 【第五講】Vercelによる無料Web公開・自動デプロイ実践とスマホアプリ化

GitHubにコードが上がったことで、いよいよ世界公開へのロケット発射準備が整いました。
クラウドプラットフォーム 「Vercel（バーセル）」 を使って、作ったWebアプリを世界中へ完全無料で公開し、スマホのホーム画面に追加してアドレスバーを消すネイティブアプリ化のプロ技、そしてGit Pushで本番サイトが即座に自動更新される感動を体験しましょう！

← 第三講へ | まとめページに戻る | 第五講へ進む →