GitHubをはじめよう

第5章

GitHub へ送る

第4章で作った記録は、まだ手元のフォルダーの中にしかありません。GitHub 側は、第1章で作った時点のままです。 ここでは、その差を埋めて手元と GitHub の中身をそろえます。 送る操作を push（プッシュ）と呼びます。最後はブラウザで GitHub を開いて、本当に入ったかを自分の目で確かめます。

この章が終わると
push した内容が github.com の画面に出ることを確かめられる状態
用意するもの
第4章で記録まで済ませたフォルダー。新しく入れるものはありません。

この章の進め方を選んでください

同じことを3つのやり方で説明します。どれを選んでも、できあがるものは同じです。 あとから何度でも変えられます。

ターミナル：黒い画面に命令を打ちます。遠回りに見えますが、Git が何をしているかがそのまま見えるので、あとで困ったときに自分で調べられるようになります。

VS Code：エディタ（VS Code）の画面で、ボタンを押して進めます。コマンドを覚えなくても同じことができます。中で動いているのは、ターミナルで打つのと同じ Git です。

AI エージェント：やりたいことを日本語で伝えて、AI に代わりにやってもらいます。ここでは Claude Code を例にしますが、載せている指示文は他のエージェントでもほとんどそのまま使えます。

下にスクロールすると、手順が1つずつ再生されます。見逃したら、スクロールを戻せば同じところが巻き戻ります。 はじめて送るときは、GitHub へのサインインを求められます。出る画面と進め方は、第3章のGitHub にサインインを求められたらにまとめてあります。

ターミナルで進める

  1. 01 / 09

    第4章の続きです。記録したフォルダーの中で、ターミナルを開きます。

    枠の上に出ているのが、いまいるフォルダーです。第4章と同じ場所にいます。

    ~/Documents/hello-github

  2. 02 / 09

    いまの状態を見ます。「手元のほうが1つ先に進んでいる」と出ます。

    ahead of 'origin/main' by 1 commit の origin は、第3章で出てきた「つなぎ先につけた名前」です。

    ~/Documents/hello-github

  3. 03 / 09

    記録の一覧を、印つきで見ます。origin/main は1つ前の記録に付いたままです。

    --decorate は「どの記録がどの枝の先端か」を一緒に出す指定です。origin/main が GitHub 側の位置を表します。

    ~/Documents/hello-github

  4. 04 / 09

    送ります。これが push です。最後の行に、どこからどこへ進んだかが出ます。

    はじめてのときは、ここで GitHub のサインインを求められます。出る画面と進め方は、第3章の「GitHub にサインインを求められたら」にあります（Mac は先に gh auth login を済ませておきます）。数字は環境で変わります。

    ~/Documents/hello-github

  5. 05 / 09

    もう一度見ます。「先に進んでいる」が消え、up to date になりました。

    手元と GitHub の中身が同じになった、という意味です。

    ~/Documents/hello-github

  6. 06 / 09

    印も見ます。origin/main が、いちばん新しい記録まで追いつきました。

    push は「この印を GitHub 側でも前へ動かす」操作だと考えると分かりやすいです。

    ~/Documents/hello-github

  7. 07 / 09

    ブラウザで GitHub のリポジトリを開き直します。送ったものがここに出ています。

    開きっぱなしにしていた場合は、読み込み直してください。古い画面のままだと変わって見えません。

    https://github.com/practice-learner/hello-github

  8. 08 / 09

    一覧の見出しが 2 Commits になり、いま送った記録の名前が出ています。

    右の英数字は、その記録につけられた名前です。手元の git log で見たものと同じものが出ます。

    https://github.com/practice-learner/hello-github

  9. 09 / 09

    README の中身にも、手元で足した1行が出ています。ここまでが第5章です。

    これで、手元と GitHub の中身がそろいました。別のパソコンからでも同じものを clone できます。

    https://github.com/practice-learner/hello-github

VS Codeで進める

  1. 01 / 08

    第4章の続きです。「グラフ」節では main が雲の印より1つ上にあり、ボタンは「変更の同期 1↑」になっています。

    雲の印は GitHub 側がどの記録まで持っているかを表します。手元のほうが1つ進んでいる、つまり送っていない記録が1つある状態です。

    hello-github

  2. 02 / 08

    一番下の帯にも、同じずれが 0↓ 1↑ と出ています。↑ が送る数、↓ が受け取る数です。

    hello-github

  3. 03 / 08

    「グラフ」節の見出しにマウスを乗せると、右にボタンが並びます。上向きの矢印が「プッシュ」です。

    3つ並んだ矢印は、左から「すべてのリモートからフェッチ」「プル」「プッシュ」です。どれもマウスを乗せると名前が出ます。

    hello-github

  4. 04 / 08

    「プッシュ」を押します。手元の記録が GitHub へ送られます。これが push です。

    「変更の同期 1↑」を押しても送れます。同期は、受け取る（プル）と送る（プッシュ）をまとめて行うボタンです。はじめてのときは GitHub へのサインインを求められます（「許可」を押してブラウザで許可します。第3章の「GitHub にサインインを求められたら」）。

    hello-github

  5. 05 / 08

    雲の印が main の横へ移りました。GitHub 側も同じ記録まで進んだ、という意味です。

    「送信した変更点」の行が消え、ボタンは「コミット」に戻りました。一番下の帯も、ずれが無いので印だけになります。

    hello-github

  6. 06 / 08

    ブラウザで GitHub のリポジトリを開き直します。送ったものがここに出ています。

    開きっぱなしにしていた場合は、読み込み直してください。古い画面のままだと変わって見えません。

    https://github.com/practice-learner/hello-github

  7. 07 / 08

    一覧の見出しが 2 Commits になり、いま送った記録の名前が出ています。

    右の英数字は、その記録につけられた名前です。手元の git log で見たものと同じものが出ます。

    https://github.com/practice-learner/hello-github

  8. 08 / 08

    README の中身にも、手元で足した1行が出ています。ここまでが第5章です。

    これで、手元と GitHub の中身がそろいました。別のパソコンからでも同じものを clone できます。

    https://github.com/practice-learner/hello-github

AI エージェントで進める

  1. 01 / 10

    第4章の続きです。記録したフォルダーの中で、ターミナルを開きます。

    ~/Documents/hello-github

  2. 02 / 10

    エージェントを起動します。ここから先は日本語で頼むだけです。

    ~/Documents/hello-github

  3. 03 / 10

    やってほしいことを書いて送ります。「送る前に教えて」を付けるのがコツです。

    何が送られるのかを先に出させると、思っていたのと違うときに止められます。

    ~/Documents/hello-github

  4. 04 / 10

    エージェントは、いまの状態を調べてから「何を送るか」を見せて、許可を求めてきます。

    ここで必ず読んでください。送る記録が1つで合っているかを、自分で確かめます。

    ~/Documents/hello-github

  5. 05 / 10

    内容に問題がなければ許可します。エージェントが送ります。

    ここで出ている git push が、ターミナルで進める場合に打つコマンドと同じものです。

    ~/Documents/hello-github

  6. 06 / 10

    本当に入ったかを確かめてもらいます。「やった」で終わらせないのが大事です。

    ~/Documents/hello-github

  7. 07 / 10

    印の位置が動いたことで、GitHub 側にも入ったと分かります。

    origin/main は GitHub 側の位置を表す印です。いちばん新しい記録まで追いついています。

    ~/Documents/hello-github

  8. 08 / 10

    ブラウザで GitHub のリポジトリを開き直します。送ったものがここに出ています。

    開きっぱなしにしていた場合は、読み込み直してください。古い画面のままだと変わって見えません。

    https://github.com/practice-learner/hello-github

  9. 09 / 10

    一覧の見出しが 2 Commits になり、いま送った記録の名前が出ています。

    右の英数字は、その記録につけられた名前です。手元の git log で見たものと同じものが出ます。

    https://github.com/practice-learner/hello-github

  10. 10 / 10

    README の中身にも、手元で足した1行が出ています。ここまでが第5章です。

    これで、手元と GitHub の中身がそろいました。別のパソコンからでも同じものを clone できます。

    https://github.com/practice-learner/hello-github

この章で覚えること

  1. 1

    記録することと、送ることは別です。 第4章の commit は手元に残すだけで、GitHub 側は何も変わりません。送ってはじめて、 他の人やほかのパソコンから見えるようになります。

  2. 2

    origin/main は GitHub 側の位置を表す印です。 送る前は1つ前の記録に付いたままで、送ると手元の位置まで追いつきます。 「ずれているかどうか」は、この印を見れば分かります。

  3. 3

    送ったら、ブラウザで確かめます。 どの進め方でも、最後は github.com の画面に出ているかどうかが答えです。 ターミナルの git push、 VS Code の「プッシュ」、エージェントへの頼みごとは、どれも同じことをしています。

公式の説明は GitHub のリモートリポジトリへのコミットのプッシュと、VS Code のRepositories and remotesにあります。

次の章枝を分けて試す元を壊さずに、別の枝で作業する。

前の章へ戻る/章の一覧へ