どぼじょのIT学習ブログ

高専卒土木女子がIT業界を目指してお勉強。

Git入門 part5 / Pull Request

本日はサルでもわかるGit入門 プルリクエスト編です!

目次

1.プルリクエス

本日学習するプルリクエスとは、Githubなどで利用できる機能で、ローカルリポジトリでの変更を他の開発者に通知する機能です💡
チームで開発をする時に、作業内容をレビュー担当者・マージ担当者などの関係者に通知し、確認してもらうといった使い方ができます😊
自分で作った成果品を、客先に納品する前に上司に確認してもらうようなイメージですね。
プルリクエストの利用により、最終的にマージされるソースコードの品質を高くすることができます。

プルリクエストは一覧で表示され、未完了のプルリクエストを漏れなく確認できます。
プルリクエスト上では、担当者同士でコメントのやりとりをして議論できます。更に、対象のブランチにプッシュされたコミットは、自動的にプルリクエスト上に反映されます。

プルリクエストを利用した開発プロセスは、以下のとおりです。

プロセス 開発者 レビュー・マージ担当者
1 作業対象のソースを clone または pull
2 作業用ブランチを作成
3 開発作業(機能追加や改修)
4 push
5 プルリクエストを作成
6 プルリクエストから変更を確認しレビュー
7-1 修正が必要なら開発者にフィードバック
(プロセス3へ戻る)
7-2 修正が不要ならマージ
7-3 プルリクエスト自体が不要ならクローズ

2.チュートリアル

早速チュートリアルに入ります🙂
JavaScriptで配列だけが準備されている状態のソースコードに、リストの内容をソートする処理を追加するという内容です。
BacklogとGitHubが選択できるので、Githubでやってみます!

2-1. サンプルリポジトリの準備

まずはGithubにログインし、新規リポジトリを作成します。

f:id:mistyrinth:20190116105712p:plain

作成したリポジトリの中に、以下のようなjsファイルを作成します。

f:id:mistyrinth:20190116134915p:plain

2-2. 開発ブランチでの修正

次に、作業するためのブランチを作成します💪
add-sort-funcというブランチを作成し、切り替えます。
f:id:mistyrinth:20190116140039p:plain

ブランチを切り替えたら、先程作成したjsファイルを修正します🖋
f:id:mistyrinth:20190116140230p:plain

コメントを追加してコミットします。
f:id:mistyrinth:20190116140351p:plain

2-3. プルリクエストの作成

リポジトリのトップに戻ると、直近 Push されたブランチが表示されるので、Compare & pull requestを実行します💡
f:id:mistyrinth:20190116140657p:plain

実行すると、次のような画面が表示されます。スクロールして画像2枚に分かれています🙂
f:id:mistyrinth:20190116140922p:plain
f:id:mistyrinth:20190116140932p:plain

上のほうにbase: mastercompare: add-sort-funcと書かれていますね😶
これは、baseがプルリクエストをマージする対象のブランチ、compareがプルリクエストをマージしてもらうブランチを指しています。
更に2枚目のキャプチャは、baseに対してcompareを比較し、10行追加されていることが分かりますね✨
次はCreate pull requestボタンを押します。
f:id:mistyrinth:20190116141620p:plain

これで他の担当者にレビューしてもらうことができるようになりました!🎉

2-4. レビューとマージ

プルリクエストが作成されたら、今度はレビュー担当者がFiles changedタブから変更内容を確認します。
f:id:mistyrinth:20190116141836p:plain

修正してほしい箇所があった場合、該当行の左端にある+からコメントを追加することができます😳便利〜!
f:id:mistyrinth:20190116142407p:plain

自作自演になってしまいますが、修正指示がきたので修正し、再度コミットを行います。
f:id:mistyrinth:20190116142736p:plain

2-5. 画面上でマージ

レビュー担当者は、再度レビューした結果、問題が無ければマージします👌
f:id:mistyrinth:20190116143155p:plain

Merge pull requestを押すと、以下のようにコメントを書くことができます。
f:id:mistyrinth:20190116143303p:plain

コメントは「修正ありがとうございました」などなんでもOKです😊
コメントを書いてConfirm mergeを押すと、マージされます😆✨
f:id:mistyrinth:20190116143412p:plain

3.マージできない場合は?

3-1. 競合の発生

練習のため、別の開発者との競合が発生して、マージできない状況を作ってみます🙁
開発者Aが先程の等価演算子==を使用し、開発者Bが厳密等価演算子===を使うとします。
条件は先程と同じなので、再度新規リポジトリを作成してmasterブランチにjsファイルを作成します🖋
f:id:mistyrinth:20190116144936p:plain

開発者Aが作業するためのadd-sort-func1というブランチと、開発者Bが作業するためのadd-sort-func2というブランチを作成します。
add-sort-func1には、等価演算子==を使ってコードを書き足します。
f:id:mistyrinth:20190116145149p:plain

先程のチュートリアルと同様に、Compare & pull requestからプルリクエストを作成し、修正が無いものとしてマージします!
f:id:mistyrinth:20190116145458p:plain

続いて、ブランチをadd-sort-func2に切り替えて、厳密等価演算子===を使ってコードを書き足します。
f:id:mistyrinth:20190116150044p:plain

今度はPull requestsメニューからNew pull requestボタンを押して、プルリクエストを作成します。
f:id:mistyrinth:20190116150232p:plain

base: masterのままcompare: add-sort-func2を選択すると、自動マージができないと言われました🤨
競合が発生しているからですね〜!
そのままConfirm pull requestを行い、プルリクエストの作成を実行すると、コンフリクトがあると言われます。
f:id:mistyrinth:20190116150652p:plain

InsightsNetworkから、ブランチの様子を見ることができます。
f:id:mistyrinth:20190116150828p:plain

3-2. 競合の解決

この競合を解決するには、Resolve conflictsボタンを押します🙂すると競合箇所が表示されます!!
f:id:mistyrinth:20190116151238p:plain

今回の場合は厳密等価演算子===を使用するように競合を解決して、Commit mergeボタンを押します。
f:id:mistyrinth:20190116151556p:plain

あとは通常通りにマージしていき、完了です👏✨
f:id:mistyrinth:20190116151722p:plain

f:id:mistyrinth:20190116151731p:plain

以上です〜!