目的

誰か他の人と一緒にリポジトリで共同作業を始めて、自身の変更についてフィードバックをもらいます。

ミッションの概要

これまでのところ、リポジトリで作業しているのはあなた 1 人だけです。しかし、もし同じリポジトリで他のメンバーと共同作業したくなったらどうでしょうか。実際にはメンバーと同じ部屋にいても宇宙の反対側にいても共同作業を行うことができるのです。

時間 オーディエンス 前提条件
15 分 Bitbucket Cloud を使用した経験がある程度ある方。経験がない場合は初心者用チュートリアルを先に試してください。 Bitbucket Cloud にサインアップ
なし Git GUI と Bitbucket Cloud の使用を希望される方 Sourcetree にサインアップ

ブランチとプルリクエストについて

複数の Bitbucket ユーザーがいるチームで作業する場合、メインのコードベースとは別に自分だけのコードセットで作業する必要があります。これはブランチを使うことで実現できます。ブランチとは自身のリポジトリ用の独立した開発ラインのことです。ブランチには自分専用の作業ディレクトリ、ステージングエリア、そしてプロジェクト履歴があります。ブランチを作成すると、そのブランチでコードの作業とコミットを行い、Bitbucket から更新をプルしてブランチを最新の状態に保ちながらすべての作業を Bitbucket にプッシュすることができます。

Bitbucket のブランチでコードに変更を加えたら、コードレビューを行うプルリクエストを作成します。チームメイトはあなたのコードにフィードバックコメントと質問を入れ、その後 (コードに問題がなくなれば) プルリクエストを承認します。十分な数の承認を得たら、プルリクエストをマージして、自身のブランチをメインコードにマージします。

リポジトリを作成してチームメイトを追加する

あなたはまだ Bitbucket を使い始めたばかりです。ここからはオリエンテーションを始めていきましょう。このオリエンテーションではウェルカムパッケージを更新したり、それに対する承認を得たりします。まずはコンテンツが入ったチームリポジトリを作成してメンバーにアクセス権を付与しましょう。

  1. グローバルサイドバーで [+] をクリックし、[作成] の下にある [リポジトリ] を選択します。

  2. 作成したチームがリポジトリの所有者になっていることを確認します。

  3. プロジェクト名リポジトリ名を入力します。何も思いつかない場合は、それぞれ「ウェルカムパッケージ」と「第一印象」ではどうでしょうか。

  4. [Include a README? (README を含めますか?)] ではプロジェクトとリポジトリの両方で [はい] を選択します。

  5. [バージョン管理システム] で作成するリポジトリのタイプを選択します。どれかわからない場合は、デフォルトのままにします。

  6. [リポジトリを作成する] をクリックすると、新たに作成したリポジトリのソースビューが表示されます。

  7. [ソース] で > [Add file (ファイルを追加)] を選択します。

  8. ファイルに「survey.html」という名前を付けたらこのコードをメインのテキストエリアにコピーアンドペーストします。

\<\!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>
  1. [コミット] をクリックし、ダイアログで再度コミットします。

リポジトリの状態は問題ないようですね。問題がないか自分でも確認してみましょう。[設定] をクリックして [User and groups access (ユーザーとグループのアクセス)] に移動すると、さきほど追加した breezycloud には開発者グループのリポジトリアクセスがあることがわかります。

クローンを作成して新しいブランチで変更を行う

一般的なチームの場合、ブランチを作成する前にリポジトリのクローンが作成されていることがほとんどです。自身のブランチを設定する前に、実際にこれをやってみましょう。

コマンドラインを使っている場合

ステップ 1. ローカルシステム上でリポジトリをクローンする

まずはローカルシステムに移動するところから作業を始めましょう。

  1. リポジトリの右上で [クローン] ボタンをクリックします。
    Bitbucket に [Clone this repository (このリポジトリのクローンを作成)] ダイアログが表示されます。デフォルトではクローンダイアログのプロトコルは使用している設定に応じて HTTPS または SSH になるため、デフォルトのプロトコルを変更する必要はありません。
  2. クローンコマンドをコピーします。

  3. ターミナルウィンドウで、リポジトリのクローンを作成するローカルディレクトリに移動します。

$ cd ~/<path_to_directory>
  1. 例えば、以下の 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. 左側のナビゲーションで [ブランチ] をクリックします。メインとなるブランチ master がすでに 1 つあることがわかります。

  2. 画面右上の [Create a branch (ブランチを作成)] をクリックします。

  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")
  1. git add を使用してローカルに変更を加えます。
$ git add survey.html
  1. git commit -m "自身のコミットメッセージ" を使用してローカルに変更をコミットします。
$ git commit -m "Answered questions"
[my-updates 7506040] Answered questions
 1 file changed, 3 insertions(+), 3 deletions(-)
  1. 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 master set up to track remote branch master from origin.
  1. Bitbucket でリポジトリの [ソース] ページをクリックします。ドロップダウンには両方のブランチが表示されているはずです。my-updates へのその他すべてのコミットもそのブランチに表示されます。

Sourcetree を使っている場合

ステップ 1. ローカルシステム上でリポジトリをクローンする

まずはローカルシステムに移動するところから作業を始めましょう。

  1. リポジトリのグローバルサイドバーで [+] をクリックして [Get to work (作業開始)] の下の [Clone this repository (このリポジトリのクローンを作成)] を選択します。
  2. [Sourcetree でクローン作成] ボタンをクリックします。
  3. [Clone New (クローンを新規作成)] ウィンドウで [Destination Path (クローン先パス)] を /first-impressions/ に更新します。
  4. [クローン] ボタンをクリックします。

処理の過程を確認するには、こちらのビデオの「リポジトリのクローンを作成する」の部分を見てください。

ステップ 2. ブランチを作成してローカルにプルする

これでリポジトリの準備がすべて完了したので、ここからはお楽しみの時間です。ブランチは Bitbucket 独自の考え方ではないため、ローカルにブランチを作成することができます。ただし、このチュートリアルでは Bitbucket からブランチを作成します。

  1. 左側のナビゲーションで [ブランチ] をクリックします。メインとなるブランチがすでに 1 つあることがわかります。

  2. 画面右上の [Create a branch (ブランチを作成)] をクリックします。

  3. ブランチ名を入力したら [作成] をクリックします。ブランチにどんな名前を付ければよいかわからない場合は、「my-updates」のような名前をつけてください。

  4. ブランチを作成したら、ローカルシステムからそのブランチをチェックアウトします。これを行うには [Sourcetree にチェックアウト] ボタンをクリックします。

  5. Sourcetree の [Checkout Existing (既存のものをチェックアウト)] ダイアログで [Checkout (チェックアウト)] をクリックします。

これで Bitbucket にできたブランチをローカルシステムにチェックアウトしたため、コードの別の行で作業とプッシュできるようになっています。

ステップ 3. ブランチに変更を加える

ここからはあなたが実際にリポジトリに変更を加える番です。ファイルのメンションの時と同じように、お好みにしてもいいですし、できるだけシンプルにしてもかまいません。CSS に変更を加えたり、たくさんのファイルを追加したり、スペースオペラを作り上げるのもいいでしょう。単純に質問に答えるだけでも問題ありません。

  1. Sourcetree のリポジトリから、[Show in Finder (ファインダーで表示)] ボタンをクリックします。
  2. survey.html ファイル (または自分で名前をつけたファイル) をテキストエディターで開きます。

  3. いくつか変更を加えたらファイルを保存して閉じます。

  4. Sourcetree を開き、リポジトリに [Uncommitted changes (コミットされていない変更)] があることを確認します。

  5. (Git のみ) ステージングエリアにファイルを追加します。

    1. [Uncommitted changes (コミットされていない変更)] の行を選択します。

    2. [Unstaged files (未ステージのファイル)] のリストで survey.html ファイル (およびコミットされていない変更があるすべてのファイル) の横にチェックマークを付けます。

    3. [Confirm Stage? (ステージを確定しますか?)] ダイアログで [OK] をクリックします。

  6. 画面上部の [コミット] ボタンをクリックしてファイルをコミットします。

  7. 回答済みの質問」のように、表示されたスペースにコミットメッセージを入力します。

  8. メッセージボックスの下にある [コミット] ボタンをクリックします。前のビューに戻ると、ファイルがコミットされているものの Bitbucket リポジトリにはプッシュされていないのがわかります。

  9. Sourcetree から [プッシュ] ボタンをクリックしてコミット済みの変更をプッシュします。

  10. 表示されたダイアログで [OK] をクリックしてコミットがあるブランチを Bitbucket にプッシュします。

  11. Bitbucket でリポジトリの [ソース] ページをクリックします。ドロップダウンに両方のブランチが表示されます。my-updates への他のすべてのコミットもそのブランチに表示されます。

プルリクエストを作成して変更をマージする

チームメイトにあなたの更新を知らせて承認を得るために、次はプルリクエストを作成します。コードレビュー用のスペース以外に、プルリクエストには元のリポジトリとあなたが加えた変更との比較結果 (diff とも呼ばれます) が表示されるため、準備ができ次第簡単にコードをマージすることができます。

ステップ 1. プルリクエストを作成する

プルリクエストを作成するにはブランチが必要ですが、すでにありますね。

  1. リポジトリのグローバルサイドバーで [+] をクリックし、[Get to work (作業開始)] の下にある [プルリクエストを作成] をクリックします。
    Bitbucket にリクエストフォームが表示されます。
  2. フォームに必要事項を記入します。
    1. [タイトル] には最後のコミットメッセージが自動的に入力されています。

    2. 必要に応じて [説明] に記入します。

    3. [レビュー担当者] フィールドから、チームメンバー breezycloud をレビュー担当者として追加します。

    すべて完了したらフォームは以下のようになります。
  3. [プルリクエストを作成] をクリックします。

Bitbucket でプルリクエストが開き、レビュー対象のプルリクエストの詳細が記載された E メール通知がレビュー担当者に送信されます。

ステップ 2. プルリクエストをマージする

慌てないでゆっくり進めましょう。画面上部に [マージ] ボタンがあるのに気付いたはずです。そのボタンをクリックする前に、変更の承認を得る必要があります。チームメイトには E メール通知が送信されるとともに、[あなたの作業] ダッシュボードの [Pull requests to review (レビュー対象のプルリクエスト)] にプルリクエストが表示されます。

プルリクエストでは、レビュアーは diff を表示してコメントを追加し、[承認] ボタンをクリックする前にディスカッションを開始します。

誰かがあなたのプルリクエストを承認すると、E メール通知が届きます。必要な数の承認を得たら (このチュートリアルでは 1 つだけです)、マージを実行できます。プルリクエストで [マージ] をクリックします。必要な操作はこれだけです。あなたのブランチとメインブランチがマージされた結果を確認したい場合は [コミット] をクリックしてコミットツリーを表示します。