TeamWorking

Git と GitHub

Git とは

バージョン管理システムはプログラムのソースファイルなどのように、時間をかけて変更を積み重ねて作りあげていく大規模なファイルの集まりの、変更の履歴を管理するためのシステムである。また、プログラムだけではなく、ドキュメント類（例えば卒業論文なども！）も、バージョン管理システムの対象となりうる。

情報関係の技術者にとってバージョン管理は、OS、プログラミング言語やデータベースなどとともに、プロフェッショナルとして欠かすことのできないツールであり、スキルの一つである。バージョン管理システムにはいくつかの種類があるが、そのなかでも Git は現時点でもっともメジャーなバージョン管理システムである。この資料では Git と そのホスティングサービスである GitHub について解説する。

バージョン管理システムとは

一般に、バージョン管理システムは、数人で共同でプログラムを作成するときに、次のような現象が起こらないように開発されたものである。

問題の発生過程:

  1. X さんがファイルをダウンロードして編集開始する（内容: ABC → ABCD）
  2. Y さんがファイル（内容: ABC）をダウンロードして編集開始する
  3. X さんがファイルをアップロードして D を追加する
  4. Y さんが E を追加して完成する（ABC → ABCE）
  5. Y さんがアップロードして、X さんの変更を消去する！

Git をはじめとするバージョン管理システムは、たとえ複数人が同一のファイルを同時に編集してしまっても編集している位置がファイルの中で離れているならば、変更をマージする機能を持っている。一方、変更した箇所が接近していて、自動的にマージすることが難しければ、衝突 (conflict) を報告して、その解決を人間にゆだねる。

しかし、一人で作業する場合でもバージョン管理システムを使うことにより、次のようなトラブルを防ぐことができる。

バージョン管理システムではリポジトリー (repository —倉庫の意味) という場所に、以前のバージョンを含めたすべてのファイルの情報を貯蔵する。 バージョン管理システムのなかでも Git は分散型バージョン管理システムと呼ばれ、各コンピューターがリポジトリーを持つことができる。そのため、ネットワークに接続していない環境でもバージョン管理システムの機能を利用できるという特徴がある。

GitHub とは

GitHub は Git のリポジトリーをインターネット上に提供しているサービス（ホスティングサービス）である。単なる Git のリポジトリーではなく、GUI を利用したリポジトリーの操作や Pull Request, GitHub Actions などの便利な機能を提供している。

本資料では GitHub をリポジトリーとして使うことを前提に Git の使い方を説明していく。

これまで GitHub を使ったことがない人は、GitHub のアカウントを作成しておく必要がある。 GitHub のアカウントを作成するには、GitHub のページにアクセスし、Sign Up （サインアップ）を選択して、画面の指示に従ってアカウントを作成する。登録するメールアドレスは大学のメールアドレスを使うことを推奨する。大学のメールアドレスを使うと、GitHub Education の特典を受けることができる要確認。

Git クライアントのインストール

Windows の Git クライアントはいくつかあるが、ここでは Git for Windows を使用する。Git for Windows のページからダウンロード (Download) のページに進み、自分の PC にあったインストーラー（大部分の人は Git-x.xx.x-64-bit.exe のはず）をダウンロードして実行する。途中で Adjusting your PATH environment という画面が出てくる場合は、推奨 (Recommended) の “Git from the command line and also from 3rd-party software”を選択しておく。

インストールした後は コマンドプロンプトや PowerShell などのターミナルアプリケーションを開いて、git --version と入力してみると、Git のバージョンが表示されるはずである。もしエラーが出る場合は、インストールに失敗している可能性があるので、もう一度インストーラーを実行する。

またこの授業ではソースコードエディターとして Visual Studio Code (VS Code) を利用する。VS Code は後期の「プログラミング」をはじめ、「チームワーキング演習」以外の授業でもたびたび使用する。VS Code が未インストールのときは、VS Code のページからダウンロードに進み、インストーラーをダウンロードして実行する。

VS Code を実行するには、Windows の検索窓 🔍 から code と入力すると、Visual Studio Code が表示されるので、クリックして起動する。また、コマンドプロンプトや PowerShell などのターミナルから code と入力しても起動できる。

最初の git config

Git クライアントを使う前に、ユーザー名とメールアドレスを設定する必要がある。Git for Windows の Git Bash や コマンドプロンプト、PowerShell などのターミナルアプリケーションを開いて、次のコマンドを実行する。もちろん Your Name と yourid@kagawa-u.ac.jp は自分の名前とメールアドレスに置きかえる。

git config --global user.name "Your Name"
git config --global user.email "yourid@kagawa-u.ac.jp"

名前は本名である必要はないが、共同作業する人には通じる名前を設定する。メールアドレスは、GitHub のアカウントに登録したメールアドレスと同じものを設定しておくと良い。

リポジトリーの作成

Git を使ってバージョン管理をするためには、まずリポジトリーを作成する。（つまり、履歴管理用のいろいろなファイルを用意する。）先に GitHub などにリモートリポジトリー（ネットワーク上のリポジトリー）を作って、その空のリボジトリーをローカル（手元のコンピューター）にクローンするほうが楽である。 リモートリポジトリーを作っておくと、あるコンピュータで作業をしてリポジトリーを更新し、別のコンピュータに最新版を取り出して作業を再開する、といったことが容易になる。

なお、先にローカルにリポジトリーを作成して、後から GitHub 上にリポジトリーを作成して、関連付けてリモートリポジトリーとすることもできる。ただし、そのやり方についてはここでは説明を省略する。

GitHub 上にリポジトリーを作成

GitHub 上にリポジトリーを作成するには、GitHub のページにログインして、どこか（おそらく + とか New といったメニューボタン）に New Repository というボタンや項目があるので、それをクリックする。あとは画面の指示に従う。リポジトリーの名前　(Repository name) は必須で、半角英数字とドット (.)、ハイフン（-）、アンダースコア (_) のみを使うことができる（例: my-fist-repo）。他の入力項目は任意なので、必要に応じて入力する。リポジトリーの公開範囲は Public と Private があるが、最初は Private を選択すると良い。より詳しい説明は GitHub Create Repository にある。

GitHub のリポジトリーのクローンの準備

既に誰かが（あるいは自分が） GitHub 上などに作成したリポジトリーを自分の PC にコピーして、ローカルで編集することをクローン (clone) と呼ぶ。GitHub 上に作成したリポジトリーをクローンするには、リポジトリーの URL が必要になる。リポジトリーのメインページにある緑色の「<> Code」ボタンをクリックして表示される、HTTPS のタブにある URL (https://github.com/なんとか のはず) をコピーする。

なお、この資料では主に VS Code からリポジトリーを操作する方法を説明するが、もちろんコマンドプロンプトや PowerShell などのターミナルからも操作できる。ターミナルからリポジトリーを操作するコマンドは、あとでまとめて説明する。

VS Code でリポジトリーをクローンする

VS Code でリポジトリーをローカルにクローンするには、左側のサイドバーにある Source Control（ソース管理）アイコン Source Control Iconをクリックする。次に Clone Git Repository1 をクリックする。
あるいは、新しく VS Code を開いたときに表示される「Welcome」画面にある Clone Git Repository ボタンをクリックしてもよい。現れるダイアログに、 先ほど GitHub のページでコピーしたリポジトリーの URL を貼り付けて、クローン先のフォルダーを選択する。

ファイルの作成とコミット

ローカルにリポジトリーをクローンしたら、ここにファイルを追加していく。VS Code でリポジトリーを開き、左側のエクスプローラー (Explorer) アイコンをクリックして、ファイルを作成することができる。例えば次のような新しいファイルを作成し、適当な名前（例: cat.html）を付けて保存する。ただし、このファイルはまだ Git の管理下にない。

<h1>list of cat breeds</h1>
<ul>
  <li>American shorthair</li>
  <li>Bengal</li>
  <li>Japanese bobtail</li>
</ul>

Git の管理下に置くためには、ファイルをステージング (staging) する必要がある。VS Code の Source Control のサイドバーで、ファイル名の横の + アイコンをクリックして、ステージングすることができる。

コミット

ステージングしたファイルを Git のリポジトリーに実際に登録することをコミット (commit) と呼ぶ。VS Code の Source Control のサイドバーで、必要なファイルがステージングされていることを確認して ✓ Commit アイコンをクリックしてコミットすることができる。コミットする際には、メッセージを入力する必要がある。コミットメッセージは、何を変更したかを簡潔に説明するものである。例えば、cat.html を追加 や README.md を更新 などとする。

.gitignore ファイル

変更があったのにステージングされていないファイルは、Source Control のサイドバーの CHANGES に表示される。バージョン管理したくない（Git に無視してほしい）ファイルがある場合は、.gitignore という名前のファイルを作成し、その中に無視したいファイルやディレクトリーのパターンを記述する。例えば、*.exe と書くと、拡張子が .exe のファイルは Git はステージングの候補として挙がらなくなる。

.gitignore ファイルの例

tmp.txt
*.exe
*.obj
bin/

リモートリポジトリーへのプッシュ

ローカルのリポジトリーでコミットした変更を、GitHub 上のリモートリポジトリーに反映させることをプッシュ (push) と呼ぶ。VS Code の Source Control のサイドバーで、Sync Changes ↑（変更の同期） （初回だけは ↑ Publish Branch（ブランチの発行））をクリックしてプッシュすることができる。

リモートリポジトリーの変更を取得

リモートリポジトリーで他の人が変更を加えた場合（あるいは自分が別のコンピューターで変更を加えた場合）、その変更を自分のローカルリポジトリーに取り込むことをプル (pull) と呼ぶ。VS Code の Source Control のサイドバーで、↓ のようなアイコンで Pull というものがあるので、これをクリックしてプルすることができる。 （CHANGES の右側の ⋯ からも Pull という項目を見つけることができる。）

ターミナルでリポジトリーを操作する

VS Code からではなく、ターミナルから Git を操作することもできる。以下は、ターミナルでの基本的なコマンドである。

Git の他の操作

Git には他にも多くのコマンドがある。以下は、比較的よく使われるコマンドの一部である。

これらについては、必要に応じて調べると良い。VS Code の GUI からも操作できるはずである。以前のバージョンに一時的に戻したとき、そこでファイルを編集すると、その作業が消えてしまう可能性があるので、注意が必要である。

GitHub アカウントに他の人を招待する

Git リポジトリーを、他の人と共有して共同でプロジェクトを開発することができる。

GitHub 上のリポジトリーに他の人を招待するには、リポジトリーのページに移動し、Settings タブをクリックする。次に、左側のメニューから Collaborators を選択し、Add people をクリックして、招待したいユーザーの GitHub ユーザー名かメールアドレスを入力する。

競合の解決

Git では、複数人が同じファイルを同時に編集した場合（あるいは一人で編集しても適切に commit や push をしなかった場合）、競合という状況が発生し Git が警告してくることがある。競合は、同じファイルの同じ部分を異なる内容で変更した場合に発生する。例えば、X さんがファイルの行 10 を変更し、Y さんも同じ行を変更した場合である。X さんがプッシュした後に、もし何の警告もなしに Y さんがプッシュできてしまうと、Y さんの変更が X さんの変更を上書きしてしまう可能性がある。 競合が発生すると、Git は自動的にマージできないため、手動で解決する必要がある。VS Code では、競合が発生したファイルを開くと、競合部分がハイライトされるので、どちらの部分を残すかを選択して（あるいはまったく別のコードを作成して）解決することができる。

ブランチ (branch)

Git では ブランチ (branch) といって、履歴を枝別れさせて複数のバージョンで同時に開発作業を進めることができる。例えば、main ブランチは安定版のコードを保持してデバッグのみに専念し、新しい機能の大幅な開発は feature ブランチで行うといった使い方ができる。あとで示すように、ブランチを一瞬で切り替えて他のバージョンの作業に取り掛かったり、ブランチをマージして一つのバージョンに統合したりすることができる。

ある程度規模の大きなソフトウェアを作るようになるとありがたみがわかるようになるバージョン管理システムの機能である。

VS Code でブランチを作成・切り替え

VS Code の Source Control のサイドバーで、CHANGES の右側の ⋯ アイコン2をクリックして Create Branch… を選択し、ブランチ名を入力することでブランチを作成できる。ブランチを切り替えるには、同じく ⋯ アイコンをクリックして Checkout to … を選択し、切り替えたいブランチ名を選択する。

ブランチをリモートリポジトリーにプッシュするには、 ⋯ アイコンをクリックしてPublish Branch（ブランチの発行）を選択する。 逆に、リモートリポジトリーにあるブランチをローカルに取得するには、⋯ アイコンをクリックして Fetch を選択する。 さらに、取得したブランチに切り替えるには、⋯ アイコンをクリックして Checkout to … を選択し、origin/ブランチ名 というリモートブランチを選択する。

ブランチのマージ

ブランチでの作業が完了したら、main ブランチにマージすることができる。マージとは、異なるブランチの変更を一つに統合することである。ブランチを main に切り替えてから VS Code の Source Control のサイドバーで、 ⋯ アイコンをクリックして Branch から Merge… を選択し、マージしたいブランチを選択する。

ブランチの削除

VS Code の Source Control のサイドバーで、⋯ アイコンをクリックして Branch から Delete Branch… を選択し、削除したいブランチを選択する。これにより、ローカルのブランチが削除される。リモートブランチの削除は同様に ⋯ アイコンをクリックして Branch から Delete Remote Branch… を選択し、削除したいリモートブランチを選択する。

ターミナルでブランチを操作する

ターミナルからはブランチを次のコマンドで操作することができる。

プルリクエスト (pull request) による開発

プルリクエスト (pull request) は、Git にもともとある機能ではなく、GitHub の独自機能である。

GitHub では、ブランチを作成して作業を行い、完成したらそのブランチを main ブランチにマージするためのリクエストを送ることができる。このリクエストをプルリクエスト (pull request) と呼ぶ。プルリクエストは、他の人に自分の変更をレビューして確認してもらうための機能である。複数の目でコードをチェックすることで、バグがあるコードが main ブランチにマージされるのを防ぐことができる。

プルリクエストを作成するには、作成したブランチを GitHub にプッシュしたあとに GitHub のリポジトリーのページに移動し、Pull requests タブをクリックして New pull request ボタンをクリックする。次に、マージ元のブランチとマージ先のブランチを選択して、Create pull request をクリックし、プルリクエストのタイトルと説明を入力する。

プルリクエストを作成すると、リポジトリーの他の Collaborator にレビューを依頼することができる。レビューが完了し承認されたら、プルリクエストをマージすることができる。プルリクエストは本来は複数人で作業するときのツールなので、他の人に承認してもらうのが本当だが、自分一人で使用しているリポジトリーでプルリクエストの練習をするときは自分で自分のプルリクエストを承認する。

なお、規模の大きなプロジェクトになると main などの主なブランチはプルリクエスト経由でのみ変更できるように保護する設定にすることが多い。

GitHub 上のファイルの公開

GitHub Pages という機能を利用して、GitHub 上に HTML, CSS, JavaScript などを置き、静的な Web サイトを公開することができる。なお、将来、動的な Web サイトを公開したいときには Render.com などのホスティングサービスが利用できる。

次は GitHub のリポジトリーを Public で作成してみよう。新しい Public の GitHub リポジトリーを作成するか、既存のリポジトリーを Public に変更する。

既存の GitHub リポジトリーの公開範囲を Public に変更するには、リポジトリーのページに行き Settings タブを開く。ページのずっと下のほうに Danger Zone という項目があり、さらに Change repository visibility という小項目があるので、そこの Change visibility をクリックする。

さらに左側のサイドバーの Pages をクリックして、Branch を None から main に変更し、フォルダーが / (root) になっていることを確認する。なお、ここの設定を変更すると main 以外のブランチを公開したり、サブディレクトリー docs のみを公開したりすることができる。

このあとにこのリポジトリーに HTML ファイルや画像ファイルを置いて GitHub にプッシュする。特に index.html か index.md か README.md ファイルがあると、 https://your_id.github.io/repository_name/ で見ることができる。 ただし your_id と repository_name は自分の GitHub のユーザー名とリポジトリー名に置き換えたものである。 あるいはリポジトリーのページの Code タブの右側のサイドバーに Deployments という項目があるのでそこのリンクをクリックすると、公開されたページの URL が表示されるので、そこからアクセスすることもできる。 もし、index.html か index.md か readme.md ファイルがない場合は、GitHub Pages のトップページは 404 ページ（ページが見つからない）となるので注意する。また、GitHub に変更をプッシュしてから GitHub Pages が更新されるまでに数分かかることがある。

マークダウンファイル

GitHub pages では、マークダウンファイルを使ってドキュメントを作成することができる。マークダウンは、テキストを簡単にフォーマットするための軽量なマークアップ言語である。GitHub page には、マークダウンファイルを HTML に変換して表示する機能がある。

マークダウン記法については、別の資料で詳しく解説する。

ここでは fruit.md という名前のファイルを作成し、次の内容を書いてみよう。

#  マークダウンお試し
GitHub で**マークダウン**を試す。
- りんご
- みかん
- バナナ

このファイルを GitHub にプッシュしておくと https://your_id.github.io/repository_name/fruit.html （.md が .html に変わった）で見ることができる。 ただし、your_id と repository_name は自分の GitHub のユーザー名とリポジトリー名に置き換える。

なお、GitHub のマークダウンの解釈と、VS Code のデフォルトのマークダウンの解釈は異なることがあるので、注意が必要である。VS Code マークダウンのプレビューを GitHub のマークダウンに合わせるには、VS Code の Extension である “GithHub Markdown Preview” (by Matt Bierner) をインストールしておくことを推奨する。VS Code の Extensions（拡張機能） のサイドバーで、検索窓 🔍 に GitHub Markdown Preview と入力して、表示された拡張機能をインストールする。

  1. VS Code を日本語化している場合は、Git リポジトリをクローン と表示される。以下では、オリジナル（英語）のメニュー名やボタン名を使用するので、日本語化した VS Code を使用している場合は適宜読み替えること。 ↩

  2. 以下で　... と表記されている箇所は、特に断らない限り VS Code の Source Control のサイドバーの CHANGES（変更）の右側にある ... アイコンを指す。 ↩