tanaka's Programming Memo

プログラミングについてのメモ。

GitHubとGitHub Desktopを使った小規模チーム開発

はじめに

GitHubでチーム開発をする場合、通常は以下の流れになると思います。

  1. オリジナルのGitHubリポジトリから、自分のGitHubにフォーク(fork)
  2. フォークしたリポジトリをローカルPCにクローン
  3. 変更を加える
  4. 変更点をオリジナルに取り込んでもらいたいときは、プルリクエスト(Pull Request)をオリジナルに発行
  5. オリジナルのコミッターがプルリクエストを結合

この手順は複雑なため、学校などで学び始めたばかりの人たちには敷居が高いかも知れません。そこで、ここではもう少し簡易にチーム開発を行う手順を紹介します。

プルリクエストによるチーム開発に進む準備体操として活用してみてください。なお、先に進みたい方は以下の書籍に丁寧に手順が記載されています。

GitHub実践入門 ~Pull Requestによる開発の変革 (WEB+DB PRESS plus)

GitHub実践入門 ~Pull Requestによる開発の変革 (WEB+DB PRESS plus)

環境

以下のような環境で紹介します。他の環境でも似たようなものはあるので、読み替えてみてください。

  • Windows7(64bit)
  • GitHub Desktop
    • GitHubが公式に配布しているアプリケーションです。機能は限られていますが、GitHubリポジトリを簡単に操作することができます。ここで紹介する流れはこのアプリケーションで全て実行できます
  • WinMerge
    • 別の人が同じ行を変更していた場合、衝突(コンフリクト:Conflict)が発生します。これを解決するときに便利に利用できるアプリケーションです。

必要なアプリケーションのインストール

GitHub Desktop

このアプリケーションはWindowsMacLinuxの全てに用意されています。一部画面は違う可能性はありますが基本機能は同じです。
次々に機能が追加されているので最新版で利用してください。

  1. GitHub Desktopのページを開く
  2. [Download GitHub Desktop]ボタンを押す
    • f:id:am1tanaka:20151106115848p:plain
  3. 実行する
    • f:id:am1tanaka:20151106120136p:plain
  4. インストールが完了して、GitHub Desktopが機能するまで待つ
  5. 起動したらGitHubへのログイン情報を入力して[OK]を押す
    • f:id:am1tanaka:20151106120637p:plain
  6. 次のページは登録情報確認なので、問題がなければ[Continue]で先に進める
  7. 以下のようなページが表示されたらインストール完了

f:id:am1tanaka:20151106120756p:plain

すでにGitを利用している場合は、リポジトリが検索されて、読み込むかを聞かれます。必要に応じて選択して読み込んでください。ここでの作業を進める上では特に読み込む必要はありません。

WinMerge

WinWergeはWindows用のアプリケーションです。MacLinuxを利用している場合は、他のマージツールやDiffツールを探すか、コードエディターで手動で対応してください。

  1. WinMerge 日本語版を開く
  2. インストール先のPCの環境に合わせて32bitか64bitを選択する(32bitか64bitかは、[スタート]>[コンピュータ]を右クリック>[プロパティ]を開いて、[システムの種類]欄で確認できます)
    • f:id:am1tanaka:20151106121415p:plain
  3. [ファイルを開く]を選択
    • f:id:am1tanaka:20151106125751p:plain
  4. しばらく待つとフォルダーが開くので、以下のファイルをダブルクリックしてインストールを開始する
    • f:id:am1tanaka:20151106130110p:plain
  5. あとはすべて[次へ]や[インストール]で進める

WinMergeが起動したら完了です。閉じて結構です。

プロジェクト用のリポジトリの作成

環境が整ったので、プロジェクト用のリポジトリを作成します。今回はリポジトリを共有しますので、チーム全員がリポジトリにプッシュできるように、協力者(Collaborator)の設定も必要になります。

チームメンバー全員に、GitHubのアカウントが必要です。まだ作成していない人がいたらSign upして、届いたメールのVerify emailを押しておいてください。

リポジトリGitHubで作成

以下の作業は、チームの一人がやります。

  1. GitHubを開く
  2. 画面右上の[+]を押す
    • f:id:am1tanaka:20151106144523p:plain
  3. [New repository]を選択
  4. 作成するプロジェクトに合わせて項目を設定して、[Create repository]ボタンを押す
    • f:id:am1tanaka:20151106194611p:plain
    1. [Repository name]欄にリポジトリ名を半角英数で入力
    2. [Description]欄にリポジトリの概要を入力。日本語利用可能
      • 省略可能だが、何か入力しておいた方がよいでしょう
    3. [Initialize this repository with a README]にチェックを入れる
      • リポジトリが空だと何かと不便なのでREADMEは作成しておいた方がいいです
    4. [Add .gitignore]で、管理に含めないファイルやフォルダーを指定できる。今回は特に目的がないので選択せず
      • 様々なパターンが用意されています。UnityやVisual Studioなどのプロジェクトを作成する場合は選択しておくと楽です
    5. [Add a license]欄で、ライセンスファイルを選択できる。ここでは自由度が高くシンプルなオープンソース用のライセンスである[MIT License]を選択している

協力者を登録

作成したリポジトリにチームメンバーを協力者として登録して、プッシュ(push)する権限を持たせます。

引き続き、一人が作業を続けます。

  1. 画面右から[Settings]欄を選択
    • f:id:am1tanaka:20151106195559p:plain
  2. 画面左から[Collaborators]を選択
    • f:id:am1tanaka:20151106195734p:plain
  3. [Confirm password to continue]が表示されたら、GitHubのパスワードを入力して[Confirm password]を押す
    • f:id:am1tanaka:20151106195946p:plain
  4. [Search by username, full name or email address]欄にチームメンバーのGitHubアカウントかメールアドレスを入力して、[Add collaborator]を押す。これをチームメンバー全員に行う
    • f:id:am1tanaka:20151106200445p:plain

以上で、このリポジトリがチームメンバーのGitHubの[Your repository]欄に表示されるようになり、変更をプッシュ(push)できるようになります。

リポジトリの準備が整ったので、開発の流れの紹介に移ります。

開発の流れ

簡単なプロジェクトで日常的に発生するGitとGitHubの操作を挙げると以下の5つになります。

  1. GitHubからリポジトリをクローン
  2. 作業用のブランチを作成
  3. 作業用ブランチでの作業とコミット、プッシュ
  4. 目的の作業が完了したらmasterブランチに変更をマージ
  5. 他の人がmasterに加えた変更を作業用ブランチに取り込む

一つ一つ紹介していきます。

1. GitHubからリポジトリをクローン

作業を開始するために、GitHubで作成したリポジトリをローカルのPCにダウンロードします。この作業をクローン(Clone)といいます。

f:id:am1tanaka:20151107223100p:plain

  1. [GitHub Desktop]が起動していなければ、デスクトップにアイコンが作成されているのでダブルクリックして起動する
    • f:id:am1tanaka:20151106203326p:plain
  2. 画面左上の[+]をクリックして、[Clone]を選択、クローンするリポジトリを選択する
    • f:id:am1tanaka:20151106203847p:plain
  3. 画面下のf:id:am1tanaka:20151106204028p:plainを押す
  4. フォルダーの参照画面が表示されるので、プロジェクトフォルダーをダウンロードしたい先のフォルダーを選択して[OK]
    • 差し支えなければデフォルト(ドキュメントのGitHubフォルダー)の場所でよい
  5. クローンが開始するので、終了するまで待つ

GitHub Desktop左の[GitHub]のリスト下にリポジトリ名が表示されれば完了です。
f:id:am1tanaka:20151106204925p:plain

クローンしたフォルダーを開くには、上記のリポジトリ名を右クリックして、[Open in Explorer]を選択します。

演習

  • 練習用にチームごとに1つ、リポジトリを作成してください。リポジトリ名は任意
  • 作成したリポジトリに、チームメンバーを協力者(Collaborator)として全員登録してください

2. 作業用のブランチを作成

Gitでは、作業ごとに独立してバージョン管理を行うことができます。そのために利用するのがブランチ(枝)です。最初はmasterブランチというブランチが1つ存在します。これは実装が完了したコードをまとめるためのブランチで、常に動作が可能な状態のブランチです。

f:id:am1tanaka:20151106210459p:plain

  • GitHub Desktopの上の方にある[master▼]というのが現在のブランチ名です。クリックして開くと、最初は[master]ブランチしかないことが確認できます。

masterブランチ上で実装作業は行いません。作業を行う際には、masterブランチを元に作業のためのブランチを新しく作り、そのブランチ上で行います。このようなブランチのことをトピックブランチと呼びます。

チームメンバーが各自、自分用のトピックブランチで作業をすることで、他のメンバーの作業に影響を受けることなく、自分の作業に集中することができます。自分が実装している機能が完成して、テストも完了したら、masterブランチにマージを行います。それが完了したら、そのトピックブランチは役目を終えます。新しく別の機能を実装する作業を始める時は、再びmasterブランチからトピックブランチを作成して作業を開始することになります。

それでは、トピックブランチの作成方法を紹介します。

f:id:am1tanaka:20151107223135p:plain

  1. GitHub Desktopのブランチ名の左にあるY字のアイコン(f:id:am1tanaka:20151106211024p:plain)をクリック
  2. 半角英数で作業内容を表すブランチ名を入力して[Create new branch]を押す(複数メンバーで練習する場合は、各自の名前などにして重複のない名前にしてください)
    • f:id:am1tanaka:20151106212107p:plain
  3. 以下、masterから新しくadd-hello-commentというブランチが作成されて、現在add-hello-commentブランチ上にいることを表している
    • f:id:am1tanaka:20151106212415p:plain

ここまでの作業は、ローカルPC上での変更であり、まだGitHubには反映されていません。確認してみましょう。

  1. GitHub Desktopの左に列挙されているリポジトリー名を右クリック
    • f:id:am1tanaka:20151106204925p:plain
  2. [View on GitHub]を選択すると、WebブラウザーGitHub上のリポジトリを見ることができる
  3. 画面真ん中あたりの[Branch: master▼]をクリックすると、GitHubに存在するブランチを見ることができる。masterブランチしかないことを確認しよう
    • f:id:am1tanaka:20151106213035p:plain

以上の通り、ローカルPCとGitHubリポジトリは独立しています。プッシュ(push)やプル(pull)を行うことで両者を同じ状態に同期(sync)させます。

同期をさせない限り、ローカルPCとGitHubは別物です。例えばローカルPCでの作業が混乱して最初からやり直したくなったら、ローカルPC上の作業フォルダーを削除して、GitHubからリポジトリをクローンすれば元の状態に戻すことができるのです。強引な方法ですが、Gitのメリットの一つですので覚えておきましょう。

それでは作成したブランチをGitHubに同期させます。

  1. GitHub Desktopの右上にある[Publish]ボタンを押す
    • f:id:am1tanaka:20151106213653p:plain

以上でローカルで作成したブランチがGitHubに登録されました。Webブラウザで開いていたGitHubのページを再読み込み(f:id:am1tanaka:20151106213857p:plain)してから、[Branch: master▼]を押して、作成したブランチが列挙されることを確認してください。

以上で完了です。新しく作業を開始する時には、この手順で作業用のブランチを作成してから作業を開始しましょう。

演習

  • テスト用のリポジトリに、master以外の2つ以上のトピックを作成して、GitHubにPublishしてください
  • チームで練習する場合は、一人ひとつブランチを作成して、Publishしてください
  • WebブラウザーGitHubを参照して、ブランチが登録されたかを確認してください

3.作業用ブランチでの作業とコミット、プッシュ

このステップがメインのステップです。目指す機能の実装を終えて、テストが完了するまでこのステップで作業をします。

f:id:am1tanaka:20151107223319p:plain

3.1 作業を開始

  1. 作業用のフォルダーを開くには、GitHub Desktopでリポジトリを右クリックして、[Open in Explorer]を選択
    • f:id:am1tanaka:20151107223934p:plain
  2. 作業用のフォルダーに必要なファイルを追加したり、編集したりして、目的の機能を実装する

3.2 コミット

バグが無くなるなど、作業が一段落したらコミットしましょう。

  1. GitHub Desktopを起動する
  2. 上にある[Changes]を選択して変更を確認
    • 以下の例は、addFile.txtが追加されて、README.mdに変更があったことを示しています
    • f:id:am1tanaka:20151107225030p:plain
  3. [Summary]欄に簡単な更新内容、[Description]に更新について説明を入力して[Commit to ・・・]を押す
    • f:id:am1tanaka:20151107225826p:plain

以上でコミットが完了します。

3.3 コミットを間違えた時

コメントを書き間違えたり、追加してはいけないファイルを追加してしまったなどの場合、GitHub Desktopは元に戻す操作ができます。

  1. 右上の歯車マークを押して、[Undo most recent commit]を押す
    • f:id:am1tanaka:20151107230238p:plain

GitHub Desktopは、[Summary]に文字が入っている状態で[Enter]キーを押すとコミットしてしまうので、メッセージを入力ミスしてコミットすることが起きやすいです。この操作はとても助かります。

3.4 リポジトリに加えたくないファイルの指定

テンポラリフォルダやローカルのパスワードファイルなど、リポジトリに登録したくないフォルダーやファイルがあります。それらのフォルダーやファイルは、.gitignoreという名前のテキストファイルに列挙するとコミットの対象外にすることができます。

GitHub Desktopでは簡単に追加できます。例えばpasswd.txtというファイルにローカルのパスワードなどが収まっていて、それを無視させたい場合は以下のようにします。

  1. 作業用フォルダーにpasswd.txtを追加
  2. GitHub Desktopを起動して、[Changes]ボタンを押す
  3. 無視したいファイルを右クリックして、[Ignore file]を選択
    • [Ignore all .??? files]の方を選択すると、指定の拡張子のファイルを全て無視することができます
    • f:id:am1tanaka:20151107231005p:plain
  4. 指定したファイルがリストから消えて、始めての時は.gitignoreファイルが追加される
  5. コミットが必要な場合は、Summaryを入力してCommitする

3.5 プッシュ

ある程度コミットがまとまってきたら、GitHubにプッシュして同期する。これをしておけば、別の場所でGitHubからリポジトリをクローンすれば、いつでもどこからでも作業が再開できます。

  1. GitHub Desktopを起動
  2. コミットをしていなかったらコミット
  3. 画面右上のSyncボタン(f:id:am1tanaka:20151107231429p:plain)を押す

3.6 変更箇所の確認

前回コミットしたコードに変更を加えたら動作がおかしくなったとします。原因は変更した箇所ですから、どこを変更したかが確認できれば便利です。以下のようにして変更箇所をチェックできます。

  1. GitHub Desktopを起動
  2. 画面上の[Changes]を押す
  3. 変更されたファイルが一覧表示されるので、確認したいファイルを選択
  4. 削除した行の前には[-]、追加された行の前には[+]が表示されるので、どのように変更されたかをチェック
    • addFile.txtから「削除テスト」という行を削除して、「変更テスト」という行を追加した場合、以下のようになる
    • f:id:am1tanaka:20151107233528j:plain


作業が一息つくごとにコミットするとよいでしょう。プッシュは毎回する必要はありませんが、ある程度頻繁にしておいた方が安心です。

4.目的の作業が完了したらmasterブランチに変更をマージ

実装中の機能が完成して、テストも完了したらmasterブランチにマージ(merge=結合)しましょう。

通常はプルリクエスト(Pull Request)を作成して、結合を担当する人がテストなどをして組み込むのですが、メンバー全員が学習中の場合は、メンバーで協力して組み込むことになります。

4.1 自分の変更をmasterブランチにマージする

それではこれまでの変更をmasterブランチにマージしてみます。

f:id:am1tanaka:20151116190929p:plain

  1. GitHub Desktopを起動する
  2. 画面左から作業するリポジトリを選択
  3. 画面上の[Changes]の右に●がついていたら変更がある。コミット(Commit)して同期(Sync)しておく
    • f:id:am1tanaka:20151116191025p:plain
  4. 画面上のブランチ名をクリックして、[master]に切り替える
    • f:id:am1tanaka:20151116191043p:plain
  5. masterブランチに切り替わったら、[Compare▼]ボタンが表示されるので、押して、マージしたいブランチを選択
    • f:id:am1tanaka:20151116191053p:plain
  6. ボタンが[Update from <ブランチ名>]になるので、押す
    • f:id:am1tanaka:20151116191101p:plain

マージに成功したら以下のようにマージアイコンが表示されます。すぐ上の[Sync]ボタンを押して、GitHubに変更をプッシュしてマージは完了です。

f:id:am1tanaka:20151116191109p:plain

マージが完了したら、開発をしていたブランチは役目を終えます。新しい機能の実装を始める時は、最新のmasterブランチから新しく作業用のブランチを作成してください。

4.2 コンフリクト(衝突)の解決方法

他の人が自分と同じ箇所を変更していた場合、コンフリクト(Conflict=衝突)が発生します。

この作業がGitのようなバージョン管理システムの初心者が最も恐れるものでしょう。自動的に解決する方法はありませんので、関係者で集まって、どちらの行った変更を適用するのかを話し合って決めてください。

試しにコンフリクトを発生させて、解決してみましょう。

4.2.1 コンフリクトの発生

コンフリクトは2つ以上のブランチで、同じ個所を変更した際に発生します。実際にコンフリクトを発生させてみましょう。

  1. GitHub Desktopを起動
  2. ブランチがmasterかを確認。違ったら、masterブランチに切り替える
    • f:id:am1tanaka:20151116191154p:plain
  3. 衝突を発生させるための新しいブランチを作成する。ブランチ名の左にある[Create new branch]アイコン(f:id:am1tanaka:20151106211024p:plain)を押して、ブランチ名を入力して(conflict-testなど)、[Create new branch]を押す
    • f:id:am1tanaka:20151116191219p:plain
  4. クローンしたフォルダーを開いて、README.mdなどをテキストエディターで開く
  5. [- conflict-testブランチから変更する]などを最後の行に追加して上書き保存して閉じる
  6. GitHub Desktopに切り替えて、[Changes]を押して、[Summary]に「コンフリクトテスト」などと書き込んで、Commitして、Publishする

次に、別のブランチで同じ場所を編集します。

  1. 前の練習で使っていたブランチに切り替える(add-hello-commentなど)
  2. クローンしたフォルダーを開いて、先ほどと同じファイル(README.mdなど)をテキストエディターで開く
    • ブランチを切り替えたので、先ほどの変更が消えていることが確認できます
  3. 先ほど変更したように、最後の行に違う文字列を入力します。例えば[- 他のブランチから変更]など
  4. GitHub Desktopに切り替えて、[Summary]に「コンフリクトテスト」などと書き込んで、Commitして、Syncする

準備ができたので、両者をmasterにマージしてコンフリクトさせます。

  1. ブランチを[master]に切り替える
  2. [Update from ブランチ名]のボタンを押す
    • masterに変更がなかったので、このマージは成功します。
  3. [Sync]を押して、GitHubにプッシュする

もう一方のブランチをマージします。

  1. 比較対象のブランチを切り替えるために、灰色のエリアの[ブランチ名▼]の部分をクリックして、もう一方のブランチに切り替える
    • f:id:am1tanaka:20151116191253p:plain
  2. [Update from <ブランチ名>]ボタンが有効になるので押してマージする

これでコンフリクトが発生します。以下のような画面が表示されて、コンフリクトが発生したことが示されます。[View conflicts]を押すと、コンフリクトしたファイルを見ることができます。

f:id:am1tanaka:20151116191303p:plain

ファイル名の右の四角が黄色いファイルでコンフリクトが発生しています。
f:id:am1tanaka:20151116192017p:plain
コンフリクトが発生した場所は、プログラム的にエラーになるので、これを解決しない限り、プログラムが実行できなくなります。

4.2.2 コンフリクトを解決する

それではWinMergeを使って、コンフリクトを解決します。この作業は、変更に関わったメンバーで集まって、話し合いながら進めてください。

  1. コンフリクトを起こしているファイルを右クリックして、[Open containing folder]を選択して、ファイルがあるフォルダーを開く
    • f:id:am1tanaka:20151116192133p:plain
  2. エクスプローラーが開くので、コンフリクトを起こしているファイルを右クリックして、[WinMerge]を選択
    • f:id:am1tanaka:20151116191327p:plain
  3. WinMergeが開くと、左右の画面で変更点を見比べながら作業することができる
    • f:id:am1tanaka:20151116191338p:plain
    • [Theirs File]と書いてある左の画面が比較先の内容
    • [Mine File]と書いてある右の画面が自分のファイル内容。こちらのファイルを編集して、マージ後の内容にして保存すればよい
  4. 変更点が多い場合は、次の差違ボタン(f:id:am1tanaka:20151116191353p:plain)を利用すると便利
  5. 今回は、両方の変更を取り入れて、Mine Fileを以下のように変更する。コピー&ペーストや編集をして、左のファイルから必要な箇所を右に移す
    • f:id:am1tanaka:20151116191405p:plain
  6. コンフリクトを解消して、[Mine File]が、正しい状態になったら[保存](f:id:am1tanaka:20151116191414p:plain)を押す

コンフリクトを解決したら、GitHubにそれを知らせる必要があります。

  1. GitHub Desktopに切り替える
  2. 解決したファイルにチェックを入れる
    • f:id:am1tanaka:20151116191423p:plain
  3. [.bak]ファイルは、WinMergeがバックアップした変更前のファイル。これは管理する必要がないので、以下の手順で無視する
  4. [README.md.bak]を右クリックして、[Ignore all .bak files]を選択
    • f:id:am1tanaka:20151116192316p:plain
    • 一度この操作をすると、.bakファイルは表示されなくなります
  5. すべてのコンフリクトが解決できたら、コミットして、[Sync]して、マージ完了。

以上でコンフリクトは解決です。コンフリクトに失敗した時は、コミットをUndoしたりして、また最初からやり直してみてください。

4.2.3 コンフリクトの表現方法

コンフリクトの表現方法は、Gitに限らず、多くのバージョン管理システムで同じです。WinMergeでうまく動かない場合は、普通のテキストファイルで解決することもできますので、必要な場合は以下を確認してください。

コンフリクトしているファイルをGitHub Desktopで選択すると、以下のように表示されます。
f:id:am1tanaka:20151116193103p:plain

[<<<<<< ブランチ名]~[======]~[>>>>>>> ブランチ名]が1セットになっています。

  • [<<<<<<< ブランチ名]から[=======]までが、自分のファイルの内容
  • [=======]から[>>>>>> ブランチ名]までが、相手のファイルの内容

普通のテキストエディターでコンフリクトを解決するには、自分のファイル内容と相手のファイル内容を見比べて、完成形にします。その後、[<<<<<<<]と[=======]と[>>>>>>>]から始まる行を削除して、上書き保存すれば完了です。


(つづく)

5.他の人がmasterに加えた変更を作業用ブランチに取り込む