1.1 Gitのインストールとセットアップ

Gitを使うには、gitというコマンドラインプログラムからGitを利用するのが最も一般的です。このコマンドを実行すると、通常のUnixディレクトリが「リポジトリ⁶」というものに変わり、プロジェクトの変更をトラッキング（=追いかける）できるようになります⁷。本節では最初にGitのインストール方法（まだインストールされていない場合）と、最初だけ行っておくいくつかの設定について説明します。

ここから先に進む前に、まずは現在のシステムにGitがインストール済みかどうかを確認しておく必要があります。繰り返しますが、私たちは「Unixの伝統」の上で作業していますので、本チュートリアルで使うコンピュータ環境としてmacOSまたはLinuxを使う（=つまりWindows環境を使わない）ことを強くおすすめします。Linux環境は、おそらく仮想マシン上で実行することになるでしょう（コラム 1.4）。

Gitが使える状態かどうかを調べる最も簡単な方法は次のとおりです。ターミナルウィンドウを起動して、コマンドラインで以下のようにwhichコマンドを実行し⁸、git実行可能ファイルへのパスが表示されるかどうかを確認します。

$ which git
/usr/local/bin/git

結果に何も出力されないか「command not found」などと表示される場合は、Gitを自分でインストールしなければならないということになります。Gitを手動インストールするには、公式のGitドキュメントにある「1.5 使い始める - Gitのインストール 」の手順に従います。これは「技術の成熟」精神を発揮する良い機会となるでしょう（1.2）。

Gitをインストールしたら、プロジェクトを開始する前に、もうひと手間かけていくつかセットアップを終えておく必要があります（リスト 1.1）。このリストには「グローバルな」セットアップが記載されています。つまりこれらの設定は、1台のコンピュータにつき1度は（かつ1度だけ）行わなければならないということです。なお、今はコマンドの細かな意味がわからなくても心配ありません。

$ git config --global user.name "自分の姓名（ローマ字）"
$ git config --global user.email <自分のメールアドレス（your.email@example.comなど）>

Gitでこのグローバル設定を行うことで、今後自分が行うプロジェクトの変更を、自分の「名前」や「メールアドレス」で調べられるようになります。この設定は、Gitで共同作業を行う場合に特に役立ちます（第4章）。なお、リスト 1.1で設定した名前やパスワードは、今後皆さんが自分のプロジェクトを一般公開するときに誰でも見えるようになるので、公にしたくない個人情報をここに書き込まないようご注意ください。

本チュートリアルでは、上の必須設定の他に、いくつかの高度なセットアップオプションについてもこの後扱います（ 4.6）。必須ではありませんが、これらの設定についても早めに終えておくことをおすすめします。Gitを少し触ったことのある方や、Unixコマンドラインに十分詳しい方は、今のうちに「 4.6」の設定を終えておくことをおすすめしますが、そうでない方は何もせずこのまま進みましょう。

1.2 リポジトリを初期化する

今度は、いよいよプロジェクトを1つ作成してGitの管理下に置いてみましょう。頭の中にはっきりと思い浮かべられる「Gitの具体的な応用例」があると、Gitのしくみや、Gitがあると何が嬉しいのかを十分理解するのに大いに役立ちます。そこで、シンプルなプロジェクトを1つ作成し、「Homeページ」「Aboutページ」という2つのWebページを含むささやかなWebサイトをそこに構築して、その変更履歴をGitで追うことにします⁹。まずはreposというリポジトリ用ディレクトリの下に、websiteという一般的な名前のディレクトリを1つ作成します。

[~]$ mkdir -p repos/website

ここでは、『コマンドライン編』で解説したmkdir（make directory）コマンドに、-pオプションを追加しています。mkdirにこのオプションを指定すると、中間ディレクトリ（ここではrepos）も同時に作成できます。また、リスト 4.15の設定により、プロンプトにはカレントディレクトリ（=現在のディレクトリ[~]）が表示されるようになっていることにもご注目ください。

ディレクトリを作成したら、以下のようにcd（change directory）コマンドでそのディレクトリに移動します。ディレクトリを移動するときに、Tabキーを押してディレクトリ名を補完できることを思い出しましょう。私なら「cd re⇥w⇥」と入力するでしょう。

[~]$ cd repos/website/
[website]$

websiteディレクトリには何もファイルがありませんが、その状態でもこのディレクトリを「リポジトリ」に変換できます。見方を変えれば、Unixディレクトリにあるすべてのファイルやサブディレクトリの変更履歴を追えるよう、そのディレクトリを拡張したと考えてもよいわけです。さて、リポジトリを新規作成するには、init（initialize: 初期化の略）コマンドを使います。これを実行すると、そのディレクトリに.gitという特殊な隠しディレクトリが作成され、Gitはここにプロジェクトの変更履歴を追うのに必要な情報を保存します（通常のディレクトリとGitリポジトリの違いは、正しく設定された.gitディレクトリがそこに存在するかどうかという違いだけです）。

Gitのコマンドは、常に「git」の後ろにサブコマンド名を付ける形で実行します。つまりリポジトリを初期化するコマンドは「git init」となります（リスト 1.2）。

[website]$ git init
Initialized empty Git repository in /Users/mhartl/repos/website/.git/
[website (master)]$

ところで、リスト 1.2のプロンプト表示に「[website]」という文字が表示されているのは、『テキストエディタ編』で学んだBashのカスタマイズに「 4.6.2」の高度なセットアップを加えたことによるものなので、皆さんの環境ではこれと異なる表示になる可能性があります¹⁰。特に、リスト 1.2にはGitの「デフォルトブランチ」として「master」という名前が表示されています¹¹。ブランチとは何かがよくわからなくても今は問題ありません。ブランチについて詳しくは「 3.3」で解説します。

1.3 初めての「コミット」

リポジトリに何もファイルがない状態では、Gitの初期化は完了できないようになっています。そこで、カレントディレクトリに何か変更を加える必要があります。さしあたって今はtouchコマンド¹²を用いて空のファイルを1つ作成することにします。ここではシンプルなWebサイトを作りたいので、Webサイト構築でほぼ一般的に使われる命名慣習に基づいて、メインページをindex.htmlと呼ぶことにします。

[website (master)]$ touch index.html

最初のファイルを作成したので、git statusコマンドを実行して結果を見てみましょう。

[website (master)]$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

  index.html

nothing added to commit but untracked files present (use "git add" to track)

index.htmlファイルのステータスは「untracked」となっています。これは、Gitがindex.htmlファイルをまだ認識していないことを表します。そこで、git addを実行してこのファイルをGitに追加します。

[website (master)]$ git add -A

ここで使った-Aオプションは、「untracked状態のファイルをすべてGitに追加せよ」とGitに指示しています。ここではuntracked状態のファイルは1つしかありませんでしたが、複数あった場合はそのすべてが追加されるという意味です。なお、untracked状態のファイルを個別にGitに追加する方法については演習問題に回します（ 1.3.1）。ちなみに、Stack OverflowというQ&Aサイトでは、これとほぼ同等のコマンドである「git add .」が紹介されています。このドット「.」はカレントディレクトリを表すときにもよく使われます¹³。

git add -Aの実行結果を見るには、git statusを再度実行します。

[website (master)]$ git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

  new file:   index.html

「to unstage」という言葉が示すとおり、index.htmlファイルのステータスは「untracked」から「staged」に変更されています。「staged」というステータスは、そのファイルをGitリポジトリに追加可能になったことを表します（まだ追加はされていません）。「untracked」「unstaged」「staged」というステータスは、Gitでよく使われる4つのステータスの中の3つです（図 1.1）。技術的には「untracked」と「unstaged」は違うステータスなのですが、git addコマンドを実行すれば「untracked -> tracked」と「unstaged -> staged」を同時に行うので、実際にはこの違いはほとんど重要ではありません。

図 1.1: Gitで主に使われるファイル変更時のステータス遷移

図 1.1に示したように、変更を「staging」エリアに移動すると、その変更をgit commitコマンドで「コミット（commit）」してローカルGitリポジトリの一部に登録できる状態になります。後ほど、git pushコマンドで図 1.1の最後の状態に進む方法についても説明します（ 2.3）。git commitコマンドを実行するときは、ほとんどの場合-mオプションで「コミットメッセージ」も追加します。コミットメッセージには、そのコミットを行う理由を端的に記述します（コラム 1.5）。ここでは新しいリポジトリを初期化することが目的なので、以下のように「Initialize repository」と書くことにします。

[website (master)]$ git commit -m "Initialize repository"
[master (root-commit) 879392a] Initialize repository
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 index.html

上記の出力結果は、著者のものです。細かな数値などが異なっていても問題ありません。

このあたりで、git logコマンドを実行してコミット履歴を見てみましょう。

[website (master)]$ git log
commit 879392a6bd8dd505f21876869de99d73f40299cc
Author: Michael Hartl <michael@michaelhartl.com>
Date:   Thu Dec 17 20:00:34 2015 -0800

    Initialize repository

Gitのコミットは、「ハッシュ」と呼ばれる文字列によって区別されます。ハッシュとは、文字や数字の並んだ一意の文字列のことで、Gitはこのハッシュを用いてコミットをラベリングし、コミットの変更内容を取り出すときにもハッシュを指定します。上の表示例の場合、以下の文字列がハッシュです。

879392a6bd8dd505f21876869de99d73f40299cc

ハッシュの文字列はコミットごとに必ず大きく異なるようになっています¹⁶。このハッシュ文字列の生成には「SHA」（発音は「シャー」）というアルゴリズムが用いられますが、これはSecure Hash Algorithmの略です。「 3.4」ではこのSHAを高度なGit操作に応用する方法についても学びます。

1.4 diffを表示する

変更内容を実際にコミットする前に、変更内容を表示して確認できれば何かと便利です。この方法を学ぶために、index.htmlファイルにechoコマンドの出力をリダイレクトして「hello, world」ページを作ります。

[website (master)]$ echo "hello, world" > index.html

『コマンドライン編』で学んだUnixのdiffユーティリティを思い出しましょう。たとえばfooとbarの中身を比較して差分を表示するには以下のように入力します。

$ diff foo bar

Gitにもこれに似たgit diffという機能があります。デフォルトでは、現在のプロジェクトの「直前のコミット」と「unstagedな変更」の差分を表示します。

[website (master)]$ git diff
diff --git a/index.html b/index.html
index e69de29..4b5fa63 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1 @@
+hello, world

 1.3で追加したファイルの中身は空だったので、差分には以下の追加だけが表示されます。

+hello, world

git commitコマンドに「-a」オプション（allの略）を追加して、この変更をローカルGitリポジトリにコミットできます。現在存在するファイルに対して行われた変更点は、すべてコミットされます（リスト 1.3）。

[website (master)]$ git commit -a -m "Add content to index.html"
[master 03aff34] Add content to index.html
 1 file changed, 1 insertion(+)

なお「-a」オプションの対象になる変更内容は、「既にリポジトリに追加されたファイル」の変更点だけです。つまり何か新しいファイルを作成したら、git add -Aを実行してファイルをローカルリポジトリに追加しておくことが重要です（ 1.3）。新しいファイルをリポジトリに追加し忘れたままgit commit -aを実行してGitに怒られるというのは実にありがちです。この問題については、演習問題で実際に対処しながら学べます（ 1.4.1）。

変更を追加してコミットしたので、差分は表示されません。

[website (master)]$ git diff
[website (master)]$

git diffで差分を確認するのに必要なのは、単に変更を追加することだけです。しかし、git add -Aを実行し「staged」状態となったファイルの差分はgit diffでは表示されません。「staged」の変更と、リポジトリの直前のバージョンとの違いはgit diff --stagedで確認できます。

ここまでの変更履歴を見るにはgit logを実行します。

[website (master)]$ git log
commit 03aff34ec4f9690228e057a4252bcca169a868b4
Author: Michael Hartl <michael@michaelhartl.com>
Date:   Thu Dec 17 20:03:33 2015 -0800

    Add content to index.html

commit 879392a6bd8dd505f21876869de99d73f40299cc
Author: Michael Hartl <michael@michaelhartl.com>
Date:   Thu Dec 17 20:00:34 2015 -0800

    Initialize repository

1.5 HTMLタグを追加する

これで、Git作業のワークフローで使われる最もシンプルで主要な要素はすべてご紹介できました。この節と次の節では、これまでやってきた作業を復習しながら、さらに詳しく確認することにします。ここでは小さなコミットを頻繁に行いながら変更作業を練習しますが、実際の業務でこのように作業すべきということではありません（コラム 1.6）。それでもこの作業はGitの基礎として非常にふさわしいものですし、皆さんが自分に合うワークフローや開発手順を作り上げていくうえでも確かな基盤となるでしょう。

これまでと同様に、今回もメインのindex.htmlファイルで作業することにします。まず、このファイルをテキストエディタとブラウザの両方で開いてください。VSCodeエディタでファイルを開くにはcodeコマンドを使用します。ちなみにmacOSの場合は、openコマンドでブラウザにファイルを開くことができます。Macを使っていない方は、GUIのファイルブラウザでファイルをダブルクリックすればデフォルトのブラウザでファイルが開きます（図 1.2）。

[website (master)]$ code index.html
[website (master)]$ open index.html   # macOSのみ。それ以外の場合は、GUIを使用します。

ファイルを開くと、図 1.3や図 1.4のように表示されるでしょう。

図 1.2: index.htmlをファイルシステムのブラウザで表示したところ

図 1.3: 最初のHTMLファイルをVSCodeで開いたところ

図 1.4: 最初のHTMLファイルをブラウザで開いたところ

これでファイルを変更する準備が整いました。元の「hello, world」というテキストを「h1見出し」に変更します。Webの言語であるHTMLでは、これをHTML「タグ」を使って行います（ここではh1タグを使います）。ほとんどのブラウザではh1を指定すると文字のフォントサイズが大きくなるので、h1タグに変更するとhello, worldという文字列が大きくなるはずです。これを行うには、今開いているindex.htmlファイルの中身をリスト 1.4に置き換えます¹⁹。

<h1>hello, world</h1>

リスト 1.4には、ほとんどのHTMLタグで用いられる基本的な構造が示されています。まず<h1>のような「開始タグ」は、タグ名（ここではh1）を<と>で囲んだものです。そしてテキストの後ろには「閉じタグ」があります。形は開始タグと似ていますが、</h1>のようにスラッシュが追加されている点だけが異なります。なお、WebのURIアドレスと同様、「バックスラッシュ」ではなく「スラッシュ」を使う点にご注意ください²⁰。

Webブラウザの画面を更新すると、indexページが図 1.5のように表示されるはずです。先ほどお約束したように、トップレベルにあるテキストのフォントサイズがちゃんと大きく、しかも太字になりました。

図 1.5: h1タグを追加した結果

さて、いつものようにgit statusとgit diffを実行して、Gitにこれから何がコミットされるのかを学ぶことにしましょう。慣れてくれば、これらのコマンドを必要に応じて実行できるようになるでしょう。以下のステータスには、index.htmlに変更が発生していることが示されています。

[website (master)]$ git status
On branch master
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:   index.html

no changes added to commit (use "git add" and/or "git commit -a")

git diffの差分には、削除された1行が-記号で示され、追加された1行が+記号で示されています。

[website (master)]$ git diff
diff --git a/index.html b/index.html
index 4b5fa63..45d754a 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-hello, world
+<h1>hello, world</h1>

Unixのdiffユーティリティと同様に、コードやmarkupで変更された箇所が隣り合って表示されているので、どこがどう変更されたかがひと目でわかります²¹。

さて、これで変更点をコミットする準備が整いました。リスト 1.3では-aオプションと-mオプションを別々に指定して、変更点をすべてコミットしつつコミットメッセージを追加していますが、実際には-amのようにひとつにまとめることもできます（リスト 1.5）。

[website (master)]$ git commit -am "Add an h1 tag"

1.5.1 演習問題

1. git logコマンドを実行するとコミットメッセージだけが表示されます。これはこれで邪魔にならなくてよいのですが、他にも情報を表示したいこともあります。そこでgit log -pのように-pオプションを追加して実行し、コミットごとに差分を表示できることを確かめてみましょう。
2. リスト 1.4のh1タグの下にp（パラグラフ）タグを追加して、その中に「Call me Ishmael.」と書いてみましょう。変更結果は図 1.6のようになるはずです。（ここでうまくいかなくても大丈夫です。この演習の答えは 1.6のリスト 1.6で取り込まれます。）

図 1.6: 短いパラグラフを1つ追加した結果

1.6 HTML構造を追加する

h1タグはめでたくWebブラウザに表示されましたが（図 1.5）、h1タグやpタグだけでは「正しいフォーマットの」Webページとは言えません。まず、各ページにはhtmlタグを置き、その中にheadタグbodyタグを置き、さらにドキュメントタイプを指定する「doctype」が必要です。特にドキュメントタイプは、「HTML5」のようなHTMLバージョンを指定するときに使われます。なお、今の段階でこれらの意味がわからなくても心配ありません。詳しくは次のチュートリアル『HTML編』で説明します。

上で述べた注意点をindex.htmlに反映すると、完全なHTML構造ができあがります（リスト 1.6）。ここにはリスト 1.4のh1タグも、図 1.6のpタグも揃っています。なお、headタグの内側にあるtitleタグが空になっていますが、一般にはWebページには必ずタイトルを付けるべきです。index.htmlへのタイトルの追加は演習問題に回します（ 1.6.1）。

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title></title>
 5   </head>
 6   <body>
 7     <h1>hello, world</h1>
 8     <p>Call me Ishmael.</p>
 9   </body>
10 </html>

先ほどのコード（リスト 1.4）よりもだいぶ中身が増えてきたので、1行ずつ分解して確認してみましょう。

1. ドキュメントタイプ宣言
2. html開始タグ
3. head開始タグ
4. title開始タグと閉じタグ
5. head閉じタグ
6. body開始タグ
7. トップレベル見出し（h1）
8. 演習（ 1.5.1）で使ったパラグラフ
9. body閉じタグ
10. html閉じタグ

いつものようにgit diffを実行すれば変更内容を確認できます（リスト 1.7）。

[website (master)]$ git diff
diff --git a/index.html b/index.html
index 4b5fa63..afcd202 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,10 @@
-<h1>hello, world</h1>
+<!DOCTYPE html>
+<html>
+  <head>
+    <title></title>
+  </head>
+  <body>
+    <h1>hello, world</h1>
+    <p>Call me Ishmael.</p>
+  </body>
+</html>

リスト 1.7には何行もの差分が表示されていますが、Webブラウザの表示を更新してもほとんど違いが現れていません（図 1.7）。変更前の図 1.6との違いは、せいぜいトップレベル見出しの上の空きスペースの高さがほんの少し変わったぐらいです。変更後のHTML構造は大きく改善されましたが、これは主にページをHTML5標準に準拠させるためだけのものでしかありません²²。

図 1.7: HTML構造を追加しても見た目はほとんど変わらない

他に新しく追加したファイルはないので、git commit -amを実行すればすべての変更点がコミットされます（リスト 1.8）。

[website (master)]$ git commit -am "Add some HTML structure"

1.6.1 演習問題

1. index.htmlファイルに「A whale of a greeting」というタイトルを追加し、ブラウザ表示のどこが変わるかを見てみましょう。なおGoogle Chromeでの表示結果を図 1.8に示します。
2. 新しいタイトルを追加するコミットを実行してみましょう。コミットメッセージは自分で考えたものを使ってください。コミット内容が期待どおりであるかどうかをgit log -pコマンドで確認しましょう。
3. リスト 1.6の内容をW3CのHTMLバリデーターに貼り付けて、Webページがまだ有効ではない（つまりエラーが表示される）ことを確認してみましょう。
4. 上のバリデーターを使って、タイトルを入力した現在のindex.htmlが有効になっている（つまりエラーが表示されない）ことを確認しましょう。なお、warning（警告）は無視して構いません。

図 1.8: ブラウザにページのタイトルが表示されたところ

1.7 まとめ

本節で扱った重要なコマンドを表 1.1にまとめます。ここには演習問題で扱った内容も含まれます。