メインコンテンツまでスキップ

GitとGitHubを用いた共同開発

共同開発で生じる問題​

2人で企画書を作成することを考えてみてください。1人が企画書を書いた後、それを相手にメールで送り、相手はそれをさらに修正してまたメールで送り返すということを繰り返します。このようにすると、1人が編集している間はもう一人は企画書を編集できなくなってしまいますし、メールで送り合うのは手間がかかりますし、やり取りが複雑になってしまいます。

バージョン管理の例

GitとGitHubを用いた共同開発の仕組み​

GitとGitHubを用いることでこの問題を解決することができます。まず、GitHub上にリポジトリを作成し、他のメンバーがそのリポジトリにアクセスできるようにします。Gitにはブランチという仕組みが備わっています。メンバーは変更を加えたい時には、メインのブランチからその変更を加えるための専用の作業場所であるブランチを作成します。そして、そこで変更を加えて、コミットを作成します。

そして、作業が終わったら、メインのブランチに自分のブランチの変更を取り込みます。ここで、GitHubにはプルリクエストという機能があります。プルリクエストを作ることで、自分がどのような変更を加えようとしているのかを他の人に確認してもらうことができます。そして、その変更が良さそうだったら、メインのブランチに取り込みます。

このように、プロジェクトの本体に影響を与えずに同時並行で開発を進めることができます。

GitとGitHubを用いて共同開発をする​

では、実際にGitとGitHubを用いて共同開発をしてみましょう。

GitとGitHubを用いた共同開発は、大きく次のような流れで行います。

  1. GitHub上のリポジトリにソースコードを保存する。
  2. 他のメンバーはそのリポジトリをクローンする。
  3. 変更を加えるために、ブランチを作成する。
  4. 変更を加えて、コミットを作成する。
  5. そのブランチをリモートリポジトリにプッシュする。
  6. プルリクエストを作成する。
  7. プルリクエストを確認してもらい、メインのブランチにマージする。

2回目以降は、メインのブランチに他のメンバーが変更を加えている可能性があるので、まずはメインのブランチに戻って、プルをすることでリモートリポジトリの変更を取り込みます。その後は、3.以降の手順を繰り返して新たなプルリクエストを作成します。

では、それぞれについて見ていきましょう。

GitHubにソースコードを保存する​

自分のコンピューター上に作成したリポジトリと同期させるため、GitHub上にもリポジトリを作成します。GitHub上部のメニューからNew repositoryを選択してください。

新しいリポジトリを作成

必要な設定はリポジトリの名前と公開範囲です。公開するつもりがない場合は公開範囲はPrivateに設定するようにしましょう。

リポジトリの設定

続いて、GitHub上に作成したリポジトリと自分のPC上にあるリポジトリを紐づけます。GitHub上に表示されているSSHのURLをコピーします。(SSHにするのを忘れないでください。)これがGitHub上に作成したリポジトリを表すURLになります。GitHub上に作成したリポジトリをリモートリポジトリと呼びます。次のコマンドを実行して、このリモートリポジトリをorigin (慣習的にリモートリポジトリが一つだけの場合はこの名前が用いられます) という名前で登録します。

git remote add origin git@github.com:アカウント名/リポジトリ名.git

登録が完了したら、originとして登録したリモートリポジトリにコミットを送信します。この操作をプッシュと呼びます。プッシュをするには、Pull, Push>Push to...>originを押します。

GitHubを開いているブラウザを更新して、プログラムが反映されていることを確認したら完了です。

git pushコマンド

git pushコマンドを使うことで、コマンドラインから、プッシュをすることもできます。

git push origin main

このコマンドのmainというのは、メインのブランチの名前です。

コマンドラインでのプッシュ

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

自分が作成したリポジトリであれば、そのまま変更を加えることができますが、他の人が作成したリポジトリに変更を加える場合は、まずは自分のPC上にそのリポジトリをクローンする必要があります。クローンするとは、リモートリポジトリを自分のPC上に複製することです。

他の人が作成したリポジトリに変更を加える場合は、権限を与えてもらってからそのリポジトリをクローンしましょう。

クローンするリモートリポジトリのSSHのURLをコピーして、次のコマンドを実行してください。その後、クローンしたリポジトリをVS Codeで開いてください。

git clone git@github.com:アカウント名/リポジトリ名.git

ブランチを作成する​

まずは、メインのブランチから今回の作業専用のブランチを作成しましょう。左下のmainというボタンをクリックして、Create new branch from...を選択します。次に、分岐元のブランチであるmainを選択します。最後に、新しいブランチの名前を入力します。新しいブランチの名前には、今回加えたい変更の内容を表す名前をつけましょう。左下の表示がmainから新しいブランチの名前に変わったことを確認してください。

git switchコマンド

ブランチの作成をコマンドラインから行うこともできます。

まずは、現在いるブランチを確認してみましょう。ターミナルでgit branchコマンドを実行してください。

$ git branch
* main

ここで、*から始まっているのが、現在いるブランチです。mainとなっているはずです。

git switchコマンドを使うことで、ブランチを切り替えることができます。切り替え先のブランチが存在しない場合-cというオプションをつけることで、新しいブランチを作成して切り替えることができます。

git switch -c 新しいブランチ名

現在いるブランチを確認すると、*が移動しているはずです。

$ git branch
* 新しいブランチ名
  main

変更を加えてコミットを作成する​

変更を加えて、コミットを作成しましょう。必要に応じて、コミットの履歴やコミットの差分を確認してください。

リモートリポジトリにプッシュする​

変更を加えたのは、自分のPC上のリポジトリです。そのため、リモートリポジトリにその変更を反映させる必要があります。新しく作ったブランチをリモートリポジトリにプッシュします。

備考

コマンドラインからプッシュするには、次のコマンドを実行します。

git push origin ブランチ名

プルリクエストを作成する​

次に変更をメインのブランチに反映します。GitHubのプルリクエストという機能を使うことで、簡単に変更の内容を他の人に確認してもらい、メインのブランチに反映することができます。

GitHubを開きPull requestsを開いてください。

プルリクエストを作成

New pull requestを押してください。

ブランチ選択前

compareと書いてある方のブランチを変更して、さきほど作成したブランチを選択してください。

ブランチ選択後

Create pull requestを押してください。

プルリクエストの作成

確認画面が出るので、コメントを書いてCreate pull requestを押してください。これで、プルリクエストを作成することができました。

マージする​

メインのブランチと変更を加えたブランチとの差分は、Files changedタブから確認できます。変更が良さそうだったら、Merge pull requestを押してください。これで、メインのブランチに変更を加えたブランチをマージすることができます。マージとは、あるブランチと別のブランチとを統合することです。

マージしたら、不要になったブランチはDelete branchを押して削除しておきましょう。

プルリクエストをマージ

新たなプルリクエストを作成する​

これ以降プルリクエストを作る場合は、リモートリポジトリのメインのブランチに他の人が変更を加えている可能性があるため、mainブランチに戻って、リモートリポジトリから新たな変更をプルしましょう。プルするとは、自分のPC上にリモートリポジトリの変更を取り込むことです。その後は、今までと同様に新しいブランチを作成して進めていきます。

リモートリポジトリの変更をプルするには、Pull, Push>Pull from...>origin/mainを押します。

備考

コマンドラインからプルするには、次のコマンドを実行します。

git pull origin main

コマンドラインでのプル

演習問題​

Gitを用いたバージョン管理の練習問題で、学部一覧ページを作成しました。このリポジトリをGitHubに保存して、各学部のウェブサイトのURLを追加するプルリクエストを作成してください。

学部一覧ページ

手順1​

GitHubのリポジトリにソースコードを保存しましょう。

解答例

手順2​

ブランチを作成しましょう。

解答例

手順3​

学部一覧ページに各学部のウェブサイトのURLを追加して、ステージをしてコミットを作成しましょう。

解答例
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>学部一覧</title>
  </head>
  <body>
    <h1>学部一覧</h1>
    <ul>
      <li><a href="https://www.j.u-tokyo.ac.jp/">法学部</a></li>
      <li><a href="https://www.m.u-tokyo.ac.jp/">医学部</a></li>
      <li><a href="https://www.t.u-tokyo.ac.jp/foe">工学部</a></li>
      <li><a href="https://www.l.u-tokyo.ac.jp/">文学部</a></li>
      <li><a href="https://www.s.u-tokyo.ac.jp/ja">理学部</a></li>
      <li><a href="https://www.a.u-tokyo.ac.jp/">農学部</a></li>
      <li><a href="https://www.e.u-tokyo.ac.jp/">経済学部</a></li>
      <li><a href="https://www.c.u-tokyo.ac.jp/">教養学部</a></li>
      <li><a href="https://www.p.u-tokyo.ac.jp/">教育学部</a></li>
      <li><a href="https://www.f.u-tokyo.ac.jp/">薬学部</a></li>
    </ul>
  </body>
</html>

手順4​

ブランチをリモートリポジトリにプッシュしましょう。

解答例

手順5​

プルリクエストを作成しましょう。

解答例

手順6​

差分を確認して、プルリクエストをマージしましょう。

解答例