Bitbucket Cloudでコードレビューについて学習する
目的
リポジトリを作成して任意のユーザーをレビュアーとしてプル リクエストに追加し、コードの共同作業を開始します。
免責事項：このチュートリアルの次のセクションでは、Bitbucket Cloud のコードでコラボレーションを行えるよう、プル・リクエストにレビュアー（またはチーム・メンバー）を追加する手順の概要を示しています。チーム・メイトと作業していない場合や、現時点でレビュアーを追加する必要がない場合は、次のチュートリアル「Bitbucket Cloud のブランチについて」に進みます。
ミッションの概要
これまでのところ、リポジトリとコードで作業しているのはあなた 1 人だけです。しかし、コードのレビューとフィードバックを受けたいと思ったらどうすればよいでしょう?プル リクエストにレビュアーを追加することで、実際にはメンバーと同じ部屋にいても宇宙に漂っていても共同作業を行えます。
所要時間
15 分
対象者
- Bitbucket Cloud を使用した経験がある程度ある方。そうでない場合は、初心者用チュートリアルのいずれかをお試しください。
- Bitbucket Cloud で Git GUI を使いたい方は
ブランチとプル リクエストについて
複数の Bitbucket ユーザーがいるチームで作業する場合、メインのコードベースとは別に自分だけのコードセットで作業する必要があります。これはブランチを使うことで実現できます。ブランチとは自身のリポジトリ用の独立した開発ラインのことです。ブランチには自分専用の作業ディレクトリ、ステージングエリア、そしてプロジェクト履歴があります。ブランチを作成すると、そのブランチでコードの作業とコミットを行い、Bitbucket から更新をプルしてブランチを最新の状態に保ちながらすべての作業を Bitbucket にプッシュすることができます。
Bitbucket のブランチでコードに変更を加えたら、コードレビューを行うプルリクエストを作成します。チームメイトはあなたのコードにフィードバックコメントと質問を入れ、その後 (コードに問題がなくなれば) プルリクエストを承認します。十分な数の承認を得たら、プルリクエストをマージして、自身のブランチをメインコードにマージします。
Git リポジトリを作成する
あなたは Bitbucket 宇宙ステーションに到着しました。次に、オリエンテーション プロセスを始めることになります。このプロセスでは、ようこそパッケージを更新したり、それらの承認を依頼したりします。
1. グローバル・サイドバーで + をクリックし、[作成] の下の [リポジトリ] を選択します。
2. 作成したチームがリポジトリの所有者になっていることを確認します。
3. [プロジェクト名] と [リポジトリ名] に任意の名前を入力します。名前が思いつかない場合、「Welcome package」や「First impressions」などをお勧めします。
4. [Include a README?] から、[Yes] オプションのいずれかを選択します。
5. [バージョン管理システム] から、作成したいリポジトリ・タイプのオプションを選択します。不明な場合はそのままにします。
6. [リポジトリの作成] をクリックすると、新しいリポジトリの [ソース] ビューに移動します。
7. [ソース] から、 > [ファイルを追加] を選択します。
8. ファイルに survey.html と名前を付けてから、このコードをコピーしてメインのテキスト領域に貼り付けます。
ソリューションを見る
Bitbucket Cloud での Git の使用方法についてのチュートリアルです。
関連資料
Bitbucket Cloud でのブランチの使用方法
\<\!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
body {
margin: auto;
width: 700px;
color: #FFFFFF;
font-family: Arial, sans-serif;
background-color: #172B4D;
}
body>h1 {
margin: 50px;
font-size: 50px;
text-align: center;
color: #0052CC;
}
</style>
</head>
<body>
<h1>Team up in space</h1>
<p>
Welcome to the team! You've made it this far so we know that you've got the potential to do great things. Because you're going to be collaborating with other awesome people, anything you add needs to be code reviewed and approved. That's just how a team works! You should have already created a branch and checked it out locally. If you haven't, go back to the tutorial and do that now. We'll be here.
</p>
<p>
Because you're on your own branch, you can go crazy. Spice up this file any way you like. Add more files to this repository if you see fit. If want to take it slow and are just here to learn about pull requests, you can use this opportunity to fill out our short questionaire.
</p>
<br>
<p>
<b>Question 1</b>: Have you used pull requests before?
</p>
<p>
<b>Answer 1</b>: **** Your answer here **** </p>
<p>
<b>Question 2</b>: Why do you want to learn about code review?
</p>
<p>
<b>Answer 2</b>: **** Your answer here **** </p>
<p>
<b>Question 3</b>: Who do you plan to work with on Bitbucket? </p>
<p>
<b>Answer 3</b>: **** Your answer here **** </p>
</body>
</html>9. [コミット] をクリックし、ダイアログからもう一度 [コミット] をクリックします。
リポジトリの更新が完了しました。確認してみましょう。
クローンを作成して新しいブランチで変更を行う
レビュアーを追加してマージ前にコードのレビューと承認を行うことを把握している場合、ブランチを作成する前にリポジトリをクローンすることがあります。そのため、このドキュメントでも、ブランチをセットアップする前にクローン操作について案内します。
コマンドラインを使っている場合
ステップ 1. ローカルシステム上でリポジトリをクローンする
1. リポジトリで、右上の [クローン] ボタンをクリックします。Bitbucket により、[このリポジトリをクローン] ダイアログが表示されます。既定では、クローン・ダイアログは設定に応じて、プロトコルを HTTPS または SSH に設定します。このため、既定プロトコルを変更する必要はありません。
2. クローン・コマンドをコピーします。
3. ターミナル・ウィンドウで、リポジトリをクローンするローカル・ディレクトリに移動します。
$ cd ~/<path_to_directory>4. Bitbucket からコピーしたコマンドを貼り付けます。以下に例を示します。
$ git clone https://breezy@bitbucket.org/powerstars/first-impressions.git
Cloning into 'first-impressions'...
Password for 'https://breezycloud@bitbucket.org':
remote: Counting objects: 6, done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 6 (delta 1), reused 0 (delta 0)
Unpacking objects: 100% (6/6), done.詳細については、クローンについての動画をご参照ください:
ステップ 2. ブランチを作成してローカルにプルする
これでリポジトリの準備がすべて完了したので、ここからはお楽しみの時間です。ローカルにブランチを作成するか、Bitbucket から作成します。このチュートリアルでは Bitbucket から作成しましょう。
1. 左側のナビゲーションから [ブランチ] をクリックします。プライマリ・ブランチである main がすでに表示されているはずです。
2. 右上の [ブランチの作成] をクリックします。
3. ブランチを作成したら、ローカル・システムからブランチをチェックアウトする必要があります。Bitbucket は、コピーしてコマンド・ラインに貼り付けることのできる、次のようなフェッチおよびチェックアウト・コマンドを提供します。
$ git fetch && git checkout my-updates
Password for 'https://breezycloud@bitbucket.org':
From https://bitbucket.org/planetbreezycloud/first-impressions
* [new branch] my-updates -> origin/my-updates
Branch 'my-updates' set up to track remote branch 'my-updates' from 'origin'.
Switched to a new branch 'my-updates'ローカルで新しいブランチに切り替えることができました。これにより、この個別のコード行で作業やプッシュを行うことができます。
ステップ 3. ブランチに変更を加える
次に、リポジトリに変更を加えます。ファイルのメンションと同様、好きなように変更することができます。CSS の変更、ファイルの追加、スペース オペラの作曲、単純に質問への回答など、あらゆる変更を行えます。
1. survey.html ファイル（または指定した名前のファイル）をテキスト・エディターで開きます。
2. 任意の変更を加え、ファイルを保存して閉じます。
3. ターミナル・ウィンドウでリポジトリ・ディレクトリから移動している場合、リポジトリ・ディレクトリに戻ります。git status を使用してリポジトリのステータスを表示します。変更した survey.html ファイルが表示されるはずです。他のファイルを追加または変更していた場合は、それらも表示されます。
$ git status
On branch my-updates
Your branch is up-to-date with 'origin/my-updates'.
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: survey.html
no changes added to commit (use "git add" and/or "git commit -a")4. git add: を使用してローカルに変更を追加します。
$ git add survey.html5. git commit -m 「自身のコミット・メッセージ」を使用して、ローカルに変更をコミットします。
$ git commit -m "Answered questions"
[my-updates 7506040] Answered questions
1 file changed, 3 insertions(+), 3 deletions(-)6. Bitbucket のブランチに変更をプッシュするには git push origin と入力し、パスワードを入力して変更をプッシュします。
$ git push origin my-updates
Password for 'https://breezycloud@bitbucket.org':
Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 350 bytes | 350.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0)
To https://bitbucket.org/planetbreezycloud/first-impressions.git
454ccaf..7506040 my-updates -> my-updates
Branch main set up to track remote branch main from origin.7. Bitbucket で、リポジトリの [ソース] ページをクリックします。ドロップダウンに両方のブランチが表示されます。my-updates に対するその他のコミットも、そのブランチに表示されます。
Sourcetree を使っている場合
ステップ 1. ローカルシステム上でリポジトリをクローンする
作業を開始できるよう、ローカル システム上にクローンしてみましょう。
1. リポジトリで、グローバル・サイドバーの + をクリックして、[作業を開始する] の下の [このリポジトリをクローン] を選択します。
2. [Sourcetree でクローン] ボタンをクリックします。
3. [新規クローン] ウィンドウで [宛先パス] を
4. [クローン] ボタンをクリックします。
処理の過程を確認するには、こちらのビデオの「リポジトリのクローンを作成する」の部分を見てください。
ステップ 2. ブランチを作成してローカルにプルする
リポジトリのセットアップが完了したので、次の手順に進みます。ブランチは Bitbucket のみの概念ではないため、ローカルでも作成することができます。ただし、このチュートリアルでは、ブランチを Bitbucket から作成します。
1. 左側のナビゲーションから [ブランチ] をクリックします。1 つのブランチ（main ブランチ）が表示されているはずです。
2. 右上の [ブランチの作成] をクリックします。
3. ブランチ名を入力して [作成] をクリックします。ブランチ名が不明な場合、my-updates などとします。
4. ブランチを作成したら、ローカル・システムからチェックアウトする必要があります。これを行うには、[Sourcetree でチェックアウト] ボタンをクリックします。
5. Sourcetree の [既存のものをチェックアウト] ダイアログから、[チェックアウト] をクリックします。
Bitbucket のブランチを取得してローカル システムにチェック アウトすることができました。これにより、この個別のコード行で作業やプッシュを行うことができます。
ステップ 3. ブランチに変更を加える
次に、リポジトリに変更を加えます。ファイルのメンションと同様、好きなように変更することができます。CSS の変更、ファイルの追加、スペース・オペラの作曲、単純に質問への回答など、あらゆる変更を行えます。
1. Sourcetree のリポジトリから [Finder で表示] ボタンをクリックします。
2. survey.html ファイル（または指定した名前のファイル）をテキスト・エディターで開きます。
3. 任意の変更を加え、ファイルを保存して閉じます。
4. Sourcetree を開くと、リポジトリにコミットされていない変更があることがわかります。
5. （Git のみ）ファイルをステージング領域に追加します。
1. [コミットされていない変更] 行を選択します。
2. ステージ化されていないファイルのリストで、survey.html ファイル（および変更がコミットされていないその他のファイル）の横にチェックマークを付けます。
3. [ステージの確定] ダイアログで、OK をクリックします。
6. 一番上の コミット ボタンをクリックしてファイルをコミットします。
7. 表示されたスペースにコミット・メッセージを入力します（例：回答済みの質問）。
8. メッセージ・ボックスの下の [コミット] ボタンをクリックします。ビューに切り替えると、ファイルがコミットされ、Bitbucket リポジトリにはプッシュされていないことがわかります。
9. Sourcetree で、[プッシュ] ボタンをクリックしてコミットされた変更をプッシュします。
10. 表示されたダイアログで [OK] をクリックして、コミットされたブランチを Bitbucket にプッシュします。
11. Bitbucket で、リポジトリの [ソース] ページをクリックします。ドロップダウンに両方のブランチが表示されます。my-updates に対するその他のコミットも、そのブランチに表示されます。
プルリクエストを作成して変更をマージする
マージ前にコードを確認・承認するレビュアーを追加するには、次にプル リクエストを作成します。プル リクエストはコード レビューの場所として機能するだけでなく、元のリポジトリに対する変更の比較 (diff) を示し、準備ができたらコードを簡単にマージできるようにします。
ステップ 1. プルリクエストを作成する
プルリクエストを作成するにはブランチが必要ですが、すでにありますね。
1. リポジトリから、グローバル サイドバーの + をクリックします。[作業を開始する] の下の [プル リクエストを作成] をクリックします。
Bitbucket により、リクエスト・フォームが表示されます。
2. フォームを次のとおり完成させます。
1. 最後のコミット・メッセージがタイトルとして自動的に入力されています。
2. ご希望の場合は [説明] を追加します。
(オプション - レビュアーを追加する) マージ前にコードの確認者または承認者が必要な場合、レビュアー フィールドに追加します。以下のプル リクエストの例では Breezy Cloud という名前のレビュアーが追加されています。
レビュアーをプル リクエストに追加するには、まずリポジトリへのアクセス権をユーザーに付与するために、そのレビュアーをグループに追加します。詳細と詳細な手順については、以下を参照してください。ユーザーとグループにリポジトリへのアクセスを付与する。注：プル・リクエストの作成後は、いつでもレビュアーを追加できます。
作業が完了すると、フォームは次のようになります。
3. [プル・リクエストを作成] をクリックします。
ステップ 2. プルリクエストをマージする
これは多くの場合、すぐに行うことはできません。画面上部には [マージ] ボタンがあります。変更が承認されたら、このボタンをクリックします。プル リクエストは、チームメイトが受信するメール通知以外に、レビュワーの [あなたの作業] ダッシュボードの [レビューが必要なプルリクエスト] にも表示されます。
![[あなたの作業] ダッシュボード](https://wac-cdn.atlassian.com/dam/jcr:5f6d727a-0e95-4970-b5ca-c51f1ab6c866/04%20pull_request_review%20kopiera.png?cdnVersion=2391)
プル リクエストでは、レビュワーは [承認] ボタンを押す前に、差分を表示し、コメントを追加してディスカッションを開始できます。
プル リクエストが承認されると、メール通知が届きます。必要な承認が得られると (この場合は 1 つ)、マージすることができます。プルリクエストから、[マージ] をクリックします。これで完了です。ブランチをメイン ブランチとマージしたときの結果を確認するには、[コミット] をクリックしてコミット ツリーを表示します。
この記事を共有する
次のトピック
おすすめコンテンツ
次のリソースをブックマークして、DevOps チームのタイプに関する詳細や、アトラシアンの DevOps についての継続的な更新をご覧ください。
Bitbucket ブログ
DevOps ラーニング パス
