はじめに
この記事では、GitLabの少し発展した使い方を学習していきます。GitLabで最も目玉の機能である「マージリクエスト」を使ったコードレビューの手法等もここで説明します。GitLabをただのソースコードの共有リポジトリとしてだけではなく、チーム開発の中核を担うシステムとして採用することで、開発効率を飛躍的に向上させることができます。それでは、早速学んでいきましょう。
→基礎編のURL
レッスン１．ブランチの管理
まずは、GitLab上でブランチを管理する方法を学びます。Gitクライアントが無くてもブラウザ上で簡単にブランチの作成や削除等ができます。ブラウザでできるため、スマートフォンやタブレットでも操作が可能になります。
ブランチの作り方
まず、GitLab上でブランチを作ってみましょう。
リポジトリのトップページを開いて、リポジトリ名の右側にある「＋」ボタンを押します。そこから、「新規ブランチ」を選択してください。
次にブランチ名を決めて入力します。例として「test_branch」と付けました。作成するベースとなるブランチは「master」のままで問題ありません。入力が完了したら「Create branch」を押してください。
画面が自動的にリポジトリトップに戻ります。先ほど「master」となっていた部分が「test_branch」となっていれば作成完了です。
ブランチの切り替え方
続いて、ブランチの切り替え方です。ブランチを切り替えることで、チェックアウト不要でどのブランチのコミットログも確認することができます。先ほどブランチを作成したところなので、現在は「test_branch」に切り替わった状態かと思います。今回はここから「master」に切り替えてみましょう。
先ほどブランチ名を確認したバーの部分を押して、「master」を選びます。ブランチが多数存在する場合は、検索バーに名前の頭文字等を入れると検索もできます。
先ほど同様に「master」に切り替わったことを確認できれば、これで切り替えは完了です。
ブランチの消し方
マージ済みのブランチが残ってしまったり、テストで一時的に使っていたが不要になったりした等でブランチを消したい場合は以下の操作で消します。
先ほど作った「test_branch」を削除してみましょう。まずはブランチの一覧を確認したいので、左のツリーから「ブランチ」を選びます。
現在リポジトリに存在するブランチの一覧がここに表示されます。削除したいブランチの右側にあるゴミ箱マークを押します
確認のポップアップが出た場合、OKを押します。
先ほどのブランチの一覧に戻りますので、消えていれば完了です。
これでブランチの操作は一通り学びました。
レッスン２．コードレビューとマージ
続いて、GitLabを使ったコードレビューの方法を学んでいきます。この機能を使うことにより、開発にレビューのプロセスを組み込むことができるので、品質向上が見込めます。このレビューのことを、GitLabでは「マージリクエスト」と呼びます。一方GitHubでは「プルリクエスト」と呼ぶように、ホスティングサービスによって呼び名が違うのですが、同じ操作を指します。
では、マージリクエストを使ったコードレビューの方法を、実際に操作を通して学んでみましょう。最初にレビューを受ける側の操作方法を書いていきます。そのあとにレビューする人の手順を分けて学んでいきます。
事前準備
まずは練習用のファイルを準備します。基礎編から進んできている方は既に「test.html」というファイルがリポジトリに入っているかと思いますので、それをそのまま使ってください。
この記事からスタートした方は何も入っていない状態かと思いますので、リポジトリ上に「test.html」というファイルを作り、下記のコードを入れておいてください。GitのクライアントでプッシュしてもOKです。
<HTML>
<HEAD>
<TITLE>サンプルページ</TITLE>
</HEAD>
<BODY>
<H1>これはGitのテストです</H1>
<OL>
<LI>その１</LI>
<LI>その２</LI>
<LI>その３</LI>
</OL>
</BODY>
</HTML>
ファイル一覧が以下の状態になったら、準備完了です。README.mdは最初から入っているファイルなので、無くても問題ありません。
レビューを受ける人の手順
レビューを受ける際には、まずマージに用いるブランチを作成します。折角ですので、今回はGitLabから行ってみましょう。「merge_test」という名前でブランチを作りました。
ブランチができると、自動でブランチ側に切り替わっているかと思いますので、そのままファイルを編集しましょう。編集もGitLab上で行えますので、「test.html」をクリックします。
ファイルの中身が表示されるので、「編集」をクリックします。
テキストエディタの画面になるので、コードを編集します。その４を追加してみてください。
編集が終わったら、ページを下のほうにスクロールすると、コミットメッセージを入力する欄があるので、今回の変更内容を入力します。終わったら、緑色のボタン「Commimt changes」を押すと、変更内容が反映されます。
ページが自動的にリポジトリトップに戻り「マージリクエストを作成」というボタンが表示されていますので、押します。
レビューのタイトルと、説明を書く欄がありますので、レビューに必要な情報を入れていきます。これらの内容は後でも変更可能です。レビュワーが変更内容を把握できるように書いておくようにしましょう。
通常は「Asignee」のところでレビュワーを選択します。今回はお試しなので何も選択しなくてよいです。マージオプションは２つともチェックを入れてください。MilestoneやLabelsはGitLab上でバグトラッキングを行う場合に使うので、参加するプロジェクトのルールに従って設定してください。
入力が完了したら、「Submit マージリクエスト」を押します。
マージリクエストがスタートすると、コードレビューの画面になります。まずは変更内容を確認してみましょう。
変更内容が確認できました。
Git側の設定によっては改行コードが変わってしまい、変更が見にくくなることがあります。その場合は、下記のギアマークから「空白の変更を表示する」のチェックを外してください。
変更内容の説明を入れたい場合、行にカーソルを当てると吹き出しのアイコンが出ますので、そこを押します。
すると、コメント欄が表示されますので、ここでコメントを残せます。記入が終わったら、「コメントする」を押してください。
レビューが終わったら、マージに移ります。概要のタブに戻ってください。
ページ中ほどのマージボタンの付近にスクロールしてください。スカッシュマージを選択していると、以下のようにコミットメッセージを編集できます。これがマージのコミットログになるので、必要に応じて変更内容を記入します。終わったらマージボタンを押してください。
マージが完了し、ブランチは削除されました。
では、本当にブランチが消えたか確認してみましょう。左のツリーから、「ブランチ」を選択します。
先ほど作った「merge_test」ブランチがないので、正しく消えていることがわかります。では、続いて正しくマージがされたかを変更内容を見て確認してみましょう。そのまま「master」を押してください。
ファイル一覧から「test.html」を選択します。
コードを見ると、その４が追加されていることがわかります。正しくマージされていました。
これで、レビューを受ける人の手順としては完了となります。
レビューする人の手順
レビューを依頼された場合メール等でレビュー依頼の連絡が飛んできますので、URLをクリックすると、先ほど学んだマージリクエストのページにジャンプします。
「変更」タブに移動し、気になる点があったらコメントを残します。
確認事項を記載したら、「レビューの開始」を押します。「コメントする」との違いは、「レビューの開始」の場合はすべて解決しないとマージができない設定ができることです。（プロジェクトの設定次第です）
気になる点すべてにコメントを付けたら、画面下部に「レビューを完了する」というボタンを押し、「レビューを送信」を選ぶと、レビューを受ける人に連絡が行き確認を促します。
レビューが開始すると、スレッド化されてコメントのやり取りができます。確認事項が解決したら「スレッドを解決します。」を押して解決にします。このボタンは誰でも押せるのですが、質問者が納得した段階で閉じるのが一般的です。この辺りはチームのルールに従ってください。
最初から問題が無かった、あるいは全てのレビューがパス出来たら、その旨コメント等で知らせます。これでマージリクエストの手順は完了です。
マージを承認制にする機能もあるのですが、あくまでオプションの機能です。一方コメントで行えば、どんな設定になっていても対応できるので、こちらを紹介させていただきました。
レッスン３．競合の解消
ここでは競合をGitLab上で解消する方法を学びます。簡単な競合であれば、GitLab上で解消ができます。
まずは意図的に競合を発生させてみます。今回もまたマージ用のブランチを作成しましょう。「conflict_test」という名前でブランチを作りました。
では、続いて「conflict_test」の「test.html」を編集します。変更が分かりやすいよう、下記のように1行だけコードを変更しました。
編集が終わったら、変更内容をコミットします。
次に、ブランチを作成した後に「master」に他のメンバーが変更をマージしたと想定します。「master」側の「test.html」を編集します。そのまま、同じページですぐ上にあるブランチ名の部分から切り替えができます。
では、こちらには違った変更を入れてみましょう。こちらも分かりやすい変更内容にしておきます。
コミットメッセージには変更内容を書いておきます。終わったら、コミットしてください。
では、マージリクエストを開始しましょう。画面上部の「＋」ボタンを押して、「新規マージリクエスト」を選びます。
今回は「conflict_test」から「master」にマージしますので、マージ元とマージ先のブランチを確認してください。選択が終わったら「Compare branches and continue」を押してください。
タイトルや説明を入れて、オプションを選択してマージリクエストをスタートします。
マージリクエストがスタートすると、競合が発生しているためマージボタンが押せない状態になっていることが確認できるかと思います。この状態ではマージができませんので、早速競合を解決していきます。「競合を解決する」ボタンを押しましょう。
競合の編集画面になります。「master」で変更した内容と、「conflict_test」で変更した内容が同時に表示されていると思います。もし、どちらか一方の変更内容を採用する場合、右側のボタンを押すと、押した方が採用されます。ですが、ほとんどの場合は、この２つの変更をどちらも入れておきたいと思いますので、次の手順でマージします。
コードウィンドウの上部にある「Edit inline」を押します。
コードの編集画面になるので、競合のマークを消すなりして２つの変更が正しく入るように編集します。
コードの編集が終わったら、画面下部のコミットメッセージ欄に入力しコミットします。
コミットが終わると競合が解消され、マージボタンが緑色になっているので、これでマージができます。そのままマージボタンを押しましょう。
これでマージが完了しました。
続いて、マージ内容を確認します。リポジトリトップに移動し、「test.html」の内容を確認しましょう。２つのブランチの内容が正しくマージされていれば完了です。
競合解消の手順は以上になります。
さいごに
いかがでしたでしょうか？今回はGitLabの発展編ということで学習してきましたが、マージリクエストの便利さを感じることができたかと思います。これによって活発にコードの議論ができるので、チーム開発をより便利にしてくれますし、コミュニケーションの改善にも役立ちます。
また、ここまで学べば、担当者としてスムーズに開発を進めることができるだけではなく、管理者としてもGitLab上でリポジトリのメンテナンスを行えるかと思います。GitLabを是非活用してください。
最後までお読みいただきありがとうございました。
No Comments