GitHubハンズオン第2回〜共同開発編〜

本記事は、GitHubハンズオンの第2回の資料です！
第1回を読んでいることを前提としていますので、まだ読んでいない方は、先にそちらをお読みください。

GitHubハンズオンシリーズ

共同開発したい

第1回では、個人開発に焦点あてたハンズオンを実施しました。
第2回では、複数人での共同開発に焦点をあてます。

ハンズオン資料なので、 複数人で同時に作業することを想定した内容 になっています。
もし、 お一人でハンズオンに取り組む場合は、複数のローカルリポジトリを作って作業する ようにお願いします！

リポジトリをクローンする

今回は以下のリポジトリを使いたいと思います。

このリポジトリをPCにクローンしてください。
（クローンの手順を忘れてしまったら、第1回を読み返してください。）

こちらは私が作ったリポジトリでして、とくに危険なプログラム等は含まれておりませんが、気になる場合は、ご自身でリポジトリをご用意ください。
その場合、README.mdファイルをコミットしておいてください。

ブランチを作る

ブランチとは

ここまでは、編集履歴を1本の流れのように扱ってきました。

しかし、ブランチ機能を使うと、編集履歴の流れを分岐させることができます。

たとえば、アイデアAとアイデアBのどちらを採用すべきか悩むような場面はよくあります。そんなときに、ブランチは効果を発揮します。

以下の図のように、mainブランチから2つのブランチを作ります。

feature/try-idea-a : アイデアAを試すためのブランチ
feature/try-idea-b : アイデアBを試すためのブランチ

図は右に行くほど、新しいコミットになります。

それぞれ、実際にファイルを編集しますが、mainブランチに影響することはありません。

「実際に試してみたら、アイデアBがよさそう」となったら、 feature/try-idea-b ブランチを main ブランチに取り込みます。

この取り込み作業を マージ と呼びます。

作業ディレクトリとの関係は以下のようになります。

ブランチの内容を作業ディレクトリに反映させることを チェックアウト と呼びます。

図書館から本を借りることを、英語で check out と言います。
リポジトリ（貯蔵庫）からファイルを借りて、手元に置いてるイメージです。

ブランチを作る

Forkの上部にあるBranchをクリックすると、ダイアログが表示されます。

Branch name 欄に、 自分のユーザー名/practice を入力してください。
（お一人でハンズオンを進めている場合は、ローカルリポジトリ毎にブランチ名を変更してください。たとえば、ユーザー名の末尾に数字を付ける等です。）

Checkout after createにチェックを入れて、Create and Checkoutボタンをクリックしてください。

mainの隣に、自分の作ったブランチが表示されていれば成功です！

以後、このブランチを本書では practiceブランチと呼ぶことにします。

ファイルを作成する

作業ディレクトリを開いてください。
（開き方を忘れた場合は、第1回を読み返してください。）

README.mdの隣に新しいテキストファイルを作成し、ファイル名を自分の名前にしてください。

ブランチにコミットをする

ファイルが作成できたら、コミットしてください。
（コミットの方法を忘れた場合は、第1回を読み返してください。）

以下のように、practiceブランチにだけコミットが追加され、mainブランチには追加されていないことがわかります。

ここで、もしmainブランチにコミットが追加されている場合は、practiceブランチのチェックアウトができていませんので、チェックアウトしてください。

ブランチをPushする

画面上部の Push ボタンをクリックすると、ダイアログが出てきます。

そのまま Push ボタンをクリックすると、プッシュが開始されます。

以下のように、GitHubのアイコンがpracticeブランチに付いたら、Push成功です！

フェッチする

フェッチとは

リモートリポジトリにあるブランチを、PCのローカルリポジトリにコピーすることを フェッチ と呼びます。

fetch は、遠くにある物を取りに行って持って帰るという意味の英単語です。

フェッチする

画面上部の Fetch ボタンをクリックすると、ダイアログが表示されます。

Fetch all remotes にチェックを入れた状態で、 Fetch ボタンをクリックすると、フェッチが始まります。

以下のように、他のメンバーのpracticeブランチが表示されれば成功です！

他のメンバーのブランチをチェックアウトする

他のメンバーのブランチを右クリック > ブランチ名 > Checkout をクリックします。

ダイアログが表示されるので、そのまま Track をクリックします。

以下のように、他のメンバーのブランチに✓がつけば成功です。

作業ディレクトリを開くと、以下のように、他のメンバーのコミットした内容が復元されています。

マージする

mainブランチをチェックアウトする

mainブランチをチェックアウトしてください。
（チェックアウトの方法を忘れた場合は、本書を読み返してください。）

1人目がpracticeブランチをmainブランチにマージする

ここからは1人ずつ作業します。

1人目は、自分の名前のpracticeブランチを右クリックして Merge into ‘main’ をクリックしてください。

以下のようにダイアログが表示されます。

Merge Option を No Fast-Forward に変更してください。（以後の説明をわかりやすくするためです。）

Merge ボタンをクリックします。

以下のように、自分の名前のpracticeブランチがmainに合流したら成功です！

この作業をマージと呼びます。

マージできたら、mainブランチをプッシュしてください。

（プッシュの方法を忘れた場合は、第1回を読み返してください。）

他のメンバーがフェッチしてmainブランチを更新する

他のメンバーは、フェッチをして、最新のmainブランチを取得してください。

以下のような状態になっているはずです。

origin/main となっている箇所をダブルクリックすると、以下のようなダイアログが表示されます。

そのまま Checkout and Fast-Forward ボタンをクリックします。

すると、以下のように main ブランチが一番上に移動します。

他のメンバーがpracticeブランチをマージする

ここで、2人目の出番です。

自分の名前のpracticeブランチをmainブランチにマージして、プッシュしてください。

プッシュが終わったら、他のメンバーはフェッチをして、mainブランチを更新します。

この作業をハンズオンのメンバー全員分実施します。

最終的には以下のように、すべてのブランチがmainに合流します。

作業ディレクトリを見ると、以下のようにすべてのメンバーのファイルが表示されます！

このように、マージ機能によって、複数のメンバーの編集履歴を統合できます。

これにより、共同開発が可能になります。

競合について

もし、2人が同じファイルを編集してコミットしたらどうなるのでしょうか？

競合という現象が発生します。

競合を解決するためには、2つのブランチを見比べて、つじつまを合わせるための新しいコミットを追加する作業が必要になります。

非常に手間のかかる作業なので、競合はなるべく避けるべきです。

そのためにも、同じファイルを編集しないようにする工夫が必要なります。

以下は、競合を避けるための工夫です。

フォルダー構造を明確にする

フォルダー構造を明確にし、誰がどのフォルダーを触るのか、担当を決めることが大事です。

自分の担当外のファイルを編集する場合は声をかける

自分の担当外のファイルを編集したい場合は声をかけることで、競合を避けましょう。

声をかけるとは、Slack等で連絡してもいいですし、PullRequestというGitHubの機能を利用する場合もあります。

（PullRequestは今回のハンズオンでは扱いません）

こまめにフェッチする

mainブランチはメンバー全員が自分の作業を日々反映させるため、非常に速いスピードで変化します。

その変化に追いつくため、こまめなフェッチが大事です。

ブランチをこまかく作って、こまめにマージする

mainブランチから分岐してから、長い時間が経つと、競合が発生しやすくなります。

1つのブランチでたくさんの作業をせずに、細かい単位でブランチを作り、こまめにマージすると、競合を防ぐことができます。

さいごに

今回はここまでです！おつかれさまでした！

次回はブランチ運用編です！引き続きこちらも実践していただけると嬉しいです！