GitHubをはじめよう

第3章

手元のパソコンと GitHub をつなぐ

第1章では GitHub の上にリポジトリを作りました。ここからは、それを手元のパソコンに持ってきます。 持ってきたフォルダーは GitHub とつながったままになるので、直した内容をあとから送れるようになります。

この章が終わると
clone したフォルダーが手元にあり、GitHub とつながっている状態
用意するもの
第1章で作ったリポジトリと、第2章で Git を入れたパソコン。AI エージェントで進める人は、下の「準備」も済ませます。

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

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

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

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

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

AI エージェントで進める人の準備（はじめに1回だけ）

AI エージェント（ここでは Claude Code）と、AI が GitHub を操作するときに使う GitHub CLI（gh）を入れます。 どちらも、第2章で開いたターミナルにコマンドを貼り付けて Enter を押します。入れ終わったら、ターミナルを閉じて開き直します。

1. Claude Code を入れる

  • Mac：curl -fsSL https://claude.ai/install.sh | bash
  • Windows：irm https://claude.ai/install.ps1 | iex
  • 「Claude Code successfully installed!」と出れば完了です。使うには Claude の有料プラン（Pro など）か Anthropic Console のアカウントが要ります。

2. GitHub CLI（gh）を入れる

  • Windows：winget install --id GitHub.cli --source winget（または cli.github.com の「Windows — Download MSI」）
  • Mac：Homebrew（Mac に道具を入れるための道具）を使います。入っていなければ、brew.sh にある1行を貼り付けて Enter を押し、 最後に出る「Next steps」の案内に従います。そのあと brew install gh と打ちます。

コマンドは、Claude Code の公式の新規ユーザー向けターミナルガイドと、GitHub CLI のインストールの案内のとおりです。Mac 用の gh のインストーラ（.pkg）は署名されておらず、そのままでは開けないため、ここでは Homebrew を案内しています。

下にスクロールすると、手順が1つずつ再生されます。見逃したら、スクロールを戻せば同じところが巻き戻ります。 はじめの3手順はどの進め方でも共通です。GitHub の住所を控えるところだけは、ブラウザでの操作になります。

ターミナルで進める

  1. 01 / 09

    第1章で作ったリポジトリを、ブラウザで開きます。

    つなぐには、まずこのリポジトリの住所（URL）を控えます。ここだけはブラウザでの操作です。

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

  2. 02 / 09

    緑の Code を押します。下に小さな枠が出ます。

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

  3. 03 / 09

    HTTPS が選ばれていることを確かめて、右のコピーボタンを押します。

    サインインしていると SSH という選択肢も出ますが、はじめは HTTPS のままで構いません。

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

  4. 04 / 09

    ターミナルを開きます。第2章で Git を入れたときと同じ画面です。

    Git と、名前・メールアドレスの設定は第2章で済んでいます。まだの人は、先に第2章を進めてください。

    ~

  5. 05 / 09

    置き場所へ移動します。ここでは書類フォルダーの中に置くことにします。

    cd は「移動する」という意味です。枠の上の表示が、いまいる場所に変わります。

    ~/Documents

  6. 06 / 09

    さっきコピーした住所を貼り付けて、clone します。これが「つなぐ」操作です。

    clone は「複製する」という意味です。GitHub にあるものが、そのまま手元にできます。

    ~/Documents

  7. 07 / 09

    できたフォルダーの中へ入ります。

    公開のリポジトリを持ってくるだけなら、GitHub へのサインインは求められません。求められたら、この章の下の「GitHub にサインインを求められたら」を見てください。

    ~/Documents/hello-github

  8. 08 / 09

    中身を見ます。第1章で作った README.md が入っています。

    ~/Documents/hello-github

  9. 09 / 09

    どこにつながっているかを確かめます。GitHub の住所が2行出れば、つながっています。

    origin は「つなぎ先につけた名前」です。この名前はこのあとの章でも出てきます。

    ~/Documents/hello-github

VS Codeで進める

  1. 01 / 13

    第1章で作ったリポジトリを、ブラウザで開きます。

    つなぐには、まずこのリポジトリの住所（URL）を控えます。ここだけはブラウザでの操作です。

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

  2. 02 / 13

    緑の Code を押します。下に小さな枠が出ます。

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

  3. 03 / 13

    HTTPS が選ばれていることを確かめて、右のコピーボタンを押します。

    サインインしていると SSH という選択肢も出ますが、はじめは HTTPS のままで構いません。

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

  4. 04 / 13

    VS Code を開きます。パソコンの表示が日本語なら、右下に日本語にするかどうかの案内が出ます。

    VS Code を入れていない場合は code.visualstudio.com から入れてください。Git と、記録に残す名前・メールアドレスは第2章で済んでいます（VS Code の画面からは設定できないため）。

    VS Code

  5. 05 / 13

    「インストールして再起動」を押します。VS Code が再起動して、表示が日本語になります。

    案内が出ないときは、左端の「拡張機能」で Japanese Language Pack を検索して入れ、出てくる案内から再起動します。この教材の画面は日本語の表示で描いています。

    VS Code

  6. 06 / 13

    もう1つ準備をします。左端の「拡張機能」を押します。

    拡張機能は、VS Code にあとから機能を足す部品です。ここで入れるものは、第7章で Pull Request を出すときに使います。

    VS Code

  7. 07 / 13

    検索欄に GitHub Pull Requests と打ちます。同じ名前の拡張が出てきます。

    VS Code

  8. 08 / 13

    発行元が GitHub であることを確かめて、「インストール」を押します。左端に GitHub のアイコンが増えます。

    似た名前の拡張もあるので、発行元を必ず確かめます。この拡張の画面は英語のままです（日本語の訳が用意されていないため）。

    VS Code

  9. 09 / 13

    準備ができました。左端の「ソース管理」を押します。まだ何も開いていないので、「リポジトリをクローンする」というボタンが出ます。

    VS Code

  10. 10 / 13

    「リポジトリをクローンする」を押します。上に、住所を入れる欄が出ます。

    クローン（clone）は「複製する」という意味です。GitHub にあるものが、そのまま手元にできます。

    VS Code

  11. 11 / 13

    さっきコピーした住所を貼り付けます。「リポジトリの URL」という行が出るので、そのまま Enter を押します。

    「GitHub から複製」を選ぶと、GitHub にサインインして自分のリポジトリを一覧から選ぶこともできます。

    VS Code

  12. 12 / 13

    保存先のフォルダーを選ぶと複製が始まり、終わると右下に「リポジトリを開きますか?」と出ます。

    フォルダーを選ぶ画面はパソコン側のもので、環境で見た目が違うため描いていません。書類フォルダーなど分かりやすい場所を選び、「リポジトリの宛先として選択」を押します。

    VS Code

  13. 13 / 13

    「開く」を押します。「グラフ」節に、第1章で作った最初の記録（Initial commit）が出れば、つながっています。

    main の横の雲の印は、GitHub 側がどの記録まで持っているかを表します。手元と同じ行にあるので、両方が同じ状態です。一番下の帯の main は、いま見ている枝の名前です。はじめてのときは GitHub へのサインインを求められることがあります。

    hello-github

AI エージェントで進める

  1. 01 / 16

    第1章で作ったリポジトリを、ブラウザで開きます。

    つなぐには、まずこのリポジトリの住所（URL）を控えます。ここだけはブラウザでの操作です。

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

  2. 02 / 16

    緑の Code を押します。下に小さな枠が出ます。

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

  3. 03 / 16

    HTTPS が選ばれていることを確かめて、右のコピーボタンを押します。

    サインインしていると SSH という選択肢も出ますが、はじめは HTTPS のままで構いません。

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

  4. 04 / 16

    ターミナルを開きます（第2章と同じ画面です）。AI エージェントもこの画面から動かします。

    ここでは Claude Code を例にします。この章の上の「AI エージェントで進める人の準備」で、Claude Code と GitHub CLI を先に入れておきます。

    ~

  5. 05 / 16

    まず GitHub CLI（gh）が入っているかを確かめます。gh version で始まる行が出れば入っています。

    GitHub CLI は、GitHub の操作をターミナルからできるようにする GitHub 公式の道具です。AI は自分でブラウザからログインできないので、この道具を通して GitHub を使います。

    うまくいかないとき：「command not found: gh」など、gh が見つからないという意味の文が出たら入っていません。この章の上の「準備」で入れて、ターミナルを開き直します。

    ~

  6. 06 / 16

    gh auth login と打って Enter。質問が4つ続きますが、どれも最初に選ばれているままでよいので、Enter を4回押します。

    使う場所（GitHub.com）→ やりとりの方法（HTTPS）→ Git にも同じログインを使う（Yes）→ ブラウザでログイン の順です。最後に8文字のコード（ワンタイムコード）が出て、自動でコピーされます。

    うまくいかないとき：矢印キーで別のものを選んでしまったら、↑↓ で戻してから Enter。進んでしまったら、Ctrl キーを押しながら C で止めて、gh auth login から打ち直します。

    ~

  7. 07 / 16

    もう一度 Enter を押すとブラウザが開きます。GitHub にサインインし、コードを貼り付けて進み、許可のボタンを押します。

    ブラウザの画面はサインインしないと見られないので描いていません。コードの欄には、コピーされた8文字を貼り付けます（Ctrl + V、Mac は command + V）。ターミナルに ✓ Logged in as と出れば完了です。

    うまくいかないとき：ブラウザが開かないときは、自分で github.com/login/device を開きます。コードは15分で使えなくなるので、過ぎたら Ctrl + C で止めて gh auth login からやり直します。

    ~

  8. 08 / 16

    作業する場所へ移動します。エージェントは、いるフォルダーを見て動きます。

    cd は「移動する」という意味です。関係のないフォルダーでエージェントを起動しないでください。

    ~/Documents

  9. 09 / 16

    claude と打ってエージェントを起動します。はじめてのときは、文字の見た目を選んだあと、ログインの方法を聞かれます。

    文字の見た目の画面は、そのまま Enter で構いません。Claude Code を使うには、Claude の有料プラン（Pro・Max・Team・Enterprise）か、Anthropic Console のアカウントが要ります。

    うまくいかないとき：「command not found: claude」など、claude が見つからないという意味の文が出たら、ターミナルを開き直してから打ちます。それでも出るなら、上の「準備」で入れ直します。

    ~/Documents

  10. 10 / 16

    1 のまま Enter を押すとブラウザが開きます。Claude にログインして許可します。ターミナルに戻り、注意書きを Enter で進めます。

    ブラウザが開かないときは、ターミナルに出る住所を c でコピーしてブラウザに貼り付けます。ブラウザにコードが出たら、それをコピーして「Paste code here if prompted >」に貼り付け、Enter を押します。

    うまくいかないとき：許可したのにターミナルが進まないときは、ブラウザに出たコードを貼り付けます。やり直すときは、ターミナルを閉じて開き直し、もう一度 claude と打ちます。

    ~/Documents

  11. 11 / 16

    ↓ キーを1回押して「Yes, I trust this folder」に合わせ、Enter を押します。下に文を打つ欄が出れば準備ができました。

    このフォルダーの中のファイルを、エージェントが読んだり直したりしてよいか、という確認です。自分の書類フォルダーなので、信頼して構いません。

    うまくいかないとき：最初は「No, exit」（やめる）が選ばれています。そのまま Enter を押すと終わってしまいます。そのときは、もう一度 claude と打てば同じ確認が出ます。

    ~/Documents

  12. 12 / 16

    やってほしいことを書いて送ります。住所はさっきコピーしたものを貼り付けます。

    「何をしたいか」と「どこに置きたいか」を書くのがコツです。コマンドは知らなくて構いません。

    ~/Documents

  13. 13 / 16

    エージェントは、実行する前に「何をするか」を見せて、許可を求めてきます。

    ここで必ず中身を読んでください。思っていたのと違うことをしようとしていたら、断って言い直します。

    ~/Documents

  14. 14 / 16

    内容に問題がなければ許可します。エージェントがコマンドを実行します。

    ~/Documents

  15. 15 / 16

    つながっているかを確かめてもらいます。自分で確かめる癖をつけてください。

    「やっておいて」で終わらせず、結果を見せてもらうと、何が起きたか分かるようになります。

    ~/Documents

  16. 16 / 16

    エージェントは確かめるコマンドを実行して、結果を読んで説明します。

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

    ~/Documents

うまくいかないとき（手順ごと）

上の手順の番号と合わせて見てください。

  1. 05

    まず GitHub CLI（gh）が入っているかを確かめます。gh version で始まる行が出れば入っています。

    「command not found: gh」など、gh が見つからないという意味の文が出たら入っていません。この章の上の「準備」で入れて、ターミナルを開き直します。

  2. 06

    gh auth login と打って Enter。質問が4つ続きますが、どれも最初に選ばれているままでよいので、Enter を4回押します。

    矢印キーで別のものを選んでしまったら、↑↓ で戻してから Enter。進んでしまったら、Ctrl キーを押しながら C で止めて、gh auth login から打ち直します。

  3. 07

    もう一度 Enter を押すとブラウザが開きます。GitHub にサインインし、コードを貼り付けて進み、許可のボタンを押します。

    ブラウザが開かないときは、自分で github.com/login/device を開きます。コードは15分で使えなくなるので、過ぎたら Ctrl + C で止めて gh auth login からやり直します。

  4. 09

    claude と打ってエージェントを起動します。はじめてのときは、文字の見た目を選んだあと、ログインの方法を聞かれます。

    「command not found: claude」など、claude が見つからないという意味の文が出たら、ターミナルを開き直してから打ちます。それでも出るなら、上の「準備」で入れ直します。

  5. 10

    1 のまま Enter を押すとブラウザが開きます。Claude にログインして許可します。ターミナルに戻り、注意書きを Enter で進めます。

    許可したのにターミナルが進まないときは、ブラウザに出たコードを貼り付けます。やり直すときは、ターミナルを閉じて開き直し、もう一度 claude と打ちます。

  6. 11

    ↓ キーを1回押して「Yes, I trust this folder」に合わせ、Enter を押します。下に文を打つ欄が出れば準備ができました。

    最初は「No, exit」（やめる）が選ばれています。そのまま Enter を押すと終わってしまいます。そのときは、もう一度 claude と打てば同じ確認が出ます。

GitHub にサインインを求められたら

公開のリポジトリを持ってくるだけなら、サインインは求められません。はじめて求められるのは、たいてい第5章で GitHub へ送るときです。 そのときに出る画面は、進め方とパソコンで違います。

ターミナル（Windows）
第2章で入れた Git に付いている Git Credential Manager が、Connect to GitHub という小さな画面を出します。Sign in with your browser を押すとブラウザが開くので、GitHub にサインインして許可します。一度済めば、次からは聞かれません。
ターミナル（Mac）
Mac の Git には、この画面を出す道具が入っていません。ターミナルで Username と Password を聞かれても、Password に GitHub のパスワードを入れても通りません （GitHub はパスワードでの送信を受け付けていません）。先に GitHub CLI を入れて gh auth login を済ませておくと、聞かれなくなります。 入れ方とログインの手順は、この章の AI エージェントの進め方（上の「準備」の 2 と、手順5〜7）と同じです。
VS Code
「拡張機能 '…' が GitHub を使用してサインインしようとしています。」と出たら「許可」を押します。ブラウザが開くので、GitHub にサインインして許可し、 VS Code に戻るかを聞かれたら戻るほうを選びます。

GitHub 公式のGit に GitHub の認証情報をキャッシュするでも、GitHub CLI か Git Credential Manager を使う方法が案内されています。

この章で覚えること

  1. 1

    cloneは、GitHub にあるものを手元へ複製することです。 一度やれば、そのフォルダーはずっと GitHub とつながったままになります。

  2. 2

    originは、つなぎ先につけた名前です。 これから先、GitHub のことは origin と呼びます。

  3. 3

    進め方が違っても、動いているのは同じ Git です。 ターミナルの git clone、VS Code の「リポジトリをクローンする」、 エージェントへの頼みごとは、どれも同じことをしています。

公式の説明は GitHub のリポジトリをクローンすると、VS Code のWorking with repositories and remotesにあります。

次の章変更を記録するファイルを直して、その時点を名前つきで残す。

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