Claude Codeなら楽々！GitHubの始め方・チーム開発の基本的な流れを解説します。
「このままコーダーで、3年後も食べていけるだろうか？」
AIが進化するほど、手を動かすだけの作業者の単価は下がり続けます。これからのWeb制作で生き残るのは、AIに指示を出す「司令塔」側に回った人だけです。
14日間で「作業者」から「AI Webディレクター」へ転身する集中プラン『10倍速 AIワークフロー マスタープラン』を公開中です。プロの個別メンタリング＆8日間の全額返金保証付き。
（先着限定、5月17日まで）
» 「司令塔」側に回る14日間プランを見る
Gitで更新管理をするうえで、セットと言っても良いくらいに使われるのがGitHubです。
GitHubはエンジニアの世界では欠かせないサービスですが、「画面が英語でとっつきにくい」「最初の設定が多くて面倒」という声をよく聞きます。気持ちはよくわかります。
でも、心配はいりません。
SSH鍵の設定も、リポジトリの接続も、プルリクエストのメッセージ作成も、わからないことはそのままClaudeに聞きながら進められます。 難しそうに見える手順も、一つひとつClaudeと一緒に確認していけば大丈夫です。
この記事を終える頃には、GitHubを使ったチーム開発の基本的な流れがひと通り身についているはずです。一緒にやってみましょう。
GitHubについて知ろう
前の記事では、Gitを使って自分のパソコンの中にセーブポイントを作る方法を覚えました。
でも、こんな不安が残っていませんか？
パソコンが壊れたら、コミットの記録ごと消えてしまうのでは…？
別のパソコンでの作業は、どうすればいい？
仕事で使うGitって、ここからどうしたら良いの？
誰かと一緒に作業したいけど、ファイルをどうやって共有する？
それを解決するのが GitHub（ギットハブ） です。
ローカルとリモートの違い
Webの世界では、自分のパソコンの中を ローカル、インターネット上の保存場所を リモート と呼びます。これはGitでも同じです。
前回は、自分のパソコンの中、つまりローカル環境でのみ作業してきました。
使用していたローカル環境のリポジトリは「ローカルリポジトリ」といいます。
対して、インターネット上に保存場所を作ると、それは「リモートリポジトリ」と呼ばれます。
GitHubは、このリモートリポジトリを提供してくれるサービスです。
ローカルで作ったコミットの記録を、GitHubに送って（push）同期しておくことができます。
逆に、GitHubの内容をローカルに取り込む（pull）こともできます。
【ローカル】自分のPC
├── テーマフォルダ
└── コミットの記録
↕ push / pull で同期
【リモート】GitHub（インターネット上）
├── テーマフォルダのコピー
└── コミットの記録のコピー
チームで制作を行っていく際などは、それぞれのメンバーがローカル環境で作業をします。
そして、ローカル環境のリポジトリに保存したデータをサーバー上のリポジトリに反映させ、全員で共有するという形を取ります。
GitHubなどのリモートリポジトリへの操作では、インターネット上にデータを送る・受け取るという操作が必要になります。
ですが、それ以外の操作はほぼ同じ。
前回の方法を使う部分も多いですし、それ以外のところもClaude Codeと協力しながら進めることができます。
この記事でできるようになること
- ローカルのコミット記録をGitHubに保存できる（push）
- GitHubの変更をローカルに取り込める（pull）
- どのパソコンからでも、続きの作業ができる
GitHubの準備をしよう
1. GitHubアカウントを作る
GitHubのアカウントをまだ持っていない場合は、作成しましょう。
すでにお持ちの方はサインアップして、次のステップに進んでください。
https://github.co.jp/にアクセスして、Sign up をクリックします。
画面の指示に従って、以下を入力してください。
プランの選択画面が出たら Free（無料プラン） を選んでください。
- メールアドレス
- パスワード
- ユーザー名（他の人と重複しないもの）
登録したメールアドレスに確認メールが届きます。
記載されたコードを入力して認証を完了させてください。
2. SSH鍵（SSH Key）を設定する
GitHubとローカルを安全に繋ぐために、SSH鍵を設定します。
SSH鍵とは、「このパソコンからのアクセスは本物だ」と証明するための鍵のようなものです。
南京錠（公開鍵）と鍵（秘密鍵）のペアで成り立っていて、南京錠をGitHubに預けておくことで、手元の鍵を持っているパソコンだけが接続できるようになります。
VSCodeを開いて、Claude Codeに以下のように話しかけてください。
- 「詳しくない」「丁寧に」「やさしく」など注文を付けると、親切に手順を解説してくれます。
- 最下行のOSは、ご自身のものに合わせてください。
GitHubと接続するためのSSH鍵を設定したいです。
ターミナル操作に詳しくないので、丁寧に手順を教えてください。
使用しているOSはWindowsです。
このデモはWindowsで作っているので、Windows版の設定手順が出力されました。
手順を見ながら、順番に操作していきます。
もし、途中でエラーが出たら何の操作をした時、どんなエラーが出たかをClaudeCodeに送信すると助けてくれます。
例えば、以下はPowerShellを管理者として実行しなかった場合に出るエラーです。
こんな感じに、的確に回答をくれます。
ターミナル側の操作をするとき「ガイドに書いてある通りにやってもエラーが出る」などで、詰まってしまうことが多いのですが、その場でClaudeCodeに相談できるのが心強いですよね。
Claudeの指示に従って設定を進めましょう。
ブラウザ側操作でGitHubに公開鍵を登録し、接続テストのコード ssh -T git@github.comを打って接続を試します。
Hi ユーザー名! You've successfully authenticated. という表示が出れば成功です。
3. GitHubでリポジトリを作る
GitHubでリポジトリを作る場合は、あらかじめサイト上でリポジトリを作成します。
最初に、データを置いておく場所を確保するイメージです。
GitHubにログインした状態で、右上の 「+」ボタン をクリックして 「New repository」 を選択してください。
リポジトリの作成画面が開きます。
今回の場合は、以下の２ヶ所を設定してください。
① Repository name（リポジトリ名）
このリポジトリの名前を設定します。
お好きに設定できますが、テーマ名やサイト名などを使用することが多いです。
今回の場合は練習用なので、それがわかる名称にしても良いですね。
【例】
- wpedbase
- edbase
- skillhubEdbase
- lessonEdbase など
② Choose visibility
ここはリポジトリを公開するかの設定です。
- Public：誰でも見られる状態
- Private：自分だけが見られる状態
練習用なのでPrivateにしておきましょう。
その下にある項目は、今回はすべてチェックを入れずに進めます。
入力できたら 「Create repository」 をクリックしてください。
↓
上記のような画面が表示されたら、リポジトリの作成は完了です。
この画面に表示されている内容はセットアップに使いますので、ブラウザタブはそのままにしておいてください。
4. GitHubのリポジトリと接続
GitHubにリポジトリを作っただけでは、まだローカルとは繋がっていません。
「このフォルダの送り先はここです」という設定が必要です。
その送り先が、リポジトリ作成完了後の画面、ひときわ目立つ部分に表示されているURLです。
SSHタブを選択した状態で表示されるURLをコピーしておいてください。
git@github.com:ユーザー名/リポジトリ名.git
ここからはVSCode側からの操作になります。
基本的にはリポジトリ作成完了後の画面にあるコマンド、今回の場合は …or push an existing repository from the command line を順に実行していけば良いのですが、ちょっとわかりにくいですよね。
ローカルで既にリポジトリを作っていたら「mainじゃなくてmasterだけど…」などもあります。
ですので、あなたの環境・状態に合わせて、Claude Codeに案内してもらいながら進めましょう。
VSCodeのターミナルを開いて、Claude Codeに以下のように送信します。
「URLは...」という部分は、先ほどコピーしたあなたのURLに変更してください。
GitHub側でリポジトリを作りました。
URLは `git@github.com:ユーザー名/リポジトリ名.git` です。
ローカルのGitリポジトリをこのリモートリポジトリに繋げてください。
GitHubのリポジトリへの接続までは確実にやってくれます。
リポジトリ接続の次は、 push（プッシュ）という、ローカルのコミット記録をGitHubに送る操作が必要になります。
上のプロンプトで一気にpushまで行ってくれる場合は確認が出ます。
Yesを選択して、送信してもらいましょう。
そこまでやってくれなかった…という方は、追加でメッセージを送信すると実行してくれます。
接続したGitHubにpushもお願いします。
なお、初めてpushするときは、ブラウザが自動で開いてGitHubの認証画面が表示される場合があります。
「Authorize」 と書かれたボタンをクリックして認証を完了させてください。
pushが完了したら、Claude Codeが報告してくれます。
GitHubのリポジトリページをブラウザで開く、開いたままの方はリロードしてみてください。
ローカルにあったファイルとコミットの記録がそのまま反映されているはずです。
これでリモートリポジトの作成と、データの共有は完了です。
ローカルとリモートを同期しよう
pushでローカルの記録をGitHubに送れるようになりました。
次は逆方向、GitHubの内容をローカルに取り込む操作を覚えましょう。
1. GitHubの変更をローカルに取り込む（pull）
「別のパソコンで作業した内容を、手元のパソコンに取り込む」という場面を想像してください。
- 自宅のPCで作業した変更を、翌日会社のPCに反映させたい
- チームメンバーが修正した箇所を、自分のPCにも反映させたい
こんな場合に、pullという方法を使用して、GitHubにあるファイルをローカルに取り込みます。
自分のパソコンにファイルをダウンロードしてくる、同期させる、というイメージです。
ただ、練習用のリポジトリだと操作しているのは自分だけ。
ですので、今回はGitHubのWeb画面で直接ファイルを編集することで、その状況を疑似的に再現してみましょう。
1-1. GitHubのWeb画面でファイルを編集する
GitHubのリポジトリページを開いて、header.php をクリックしてください。
ファイルの内容が表示されます。
右上の鉛筆アイコン（Edit this file）、もしくは、そのまま編集しようとすると表示されるSwitch on the editer.というテキストから、編集モードを開きます。
ファイルを少しだけ修正してみましょう。
下図ではh1の文言を変えました。
編集できたら、画面右上の 「Commit changes」 ボタンをクリックします。
コミットメッセージの入力画面が出ます。
自動的に内容が設定されるので、そのまま 「Commit changes」 を押して確定してください。
↓
これでGitHub側ではコミットが追加され、ファイルの編集が反映されました。
1-2. ローカルに取り込む（pull）
ローカル側、自分のパソコンのファイルをVSCodeに戻って見てみてください。
こちらはまだ古い状態のまま、更新されていません。
リモート（Github）にある情報を取り込んで、自分のファイルを最新の状態にする必要があります。
ターミナルから直接操作する場合は、以下のように入力します。
git pull origin main
自分で手打ちせず、Claude Codeに頼んでも操作してくれます。
以下のような指示をチャットで送信するだけです。
GitHubにある最新の状態をローカルに取り込んでください。
↓
完了のメッセージが表示されたら、GitHub上で編集したファイルを開いてみましょう。 更新した部分が反映されていたら成功です。
◆ pullする習慣をつける
今は自分一人の操作ですので、pullの重要性はあまり感じないかもしれません。
しかし、複数のパソコンで作業するときや、将来誰かと共同作業するときは、このGitHubにあるファイルに、自分のファイルを合わせる（pull）がとても重要になってきます。
自分のパソコンにあるファイルを更新しないまま作業を進めると、GitHubにあるファイルとは食い違った状態になり、マージするのが大変になります。ファイルの食い違いを起こりにくくするために、ブランチを切る前・作業前にpullする習慣をつけておのがおすすめです。
ローカルの変更をGitHubに送る → push
GitHubの変更をローカルに取り込む → pull
2. ブランチをpushしてみる
前の記事でローカルのブランチ操作を覚えましたが、その流れがそのままGitHubでも使えます。
ただし、お仕事などでGitHub（りモードリポジトリ）を使う場合は、前回のように「更新した。問題ないからマージ」と自分のパソコンの中で一気に行うことは、ほぼありません。ブランチをGitHubに上げて、確認してからマージするという流れになります。この操作を実際に行ってみましょう。
2-1. 作業ブランチの作成
まず、作業をするための新しいブランチを作ります。
ターミナルで以下のコマンドを使って操作するか、Claude Codeにお願いしましょう。
git checkout -b 作りたいブランチ名
Claude Codeにお願いする場合は、以下のようなメッセージを送るとスムーズです。
feature/companyという名前でブランチを作って切り替えてください。
2-2. 更新作業
自分のいるブランチが切り替わっていることを確認したら、更新作業を行います。
素材では会社概要ページ page-company.php の更新をHTMLで作っているので、それを反映させます。
main要素の中身を差し替えましょう。
自分で行っても、ClaudeCodeに頼んでも、どちらでも構いません。
page-company.phpに、company.htmlで修正した内容を反映させたい。
main要素の中身を移し替えてください。
2-3. commit と push
ブラウザ表示を確認して、問題なければ更新をGitに記録しましょう。
ファイルに更新を示す M が付いているのを確認して、ClaudeCodeに依頼します。
コミットとpushはそれぞれ別々にも頼めますが、以下のように書くと一気にやってくれます。
今の変更をコミットして、ブランチをGitHubにpushしてください。
コミットメッセージは「会社概要ページ更新」でお願いします。
GitHubにpushまで行ってくれました。 次のステップで行うプルリクエストの作成リンクまで作ってくれていますが…とりあえず、push出来ているか確認してみましょう。
GitHubのリポジトリページを開いてみます。
pushしてすぐだと、上部に黄色い枠で「Compare & pull request」ボタンが表示されます。
表示されていない場合は、左上のプルダウンから追加したブランチへの移動ができます。
3. プルリクエストを作る
GitHubにブランチをpushしたら、本線に取り込む必要があります。
本線、mainもしくはmasterブランチへのマージです。
GitHubではブランチの変更をmainに取り込む操作をする際に、プルリクエスト（Pull Request／PR） という仕組みを使います。
ローカルでのマージと違うのは、変更内容をチームメンバーに確認してもらってからマージできる点です。仕事でGitHubを使う場合、作業したブランチをpush→プルリクエストを作る→レビューしてもらう→マージ、という流れが基本になります。
feature/〇〇ブランチ ─────────────▶ レビュー ─────▶ mainにマージ
↑
プルリクエストを作る
3-1. プルリクエストを考えてもらう
さきほどpushした feature/company ブランチで、プルリクエストを作ってみましょう。
以下のようにClaude Codeにお願いしてみます。
feature/companyブランチのプルリクエストをGitHubに作成してください。
簡潔に、タイトルと説明文も考えてください。
Claudeがブランチの変更内容を読んで、タイトルと説明文を提案してくれます。
内容を確認して、問題なければ 1.Yes で進めましょう。
以前からGitHubを使っている方以外は、以下のように「ghコマンドが使えないから、手動でやって」という表示が出ると思います。
ghコマンドとは、GitHubの操作をターミナルから行うための公式ツールです。
これをインストールしておくと、VSCode上でClaudeに頼むだけでプルリクエストの作成まで完結します。
インストールせずに、ClaudeCodeが提案しているように、GitHub上でプルリクエストを作ることもできます。
以下では両方の方法を紹介します。
ご自身のやりやすい方法で進めてください。
3-2. 【A】Github上で手動でPRを作成する
ClaudeCodeが出力してくれているリンク先、もしくはGithub上に表示されている「Compare & pull request」ボタンからプルリクエストの作成画面を開きます。
タイトルと説明はClaudeCodeが考えてくれているので、それをコピーアンドペーストします。
右下にある「Create pull request」ボタンを押して、プルリクエストを追加してください。
3-2. 【B】ghコマンドをインストールして進める
ghコマンドのインストール方法はOSによって異なるため、Claude Codeに案内してもらいましょう。
ghコマンドをインストールしたいです。手順を教えてください。
例えば、Windowsなら以下のようにGitHub CLIの導入方法を教えてくれます。
出力されている手順通りに進めてください。
上手くいかないところ・わからないところもClaudeCodeに聞くと教えてくれます。
導入の最後の方で、ブラウザを開いてGitHubへの認証を行います。
ターミナルに表示され認証コードを貼り付け、画面の指示に従って認証を完了させてください。
認証が完了したら、VSCodeに戻って、Claudeにプルリクエスト作成を実行してもらいます。
ブラウザ認証まで出来ました。
先ほどのPR作成コマンドを実行してくれますか？
プルリクエストの作成が出来たようです。
GitHubを開くと、プルリクエストが追加されていることが確認できます。
3-3. プルリクエストの確認とマージ
作業分担について
チームで制作を行っている場合は、この操作を自分で行わないケースもあります。
どんな役割分けがあり、誰が何を行うかはプロジェクトごとのルールがありますので、参加時に確認してください。
作成されたプルリクエストを開いて確認してみましょう。
大まかには以下のような構成になっています。
- タイトル：最上部、大きめの文字がこのプルリクエストのタイトルです。
- 説明文：Conversationタブの上部にあるのが、このプルリクエストで行われている作業の説明です。
- Commitsタブ：このブランチで行ったコミットの一覧
- Files changedタブ：変更されたファイルの差分（緑が追加、赤が削除）
レビュアー・管理者がいる場合は、この画面でコードを確認し、コメントを追加してくれます。
コメントを確認して、次の作業を行いましょう。
プルリクエストの内容に問題ない場合は、管理者の方でマージしてくれるケースと、コメントで「マージして良いですよ」と言われるケースがあります。 自分でマージをする場合は、以下の操作を行います。
プルリクエスト画面下部の 「Merge pull request」 ボタンをクリックしてください。
↓
「Confirm merge」 をクリックするとマージが完了し、Merged表示に変わります。
作業に使ったブランチが不要になった場合は、Delete branchボタンで削除できます。
ちなみに、【B】ghコマンドをインストールして進めるで ghコマンド（GitHub CLI）を導入済の場合は、GitHubを開かずにVSCode上から操作することも可能です。
以下のようにClaudeCodeに「してほしいこと」を送信すると、プルリクエストの概要をまとめてくれたり、マージを実行してくれますよ。
プルリクエストの一覧を確認してください。
○○のPRの内容・差分の確認をして、レビューしてください。
○○のPRをマージしてください。
3-4. ローカルを最新の状態にする
GitHubでマージしても、ローカルのmainはまだ古い状態のまま。
[1-2. ローカルに取り込む（pull）]と全く同じ状態です。
再びmainをpullして、ローカル環境側を最新の状態に揃えましょう。
ClaudeCodeにお願いする場合は、以下のように送信すればOK。
GitHubのmainブランチをローカルに取り込んでください。
これで再び、ローカルとGitHubが同じ状態になりました。
まとめ
今回は、GitHubを使ったGit操作の基本を一通り実行しました。
ここまで覚えた操作は、仕事でGitHubを使うときの基本的な流れになります。
この流れが身につけば、チーム開発の現場でもすぐに動けるようになります。
- 作業前にpullして最新の状態にする
- ブランチを切る
- ファイルの修正・追加を行う
- コミットする
- GitHubにpushする
- プルリクエストを作る
- レビューしてもらう
- mainにマージする
- ローカルをpullして最新にする
そして、1～9までの流れすべてでClaudeCodeは作業を助けてくれます。
「ドキュメントに書かれていない謎メッセージが出た」
「ブランチをpushしたら競合（conflict）が出てマージできない」
など問題が発生したときにも助けを求められますし、地味に面倒なコミットメッセージやPRの文章作成の代行もしてくれます。便利！
ClaudeCodeがあると、安心感が桁違いにアップします。
苦手意識を持つことが多い作業も苦痛を感じずに進められますので、ClaudeCodeに相談しながら取り組んでみてください。
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
5月17日まで