命綱を張れ。ブラウザ完結環境におけるGitHub連携と安全なバージョン管理

【連載】GCP×AI：0円で創る近未来IT覇権ゲーム『ネオ・ジパング』開発記

AI（Gemini）という強力な相棒を得て、プロンプトの術も心得ました。しかし、いざ戦場（開発）へ赴く前に、絶対に確保しておかなければならないものがあります。それは「命綱（セーブポイント）」です。

本プロジェクトの掲げる「サバイバルDX」では、重いローカル開発環境を持ちません。Chromebookのブラウザ上でAIと対話しながらコードを紡ぎ出します。しかし、それは同時に「ブラウザのタブをうっかり閉じてしまえば、すべてが消え去る」という危険と隣り合わせであることを意味します。

そこで今回は、ローカルPCに一切のツールをインストールすることなく、ブラウザ操作のみで「GitHub」と連携し、安全にコードのバージョンを管理する（保存する）術を解説します。

拠点（リポジトリ）の構築

まずは、全世界のエンジニアが利用するソースコード管理サービス「GitHub」に、今回のプロジェクト専用の保管庫（リポジトリ）を作成します。

1. GitHub にログインし、画面右上の「+」マークから 「New repository」 を選択します。

2. Repository name にプロジェクト名（例：neo-zipangu）を入力します。

3. 今回は全世界に公開するオープンソース戦略をとるため、「Public」を選択します。（非公開にしたい場合はPrivateでOKです）

4. 「Add a README file」にチェックを入れます。（これを入れることで、後述するブラウザ版エディタがすぐに使えるようになります）

5. 最後に 「Create repository」 をクリックすれば、あなただけの拠点が完成します。

魔法のショートカット「 . 」（ドット）

通常、GitHubにコードをアップロード（Push）するには、ローカルPCに黒い画面（ターミナル）を立ち上げて難解なGitコマンドを打ち込む必要があります。しかし、低スペックPCやChromebookでの開発において、そんな重労働は不要です。

作成したリポジトリの画面を開いた状態で、キーボードの 「 . 」（ドットキー） を1回押してみてください。

画面が切り替わり、なんとブラウザ上に「Visual Studio Code（VS Code）」と全く同じ画面（GitHub Web Editor）が立ち上がります。 これこそが、サバイバルDXにおける最強の武器の一つ。ローカル環境ゼロで、プロのエンジニアと同じ開発画面を手に入れる裏技です。

AIが紡いだコードを安全に格納する（コミット）

Webエディタが開いたら、あとは前回のAIとの対話（Vibe Coding）で生成されたコードを保存していくだけです。

1. エディタ左側のファイルツリーにマウスを合わせ、「新しいファイル」アイコンをクリックします。

2. AIの提案通り、まずは frontend/src/App.jsx などのファイル名を入力して作成します。

3. エディタの右側に空のファイルが開くので、AI Studioの画面からコードをコピーし、そのまま貼り付けます。

4. 保存するには、画面左側の「枝分かれしたアイコン（Source Control）」をクリックします。

5. Messageの欄に「初回のベースコード追加」など、何をしたのか簡単なメモを入力し、「Commit & Push」ボタンを押します。

これで、あなたのコードは完全に保護されました。たとえ今すぐPCが壊れたとしても、別のPCからブラウザでGitHubにアクセスすれば、1秒で開発を再開できます。

GitHubは「デプロイの要」でもある

このGitHubリポジトリは、単なるバックアップ用の金庫ではありません。 連載の最終章である第6章において、「GitHubに変更を保存（Push）した瞬間に、自動でGCPやCloudflareに連携され、全世界へゲームが公開される」という、近代的なゼロスケール運用の起点（トリガー）となります。

コードを書いたら、ブラウザ上のエディタに貼り付けてコミットする。 このシンプルな「呼吸」を身につけることが、サバイバルDXを生き抜くための絶対条件です。

次なる戦局へ

拠点の構築と、安全なコード管理のパイプラインは開通しました。 いよいよ次回からは、AIが生成したコードを使って画面を彩る「第2章：サイバー空間を創造する ～HTML5 CanvasによるヘックスマップとターミナルUI描画～」へと突入します。

無駄を削ぎ落としたWeb標準技術の力で、近未来のメガテック企業が争うマップをブラウザ上に描き出しましょう。