第12回までで、Claude Codeで作ったアプリが、自分のパソコンの中で動く状態まで来ました。 ここまでは、自分専用の道具です。
第5段は、いよいよ「世に出す」フェーズ。 第13回（今日）と第14回の2回で、家族や同僚にURLで送れる状態に持っていきます。
今日のゴールは、自分のパソコンにあるアプリを、GitHubというネット上の保管庫に上げるところまで。
ㅤ
なぜ、GitHubに上げるのか
家族にURLを送りたいなら、最終的にはVercel（次回扱います）が公開先になります。 でもVercelは「GitHubのこの場所を見て、公開してね」という頼み方をします。 だから、最初にGitHubにアプリを置く必要があります。
GitHubは、第4回で出てきた「ポケモンHOME」のような存在。 自分のセーブデータを、ネット上のクラウドに預けておける場所です。
役割は3つ、改めて思い出します。
- パソコンが壊れてもデータが残る
- 家族や仲間と進捗を合わせられる
- Vercelのような公開サービスが「ここを見て」と参照する場所になる
今日は、3つ目の準備です。
ㅤ
ステップ1 GitHubのアカウントを作る
ブラウザで github.com を開きます。 「Sign up」から、メールアドレスでアカウントを作ります。 所要時間3分。
ユーザー名は、後で公開URLに使われることがあるので、シンプルなものを選びます。 私は、自分の名前のローマ字で取りました。
ㅤ
ステップ2 アプリをGitHubにアップする
ここはClaude Codeに頼みます。 ターミナルで、第12回のフォルダにいる状態で、こう話しかけます。
このフォルダの中身を、GitHubに新しいリポジトリとして公開したいです。 リポジトリ名は「my-first-vibe-app」、公開設定はpublicにします。 必要な手順を、ひとつずつ教えてください。 Gitのインストールが必要なら、それも一緒に。
「リポジトリ」というのは、GitHub上で1つのプロジェクトを置いておく箱のこと。 本でいうところの1冊、と思ってもらえれば近いです。
「public」というのは、誰でも見られる公開設定のこと。 逆に「private」は自分だけが見られる設定です。 今日は、次回のVercel公開のために、publicにしておきます。
Claude Codeが、GitHubの設定方法を順番に教えてくれます。 途中で「git config に名前を入れて」「ssh鍵を作って」のような専門用語が出てきますが、全部Claude Codeに「やって」と頼めばOKです。
無事にアップできると、github.com/あなたのユーザー名/my-first-vibe-app のようなURLでアクセスできるようになります。
ㅤ
commit と push、ふたつの動詞
Claude Codeに「commitしてpushして」と頼んだとき、裏で起きていることを軽く見ておきます。
commit（コミット）は、変更内容に短いメモを書いて記録する操作。 私のイメージは、本のしおりに「ここで何を変えたか」を書き込んで挟む作業。
push（プッシュ）は、第4回でも触れた、自分の手元の進捗を、HOM（GitHub）に送る作業。 日本語だと「上げる」「反映する」が近いです。
順番は、commit → push。 記録してから、送る、という流れです。
これも、Claude Codeに「commitしてpushして」と頼めば、全部やってくれます。 最初は、流れだけ知っていれば十分です。
ㅤ
上げたあと、GitHubで確認する
ブラウザで、自分のリポジトリのURL（github.com/ユーザー名/my-first-vibe-app）を開きます。 さっきまでパソコンの中だけにあった index.html、style.css、script.js が、ネット上に並んでいるはずです。
これで、第14回でVercelに繋ぐ準備が整いました。
ㅤ
詰まったら
GitHubの初期設定は、誰もが一度はつまずくポイントです。 よくある詰まりは、こんなところ。
- gitがインストールされていない（Macなら command line tools の追加が必要）
- 認証情報の設定（git config user.name、user.email）が未入力
- ssh鍵の作成と、GitHub側への登録
全部、Claude Codeに「以下のエラーが出ました。手順を教えてください」と貼って聞けば抜けられます。
エラーメッセージは、第7回で書いた通り、隠さずそのまま渡すのがコツです。
ㅤ
今日のまとめ
3行で振り返ります。
- GitHubは、自分のアプリをネット上に置く保管庫
- アカウント作成 → リポジトリ作成 → push、の3ステップ
- 詰まったら、エラーメッセージをそのままClaude Codeに貼る
ㅤ
次回予告
第14回で、ついに「公開」です。 GitHubに上げたアプリを、Vercelというサービスに繋いで、世界中のどこからでもURLでアクセスできる状態にします。 所要時間は、ほんの数分。費用も、ゼロです。
そして後半で、もう一段先のキーワード「MCP」を、概念だけ紹介します。
ㅤ
GitHubに上げた瞬間、自分の中だけだったアプリが、世界とつながり始めます。
ㅤ
連載の更新は、メルマガ「おかもんだより」でもお知らせします。 よかったら登録してお待ちください。
ㅤ
演習：30分の宿題
第13回は、自分のアプリを GitHub に置く回。所要時間30分（初回は1時間ほどかかることも）。
自分のアプリを GitHub に公開する
第12回までで分割したアプリを Claude Code で開いて、以下を頼みます：
このフォルダの中身を、GitHubに新しいリポジトリとして公開したいです。
リポジトリ名は my-first-vibe-app（好きな名前に変えてOK）、公開設定は public。
必要な手順を、ひとつずつ進めてください。
git config の設定や SSH 鍵の作成も、必要なら一緒にお願いします。
完了したら、ブラウザで github.com/あなたのユーザー名/my-first-vibe-app にアクセス。
ファイルが並んでいれば成功。
README.md を1ファイルだけ追加
GitHub 上のリポジトリに、最低限の README を追加します。Claude Code に：
このリポジトリに README.md を作ってください。
内容：
- タイトル：このアプリの名前
- 概要：何のためのアプリか（2行で）
- 使い方：体重を入れる → 計算ボタンを押す → 結果が出る、の3行
完了したら、commit & push。 GitHub のリポジトリページで、README が綺麗に表示されているのを確認します。
医療職別 実例ギャラリー：参考にしたいGitHubリポジトリ
個人開発のリファレンスとして、参考になる小さなリポジトリを3つ。
例1：Tarball/medkit-calculators （架空例）
医師が外来用の計算ツール5本を1リポジトリにまとめた例。READMEに「何の不便を解消するか」が書いてあるのが好印象。
例2：個人開発者の最小構成リポ （架空例）
ファイル数が少なく、READMEが充実している小さなリポジトリ。「READMEは最小、機能も最小」が、長く維持できる秘訣。
例3：スター数が多い学習リポ （架空例）
「コードを公開している」というだけで、自分の名刺代わりになる例。 履歴書に GitHub URL を載せる、自分のポートフォリオとして使う、という人も。
もっと深く：Git の3つの場所（working / staging / repository）
第13回では「commit」「push」とサラッと書きましたが、内部的には3つの場所があります。
1. Working Directory（作業ディレクトリ）
- いま実際に編集しているファイルがある場所
- フォルダの中身そのまま
2. Staging Area（ステージング）
- 「次の commit に含める変更」を一時的に積む場所
git addで、ここに置く
3. Repository（リポジトリ）
- 確定したコミット履歴の保管庫
git commitで、ここに記録する
つまり、変更の流れは：
編集（Working）→ git add（Staging）→ git commit（Repository）→ git push（GitHub）
Claude Code に「commit して push」と頼むと、git add も含めて全部やってくれます。
細かい仕組みを知らなくても、Vibe Coding は進められる。
ただ、トラブったときに「3つの場所のどこで詰まっているか」を考えると、原因が見つかりやすくなります。
動画で見る
- YouTube：GitHub 公式チュートリアル