基礎から学びたい人のためのGit入門【図解たっぷり】

今どの現場でもほとんどGitが使われています。でも初学者には「なんか難しくて理解できない！」って人は多いですよね。私の現場にもデザイナーや新米のエンジニアなどは、そこで困っている人が多いです。

吉田先生

今回はできるだけやさしく多くの図解を使って、Gitを解説したいと思います。

• サンプルサイトを作りながら学びます
• リポジトリの作成(初期化)
• リポジトリの状態の確認
• インデックスへの追加
• コミットする
• 変更点の確認
• コミットの履歴を確認
• まとめ

なぜGitを使うのか

Web制作でこんなことをしてませんか？

私はよくしていました。作業が終わったらその日のバックアップを日付ごとにとっておく。別サーバーにもコピーして置いておいたりして、万が一に備えていました。

もうお分かりかと思いますが、Gitを使うとこんなことをする必要がありません！同じようなことをもっとスマートに行うことができます。別サーバーにコピーもGithubなどを使うと簡単にできてしまうのです。良いですよね。もう日付をつけてたくさんコピーを作る必要はないのです。

Gitの場合はこんな感じです。

# 以下で履歴の状態を保存
$ git add .
$ git commit -m "Aboutページ作成"

きりの良いところで上のコマンドを実行すると、その時の状態を保存してくれます。例えば以下のように番号とやったことで保存されます。

もちろん、いつでもその時の状態に戻ることができます。例えば「headerの作成」に戻りたい時は、こんなコマンドでOK。

git checkout 806f98f

さらにリモートのGithubなどにpushすることでバックアップを取ることも出来ています。すごいですよね。

# 以下でGithubに保存
$ git push origin master

ブランチを使うことで思い切ったコードを書ける

Gitには「ブランチ」という機能があります。これはとても便利な機能で例えて言うなら「別名で保存」ということになります。みなさんも使ったことありますよね？別名で保存。

例えばチャレンジングなコードを書く場合がありますよね。「出来るかわからないけど、とにかくいろいろやってみよう」なんて場合です。そんな時は、やってみた結果コードはぐちゃぐちゃになった、ということは良く起こります。

なので失敗しても良いようにファイルを別名で保存して「別ファイル」を作ってからやることがあるかと思います。もし失敗しても別ファイルで取ってあるので、最悪それに戻せば良いという感じですね。

Gitのブランチという機能を使うとこんなことは必要なくなります！ブランチというのは別の作業場所みたいなものです。それこそ別名保存したファイルと同じです。そこであればどんなに失敗しても大丈夫。簡単にもとのコードに戻すことができるのです。

例えばこんな感じで枝分かれした感じで作成することができます。下の例はマスターは通常の開発で、トップページデザイン・ブランチは枝分かれした開発になります。このブランチはマスターには影響しないので、いくらチャレンジングなコードを書いても大丈夫。

ダメだったら捨てれば良いし、上手く行ったらトップページデザイン・ブランチをマスターに合体させれば良いのです。これをマージと言います。

コードで書くとこんな感じ。

# ブランチを作成
$ git checkout -b modify-toppage

# 元のブランチに戻る
$ git checkout master

# マージする（コードを合体させる）
$ git merge modify-toppage

上の例はmodify-toppageというブランチ（別の作業場所）を作成し、作業したと元のブランチに戻るようなコマンドになります。

サンプルサイトを作りながら学びます

今回はzooloppa [ズーロッパ] という架空の動物園のトップページ（index.html）を作成する過程を通して説明します。

リポジトリの作成(初期化)

このレッスンではGitでのバージョン管理の方法について学んでいきます。まず初めに、リポジトリを作成しましょう。

リポジトリとは、ファイルやディレクトリの「状態」を記録する場所のようなものです。このセクションでは、その記録場所であるリポジトリの作成を行っていきます。

git initコマンドでリポジトリの初期化

リポジトリを作成する為には初期化という処理を行います。この「初期化」という処理は、「git init」というコマンドを使用します。また、既存リポジトリを改めて初期化したい場合にも「git init」が使用されます。では実際に、リポジトリの作成(初期化)を行ってみましょう。

$ mkdir zooloppa　 ＃ディレクトリの作成
$ cd zooloppa      ＃zoolppaディレクトリに移動
$ git init　　　　　＃初期化
Initialized empty Git repository in home/ubuntu/workspace/zooloppa/.git/

まずディレクトリを作成し、そのディレクトリに移動しています。そして初期化という処理を実行していますね。これでリポジトリの新規作成が完了です。

作成されると最後にメッセージが表示されます。これは指定したディレクトリに「.git」というディレクトリが作成されたと書いてありますね。

試しに「ls -a」という、ディレクトリ内の全てのファイル(隠しファイル含む)を表示するコマンドを実行してみましょう。見てみると.「git」というファイルが作成されています。

$ ls -a
./  ../  .git/

この「.git」ファイルこそ「リポジトリ」になります。この中にプログラムの変更履歴などのデータが記録されます。

Gitリポジトリの状態とは

Gitには以下のような3つの状態があります。これらを上手く使ってリポジトリで管理できるようにします。

前セクションで指定したディレクトリ(zooloppa)は初期化によってGitで管理する事が可能な状態になりました。この管理可能なディレクトリをワークツリーと呼びます。

ローカルでファイルを作成したり、編集したり、消去したりという作業、要するにいつもやっている作業はこのワークツリーで管理されます。以下はワークツリーにindex.htmlとstyle.cssがある状態です。

このワークツリーで作業した内容をリポジトリに記録するためには、いくつかのステップを踏む必要があります。

まず、インデックスへの追加を行います。インデックスとは、リポジトリに記録する前に「一時的に置いておく場所」のようなものです。

インデックスという一時的な場所がある事で、リポジトリへ記録する必要があるものと不必要なものを分別することができます。そして次に、コミットという処理を行う事でリポジトリへ記録する事が出来ます。

では、Git上でファイルが上記手順のどの段階であるのかを確認する方法を見ていきましょう。ファイルの状況を確認するためには「git status」というコマンドを実行します。では、ファイルの作成と状況の確認を行ってみますね。

$ touch index.html　　＃ファイルを作成
$ 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)

「git status」コマンドを実行するとメッセージが表示されました。「Untracked files」とありますね。この場合は、インデックスに追加・コミットの両方が行われていないという事になります。そして、赤文字部分が追加・コミットされていないファイル名です。

インデックスへの追加

では、インデックスへの追加を行なってみましょう。インデックスへの追加には「git add」というコマンドを使用します。指定したファイルのみの追加や、ディレクトリの全てのファイルの追加など使い分けることも出来ます。では、実際にやってみましょう。

$ git add index.html

上記のコマンドを実行すると「index.html」が作成されたという情報とファイルの内容が、インデックスに追加されます。複数あるファイルを一度に登録したい場合は「git add .」で実行することができます。

これでインデックスへの追加処理は完了です。下の図のようなイメージでワークツリーからインデックスに追加されています。

では、きちんと追加されているか「git status」で確認してみましょう。

$ git status
On branch master

No commits yet

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

        new file:   index.html

「changes to be committed」とありますね。ファイルの内容をコミットする準備が整ったことが分かります。

コミットする

ではいよいよ、リポジトリへの記録を行なっていきます。この処理は「git commit」というコマンドを使用します。では、実際にやってみましょう。

$ git commit -m "Create index.html"
[master (root-commit) ac0c942] Create index.html
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 index.html

この「-m」とはコミットメッセージを記述するためのものです。コミットメッセージとは、コミットの内容をあらわすメッセージです。この例では「Create index.html」としていますね。このように概要が分かりやすいメッセージを心がけましょう。

本チュートリアルでは英語でメッセージを記述しますが、日本語でのメッセージもOKです。日本語でも英語でも後で見返したときに何をしたのかわかるメッセージを記述しましょう。

では、ステータスを確認してみましょう。

$ git status
On branch master
nothing to commit, working tree clean

全てコミット済みであることが分かりますね。これで、リポジトリの初期化～コミットまでを行う事が出来ました。

変更点の確認

このセクションでは、ワークツリーでのファイル内容・インデックスに追加された内容・コミットされた内容を比較する方法を学びます。つまり差分を確認するという事ですね。

ワークツリーとインデックス

ファイルに変更を加え、ワークツリーとインデックスの差分を確認します。では「index.html」に以下のタグを書き、コマンドを実行してみましょう。

index.html

<h1>zooloppa</h1>
<img src=”panda.jpg” alt=”panda”>
</code>

$ git diff
diff --git a/index.html b/index.html
index e69de29..a6060e6 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,2 @@
+<h1>zooloppa</h1>
+<img src="panda.jpg" alt="panda">
\ No newline at end of file

ワークツリーとインデックスの「index.html」の違いは、h1とimgタグがあるかないかである、と表示されています。では、変更をインデックスに追加してみましょう。

$ git add index.html
$ git diff

インデックスに追加後、もう１度「git diff」を実行しています。

ワークツリーの内容を追加しているのでインデックスとワークツリーの差分はない状態です。ですので「git diff」としても何も表示されません。

ワークツリーとリポジトリ

では次に、ワークツリーとリポジトリ(最新のコミット内容)を比較してみましょう。

ワークツリーとリポジトリを比較するには「git diff HEAD」とします。

$ git diff HEAD
diff --git a/index.html b/index.html
index e69de29..a6060e6 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,2 @@
+<h1>zooloppa</h1>
+<img src="panda.jpg" alt="panda">
\ No newline at end of file

リポジトリ上では、まだ何の変更もされていないことになっているので、ワークツリーと差分があると表示されます。

インデックスとリポジトリ

インデックスとリポジトリを比較するには「git diff --cached」とします。

$ git diff --cached
diff --git a/index.html b/index.html
index e69de29..653deba 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,2 @@
+<h1>zooloppa</h1>
+<img src="panda.jpg" alt="panda">
\ No newline at end of file

インデックス上では変更が反映されていますが、リポジトリはまだですね。なので差分があると表示されます。では、インデックスに追加した内容をコミットしましょう。

$ git commit -m "Add h1 and img to index"
[master 5795ead] Add h1 and img to index
 1 file changed, 2 insertion(+)
$ git diff
$ git diff HEAD
$ git diff --cached

コミット後に「git diff」を行っています。ワークツリー・インデックス・リポジトリ全てで差分がないことが分かりますね。

コミットの履歴を確認

履歴を確認する前にもうひとつコミットをしてみましょう。今回はトップページのロゴ部分の変更があったという想定にします。ロゴに日本語を入れたという変更になります。

ワークツリーにあるindex.htmlを開いて以下のように変更します。

index.html

<h1>zooloppa</h1>
<img src=”panda.jpg” alt=”panda”>
↓
<h1>zooloppa　ズーロッパ</h1>
<img src=”panda.jpg” alt=”panda”>
</code>

$ git diff
diff --git a/index.html b/index.html
index a6060e6..7bdac01 100644
--- a/index.html
+++ b/index.html
@@ -1,2 +1,2 @@
-<h1>zooloppa</h1>
+<h1>zooloppa ズーロッパ</h1>
 <img src="panda.jpg" alt="panda">
(master) $ git add index.html
(master) $ git commit -m "Change logo"
[master e36ac23] Change logo
 1 file changed, 1 insertion(+), 1 deletion(-)

では、コミットの履歴や詳細を確認していきます。コミットの履歴を確認するには「git log」というコマンドを実行します。では、やってみましょう。

$ git log
commit e36ac23ed4126611d739b00129abe5a6cd3e7aff (HEAD -> master)
Author: sakurai <test@test.com>
Date:   Tue May 22 10:45:23 2018 +0000

　　Change logo

commit 5795ead47112cad3ea75b1e1f75b835c26d65c4c
Author: sakurai <test@test.com>
Date:   Tue May 22 10:37:34 2018 +0000

    Add h1 and img to index

commit ac0c9422f8383f2b11f9ab101e9046b188919ffe
Author: sakurai <test@test.com>
Date:   Tue May 22 09:57:11 2018 +0000

    Create index.html

今までに行ったコミットについて表示されています。「commit」に続く部分はそのコミットのハッシュが書かれています。ハッシュとはコミットを指定する場合などに使用されるものです。このハッシュを指定して特定のコミットの削除などを行います。

--oneline

また「git log」には様々なオプションがあります。いくつか挙げてみます。まずは「--oneline」です。このオプションを付けてコマンドを実行すればコミットの履歴が１行で表示されます。沢山のコミット履歴がある場合などは、見やすくなります。

(master) $ git log --oneline
e36ac23 (HEAD -> master) Change logo
5795ead Add h1 and img to index
ac0c942 Create index.html

--pretty=short

このオプションは日付を省略した情報を確認する事が出来ます。「short」ではなく「full」とすればコミットの詳しい情報を知ることが出来ます。

$ git log --pretty=short
commit  e36ac23ed4126611d739b00129abe5a6cd3e7aff (HEAD -> master)
Author: sakurai <test@test.com>

    Change logo

commit  5795ead47112cad3ea75b1e1f75b835c26d65c4c
Author: sakurai <test@test.com>

    Add h1 and img to index

commit  ac0c9422f8383f2b11f9ab101e9046b188919ffe
Author: sakurai <test@test.com>

    Create index.html

組み合わせる

いくつかのオプションを組み合わせて使用する事も出来ます。では、「--oneline」とファイルの変更点を知る事の出来る「--stat」を組み合わせて実行してみましょう。

(master) $ git log --oneline --stat
e36ac23 (HEAD -> master) Change logo
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
5795ead Add h1 and img to index
 index.html | 2 ++
 1 file changed, 2 insertions(+)
ac0c942 Create index.html
 index.html | 0
 1 file changed, 0 insertions(+), 0 deletions(-)

変更された場合は(+)の欄に、削除の場合は(-)の欄に変更数が表示されます。また、何行目が変更されたのかが、ファイル名の横に表示されます。このように状況に合わせて使い分けが出来るという事ですね。

まとめ

リポジトリの新規作成or既存リポジトリを再度初期化したい場合は「git init」を実行します。リポジトリの状態の確認は「git status」です。

リポジトリへの記録(コミット)をするには「git commit」を実行します。「git commit -m」とすると、続けてリポジトリの内容を表すメッセージを記述できます。

コミットの履歴は「git log」を実行して確認しましょう。ワークツリーとインデックスとコミットを比較して差分を確認するには「git diff」を実行します。