GitHubを使って基本的な開発フローに沿った操作をしてみる | SkillhubAI(スキルハブエーアイ)

GitHubを使って基本的な開発フローに沿った操作をしてみる

pushでローカルの記録をGitHubに送れるようになりました。
次は逆方向、GitHubの内容をローカルに取り込む操作を覚えましょう。

1. GitHubの変更をローカルに取り込む(pull)

「別のパソコンで作業した内容を、手元のパソコンに取り込む」という場面を想像してください。

  • 自宅のPCで作業した変更を、翌日会社のPCに反映させたい
  • チームメンバーが修正した箇所を、自分のPCにも反映させたい

こんな場合に、pullという方法を使用して、GitHubにあるファイルをローカルに取り込みます。
自分のパソコンにファイルをダウンロードしてくる、同期させる、というイメージです。

ただ、練習用のリポジトリだと操作しているのは自分だけ。
ですので、今回はGitHubのWeb画面で直接ファイルを編集することで、その状況を疑似的に再現してみましょう。

1-1. GitHubのWeb画面でファイルを編集する

GitHubのリポジトリページを開いて、header.php をクリックしてください。
file

ファイルの内容が表示されます。
右上の鉛筆アイコン(Edit this file)、もしくは、そのまま編集しようとすると表示されるSwitch on the editer.というテキストから、編集モードを開きます。 file

ファイルを少しだけ修正してみましょう。
下図ではh1の文言を変えました。
編集できたら、画面右上の 「Commit changes」 ボタンをクリックします。   file

コミットメッセージの入力画面が出ます。
自動的に内容が設定されるので、そのまま 「Commit changes」 を押して確定してください。
file
 ↓
file

これでGitHub側ではコミットが追加され、ファイルの編集が反映されました。

1-2. ローカルに取り込む(pull)

ローカル側、自分のパソコンのファイルをVSCodeに戻って見てみてください。
こちらはまだ古い状態のまま、更新されていません。
file

リモート(Github)にある情報を取り込んで、自分のファイルを最新の状態にする必要があります。

ターミナルから直接操作する場合は、以下のように入力します。

git pull origin main

自分で手打ちせず、Claude Codeに頼んでも操作してくれます。
以下のような指示をチャットで送信するだけです。

GitHubにある最新の状態をローカルに取り込んでください。

file
 ↓
file

完了のメッセージが表示されたら、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という名前でブランチを作って切り替えてください。

file

2-2. 更新作業

自分のいるブランチが切り替わっていることを確認したら、更新作業を行います。

素材では会社概要ページ page-company.php の更新をHTMLで作っているので、それを反映させます。
main要素の中身を差し替えましょう。

自分で行っても、ClaudeCodeに頼んでも、どちらでも構いません。

page-company.phpに、company.htmlで修正した内容を反映させたい。  
main要素の中身を移し替えてください。

2-3. commit と push

ブラウザ表示を確認して、問題なければ更新をGitに記録しましょう。
file
file

ファイルに更新を示す M が付いているのを確認して、ClaudeCodeに依頼します。
コミットとpushはそれぞれ別々にも頼めますが、以下のように書くと一気にやってくれます。

今の変更をコミットして、ブランチをGitHubにpushしてください。
コミットメッセージは「会社概要ページ更新」でお願いします。

file

GitHubにpushまで行ってくれました。 次のステップで行うプルリクエストの作成リンクまで作ってくれていますが…とりあえず、push出来ているか確認してみましょう。

GitHubのリポジトリページを開いてみます。 pushしてすぐだと、上部に黄色い枠で「Compare & pull request」ボタンが表示されます。
表示されていない場合は、左上のプルダウンから追加したブランチへの移動ができます。
file

3. プルリクエストを作る

GitHubにブランチをpushしたら、本線に取り込む必要があります。
本線、mainもしくはmasterブランチへのマージです。

GitHubではブランチの変更をmainに取り込む操作をする際に、プルリクエスト(Pull Request/PR) という仕組みを使います。

ローカルでのマージと違うのは、変更内容をチームメンバーに確認してもらってからマージできる点です。仕事でGitHubを使う場合、作業したブランチをpush→プルリクエストを作る→レビューしてもらう→マージ、という流れが基本になります。

feature/〇〇ブランチ ─────────────▶ レビュー ─────▶ mainにマージ
                              ↑
                        プルリクエストを作る

3-1. プルリクエストを考えてもらう

さきほどpushした feature/company ブランチで、プルリクエストを作ってみましょう。
以下のようにClaude Codeにお願いしてみます。

feature/companyブランチのプルリクエストをGitHubに作成してください。
簡潔に、タイトルと説明文も考えてください。

file

Claudeがブランチの変更内容を読んで、タイトルと説明文を提案してくれます。
内容を確認して、問題なければ 1.Yes で進めましょう。
file

以前からGitHubを使っている方以外は、以下のように「ghコマンドが使えないから、手動でやって」という表示が出ると思います。
file

ghコマンドとは、GitHubの操作をターミナルから行うための公式ツールです。
これをインストールしておくと、VSCode上でClaudeに頼むだけでプルリクエストの作成まで完結します。
インストールせずに、ClaudeCodeが提案しているように、GitHub上でプルリクエストを作ることもできます。

以下では両方の方法を紹介します。
ご自身のやりやすい方法で進めてください。

3-2. 【A】Github上で手動でPRを作成する

ClaudeCodeが出力してくれているリンク先、もしくはGithub上に表示されている「Compare & pull request」ボタンからプルリクエストの作成画面を開きます。
file

タイトルと説明はClaudeCodeが考えてくれているので、それをコピーアンドペーストします。
右下にある「Create pull request」ボタンを押して、プルリクエストを追加してください。 file

3-2. 【B】ghコマンドをインストールして進める

ghコマンドのインストール方法はOSによって異なるため、Claude Codeに案内してもらいましょう。

ghコマンドをインストールしたいです。手順を教えてください。

例えば、Windowsなら以下のようにGitHub CLIの導入方法を教えてくれます。
file

出力されている手順通りに進めてください。
上手くいかないところ・わからないところもClaudeCodeに聞くと教えてくれます。
file

導入の最後の方で、ブラウザを開いてGitHubへの認証を行います。
ターミナルに表示され認証コードを貼り付け、画面の指示に従って認証を完了させてください。
file

認証が完了したら、VSCodeに戻って、Claudeにプルリクエスト作成を実行してもらいます。

ブラウザ認証まで出来ました。
先ほどのPR作成コマンドを実行してくれますか?

file

プルリクエストの作成が出来たようです。
GitHubを開くと、プルリクエストが追加されていることが確認できます。
file

3-3. プルリクエストの確認・マージ

作業分担について

チームで制作を行っている場合は、この操作を自分で行わないケースもあります。

どんな役割分けがあり、誰が何を行うかはプロジェクトごとのルールがありますので、参加時に確認してください。

作成されたプルリクエストを開いて確認してみましょう。
file

大まかには以下のような構成になっています。

  • タイトル:最上部、大きめの文字がこのプルリクエストのタイトルです。
  • 説明文:Conversationタブの上部にあるのが、このプルリクエストで行われている作業の説明です。
  • Commitsタブ:このブランチで行ったコミットの一覧
  • Files changedタブ:変更されたファイルの差分(緑が追加、赤が削除)

レビュアー・管理者がいる場合は、この画面でコードを確認し、コメントを追加してくれます。
コメントを確認して、次の作業を行いましょう。

プルリクエストの内容に問題ない場合は、管理者の方でマージしてくれるケースと、コメントで「マージして良いですよ」と言われるケースがあります。 自分でマージをする場合は、以下の操作を行います。

プルリクエスト画面下部の 「Merge pull request」 ボタンをクリックしてください。 file
 ↓
file

「Confirm merge」 をクリックするとマージが完了し、Merged表示に変わります。
作業に使ったブランチが不要になった場合は、Delete branchボタンで削除できます。 file

ちなみに、【B】ghコマンドをインストールして進めるghコマンド(GitHub CLI)を導入済の場合は、GitHubを開かずにVSCode上から操作することも可能です。

以下のようにClaudeCodeに「してほしいこと」を送信すると、プルリクエストの概要をまとめてくれたり、マージを実行してくれますよ。

プルリクエストの一覧を確認してください。
○○のPRの内容・差分の確認をして、レビューしてください。
○○のPRをマージしてください。

3-4. マージをローカルにも反映する

GitHubでマージしても、ローカルのmainはまだ古い状態のまま。
[1-2. ローカルに取り込む(pull)]と全く同じ状態です。

再びmainをpullして、ローカル環境側を最新の状態に揃えましょう。

ClaudeCodeにお願いする場合は、以下のように送信すればOK。

GitHubのmainブランチをローカルに取り込んでください。

file

これで再び、ローカルとGitHubが同じ状態になりました。

まとめ

今回は、GitHubを使ったGit操作の基本を一通り実行しました。

ここまで覚えた操作は、仕事でGitHubを使うときの基本的な流れになります。
この流れが身につけば、チーム開発の現場でもすぐに動けるようになります。

  1. 作業前にpullして最新の状態にする
  2. ブランチを切る
  3. ファイルの修正・追加を行う
  4. コミットする
  5. GitHubにpushする
  6. プルリクエストを作る
  7. レビューしてもらう
  8. mainにマージする
  9. ローカルをpullして最新にする

そして、1~9までの流れすべてでClaudeCodeは作業を助けてくれます。

「ドキュメントに書かれていない謎メッセージが出た」
「ブランチをpushしたら競合(conflict)が出てマージできない」
など問題が発生したときにも助けを求められますし、地味に面倒なコミットメッセージやPRの文章作成の代行もしてくれます。便利!

ClaudeCodeがあると、安心感が桁違いにアップします。
苦手意識を持つことが多い作業も苦痛を感じずに進められますので、ClaudeCodeに相談しながら取り組んでみてください。