tanaka101

身につくスキル

  • -Git の基本操作（init, add, commit, diff, restore）を実践できる
  • -GitHub にリポジトリを作成してコードを公開できる
  • -ブランチとプルリクエストを使った開発フローを体験する
進捗: 0 / 8

プルリクエストを出す

GitHub 上でプルリクエストを作成し、チーム開発で使われるマージの流れを体験しましょう。

ローカルマージとの違い

前のレッスンでは、ブランチを作って git merge で直接 main にマージし、GitHub にプッシュするところまで体験しました。引き続き同じリポジトリを使って進めます。

一人で開発しているうちはこれで問題ありませんが、チーム開発では マージする前に他の人に確認してもらう のが一般的です。そのための仕組みが プルリクエスト（PR） です。

プルリクエストの概念を復習したい場合は、ガイドの「プルリクエストとは何か」を確認してください。

このレッスンでは、以下の流れを体験します。

ブランチを作る→変更してコミット→GitHub に push→PR を作成→マージ→に pull

ブランチを作成する

自己紹介ページに「スキルセクション」を追加します。前回と同じく、専用のブランチを作りましょう。

git switch -c add-skills
Switched to a new branch 'add-skills'

スキルセクションを追加する

index.html を編集して、趣味セクションの </ul> と <footer> の間にスキルセクションを追加しましょう。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自己紹介</title>
</head>
<body>
    <h1>自己紹介</h1>
    <p>名前: あなたの名前</p>
    <h2>プロフィール</h2>
    <ul>
        <li>好きな食べ物: ラーメン</li>
        <li>住んでいるところ: 東京</li>
        <li>ひとこと: よろしくお願いします！</li>
    </ul>
    <h2>趣味</h2>
    <ul>
        <li>映画鑑賞</li>
        <li>散歩</li>
        <li>プログラミング</li>
    </ul>
    <h2>スキル</h2>
    <ul>
        <li>HTML / CSS</li>
        <li>JavaScript（勉強中）</li>
        <li>Git / GitHub</li>
    </ul>
    <footer>
        <p>GitHub で学習中！</p>
    </footer>
</body>
</html>

保存したら、コミットしましょう。

git add index.html
git commit -m "スキルセクションを追加"

ブランチを GitHub にプッシュする

前のレッスンでは main にマージしてから git push しましたが、今回は ブランチのまま GitHub にプッシュします。

git push -u origin add-skills
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 400 bytes | 400.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0)
To https://github.com/あなたのユーザー名/my-profile.git
 * [new branch]      add-skills -> add-skills
branch 'add-skills' set up to track 'origin/add-skills'.

* [new branch] と表示されていれば、GitHub 上にブランチが作られています。

レッスン04で git push -u origin main を実行したときと同じ構造です。

部分意味
git pushのコミットをに送る
-uこのブランチの送り先を記憶する（初回のみ）
origin送り先の名
add-skills送るブランチ名

main 以外のブランチも、同じようにプッシュできます。

GitHub でプルリクエストを作成する

ブラウザで GitHub のリポジトリページを開きましょう。

1. プルリクエストの作成画面を開く

『Compare & pull request』 ボタンをクリックしてプルリクエストを作成しましょう。

プルリクエストイメージ1

ボタンが見つからない場合は、 『Pull requestsタブ』 より以下のように設定して手動で作成しましょう。

プルリクエストイメージ2

2. プルリクエストの内容を記入する

プルリクエストイメージ3
  • マージする方向が正しいか確認
  • どんな内容のプルリクか分かるタイトルを付ける
  • プルリクの詳細をコメントに残す
  • 『Create pull request』をクリック

3. プルリクエストの中身を確認する

PR が作成されると、以下のような情報が表示されます。

  • Commits: このブランチで行ったコミットの一覧
  • Files changed: 変更されたファイルの差分

Files changed タブをクリックすると、index.html にスキルセクションが追加された差分が表示されます。チーム開発では、ここを見て他のメンバーがコードをレビューします。

プルリクエストイメージ4

今回は一人での作業なのでレビューはスキップしますが、 実際のチーム開発では 他のメンバーがここで変更内容を確認 したり、コメントを付けて修正をしたりします。

チーム開発では権限がある人だけがマージを実行できる場合も多いです。
個人開発でもしっかりコメントを残すことで、修正や追加したコードの意図を正確に思い出せるので無駄ではありません。

GitHub 上でマージする

PR の内容に問題がなければ、マージしましょう。

PR のページで 「Merge pull request」 ボタンをクリックし、続けて 「Confirm merge」 をクリックします。

Pull request successfully merged and closed

これで、GitHub 上の main ブランチにスキルセクションが取り込まれました。

マージ後、「Delete branch」 ボタンが表示されます。マージ済みのブランチは不要なのでクリックして削除しておきましょう。前のレッスンで git branch -d をしたのと同じことを、GitHub 上で行っています。

に変更を取り込む

GitHub 上で main にマージしましたが、の main はまだ古い状態です。GitHub の変更をに取り込みましょう。

まず main ブランチに切り替えます。

git switch main

GitHub から最新の変更を取得します。

git pull
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 1 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (1/1), done.
From https://github.com/あなたのユーザー名/my-profile
   abc9012..def3456  main       -> origin/main
Updating abc9012..def3456
Fast-forward
 index.html | 6 ++++++
 1 file changed, 6 insertions(+)

index.html を開いて、スキルセクションが追加されていることを確認してみましょう。

git pull は、GitHub（）の変更をに取り込むコマンドです。git push の逆の操作と考えるとわかりやすいです。

コマンド方向やること
git push → の変更を GitHub に送る
git pull → GitHub の変更をに取り込む

チーム開発では、他のメンバーがマージした変更を取り込むために git pull を頻繁に使います。

実は git pull は内部的に git fetch（の情報を取得）+ git merge（に統合） を一度に行っています。「まずの状態だけ確認して、マージは後で判断したい」という場合は git fetch を単独で使うこともできます。最初のうちは git pull だけで十分です。

最後に、のブランチも削除しておきましょう。

git branch -d add-skills

ローカルマージとプルリクエストの比較

レッスン05とレッスン06の流れを比較してみましょう。

レッスン05: ローカルマージレッスン06: プルリクエスト
マージする場所自分のPC（）GitHub（ブラウザ）
マージ前の確認自分だけチーム全員が差分を確認できる
マージ方法git mergeGitHub の「Merge pull request」
マージ後git push で GitHub に反映git pull で に反映

どちらも「ブランチを作って作業し、main に統合する」点は同じですが、プルリクエストを使うとマージ前にチームで確認できるのが大きな違いです。

Gitを使うチーム開発ならプルリクエストはほぼ100%利用することになります。とても重要な技術です！

このレッスンのまとめ

ポイント
  • git push -u origin ブランチ名 でブランチを GitHub にプッシュできる
  • GitHub 上でプルリクエストを作成し、変更内容を確認してからマージできる
  • git pull で GitHub の変更をに取り込む
  • マージ済みのブランチは GitHub 上でもでも削除する
  • チーム開発ではプルリクエスト経由でマージするのが一般的

次のステップ

次のレッスンでは、Git を使っていると避けられない コンフリクト（衝突） を体験します。 解消方法を学べばしっかり対応できるようになります！