Gitの使い方。バージョン管理する流れを、実際にやってみよう

こんにちは。@It_is_Rです。

前回「【Mac】Gitのダウンロードとインストールの手順」では、Gitのインストーラを公式サイトからダウンロードしてインストールする方法と、Homebrewを使った方法の、２つを紹介しました。

Gitの使い方、第3回目の今回は、実際にGitを使ってバージョン管理をしてみようと思います。

Gitでよく使われる用語

Gitには様々な用語があります。この用語は頻繁に使われるので、覚えておくといいでしょう。

作業ディレクトリ	管理しているファイルがあるディレクトリ。作業しているディレクトリ
ステージング・エリア （インデックス）	コミットしたいデータ（状態）を登録しておく場所
リポジトリ	コミットした時のファイルやディレクトリの状態を保存しておく場所。ローカルリポジトリとリモートリポジトリがある
ステージ	作業した状態を、ステージング・エリア（インデックス）に登録すること
コミット	管理しているデータの状態をリポジトリに記録すること
クローン	リモートリポジトリをローカルリポジトリにコピーして保存すること
ブランチ	バージョン管理を枝分かれさせる機能
プッシュ(Push)	ローカルリポジトリをリモートリポジトリへアップロードすること
プル(Pull)	リモートリポジトリをローカルリポジトリにダウンロードすること

コミットするまで（ローカルリポジトリに保存するまで）の流れ

ではコミットするまでの流れを見ていきましょう。

1. 作業ディレクトリ（ワークツリー）で、普段通りに開発などの作業していきます。
2. ある程度作業が進んだら、その状態を、ステージング・エリア（インデックス）に登録します。ここで、これまでの作業が「ステージ済」となります。（①ステージ）
3. 再び作業を始めます。作業では色んなファイルを扱うと思います。今の作業の状態を保存しておきたいな、と思ったら、そのファイルを指定して、ステージします。（全てのファイルを一度にステージすることもできます）
4. 切りのいいところで、ステージング・エリアに登録（ステージ）した作業を、ローカルリポジトリに、コメントをつけて記録します。（②コミット）

では、実際に作業をしながら、その使い方を見ていきましょう。

管理するファイルを作成

Gitの使い方を覚える前に、管理するものを作っておきます。

まず、フォルダを作りましょう。
例として、gitという名前のフォルダを作成し、その中へ入ります。

$ mkdir git
$ cd git

今回はJavaScriptのファイルをバージョン管理してみましょう。
以下のコマンドで、jsファイルを作成します。

$ touch script.js
$ ls
script.js

script.jsの内容を変更します。
内容はなんでもいいのですが、分かりやすいように以下のように入力します。

console.log("バージョン１");

ファイル(script.js)のなかに、上の命令を書き込むコマンドがこちらです。

$ echo 'console.log("バージョン１");' > script.js
$ cat script.js
console.log("バージョン１");

このscript.jsファイルが、いま作業しているものと考えてください。

では、コミットするまでの流れを見ていきましょう。

Gitでイニシャライズする( git init )

git initコマンドで、イニシャライズすることができます。

git initと打ち込むと、「.git」フォルダが生成され、イニシャライズされます。

$ git init
Initialized empty Git repository in /Users/ユーザー名/Documents/git/.git/

ここでステータスを確認してみましょう。
git statusで、ステータスを見ることができます。

$ git status
On branch master

No commits yet

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

	script.js

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

「Untracked files」の部分に表示されたファイルが、追跡されてないファイルです。

では、このファイルをステージング・エリアに追加します。というよりも、「ファイルを作ったいまの状態」をステージングエリアに登録する、と考えたほうが、後々、分かりやすくなるかもしれません。

登録するにはgit addを使います。

ステージング・エリアに追加 ( git add )

git addは、今の状態をステージング・エリアに追加するコマンドです。
では、先ほど作ったscript.jsをステージング・エリアに追加します。以下のコマンドを入力します。

$ git add script.js

これで、script.jsの今の状態（「console.log(“バージョン１”);」と書かれている）が、追加されます。

インデックスに追加したいファイルが一つだけの時は、このようにファイル名を指定すればいいですが、ワークツリー全体を追加したい場合には、以下のコマンドが便利です。

$ git add .

ワイルドカードも使えます。

$ git add *.js	//jsファイル全部
$ git add ??.js	//ファイル名が2文字のjsファイル全部

git statusで確認すると、次のようになります。

$ git status
On branch master

No commits yet

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

	new file:   script.js

これで、作成したファイルをステージングエリアに追加することができました。
続いて、この追加したファイルの状態を、リポジトリにコミットします。

コミットする ( git commit )

コミットするには、git commitコマンドを使います。

$ git commit

するとエディタ（Vim）が開くので、コミットにたいするコメント（コミットメッセージ）を入力します。
iを押して挿入モードにし、どういうコミットなのか、を入力します。

今回は「はじめてのコミット」と入力しました。
Vimはちょっと特殊な使い方なので、使ったことがない人は、よく分からないかもしれないのですが、上の画像を参考に入力してみてください。

また、-mを使うで、エディタを開くことなくコメントをつけることができます。こちらの方が簡単ですね。

$ git commit -m "はじめてのコミット"

これで、ローカルリポジトリにコミットすることができました。
ここでgit statusコマンドを使うと、以下のように表示されます。

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

なぜステージしてからコミットするのか

さて、どうしていったんステージングエリアにaddしてからコミットするのでしょうか。
少し作業を中断して、考えてみます。

つづいて、さきほどコミットしたものを確認してみましょう。

コミットした履歴を確認する（ git log ）

コミットの履歴を確認するには、git logを使います。

$ git log
commit 2a4316eeb28d17613b41a74cfee75c55345fe411 (HEAD -> master)
Author: R
Date:   Tue Aug 18 00:00:00 2020 +0900

    はじめてのコミット

はじめてのコミットというコミットが確認できます。

ここで、再びscript.jsでプログラミングをしていた作業を再開していきましょう。

ファイルに変更を加える

では、script.jsファイルに変更を加えていきます。

script.js

let rico = "りこ";
rico = "あほ" + rico;
rico = "まぬけ" + rico;
rico = "おばか" + rico;
console.log(rico);

console.log("バージョン１");

どこが変更されたのか確認する（ git diff ）

元に戻す前に、どこが変更されたのか確認してみましょう。

では、script.jsにどんな変更があったのかを見てみましょう。
差分を表示するには、git diffというコマンドを使います。

$ git diff
diff --git a/script.js b/script.js
index 80ba85c..d462c24 100644
--- a/script.js
+++ b/script.js
@@ -1 +1,7 @@
+let rico = "りこ";
+rico = "あほ" + rico;
+rico = "まぬけ" + rico;
+rico = "おばか" + rico;
+console.log(rico);
+ 
 console.log("バージョン１");

さて、次はIt is Rが書き込んでしまった、余計なソースを、もとに戻したいと思います。

変更を取り消す、戻す（ git checkout ）

先ほど、つい余計なソースを書き込んでしまいました。

今現在のscript.jsファイルはこのようになっています。

$ cat script.js
let rico = "りこ";
rico = "あほ" + rico;
rico = "まぬけ" + rico;
rico = "おばか" + rico;
console.log(rico);

console.log("バージョン１");

そこで、先ほどコミットしたところまで、戻してみます。
git checkoutというコマンドを使います。

$ git checkout script.js
Updated 1 path from the index

これで、元に戻ったはずです。
確認してみましょう。

$ cat script.js
console.log("バージョン１");

余計なソースが消え、元の状態に戻っています。

また、ワークツリー全体を追加したい場合には、addのときと同様に、以下のコマンドが便利です。

$ git checkout .

ワイルドカードも使えます。

$ git checkout *.js	//jsファイル全部
$ git checkout ??.js	//ファイル名が2文字のjsファイル全部

２回目、３回目のコミット

さて、先ほどは、ついうっかり書いてしまった余計なソースを元に戻しました。
今度は、真面目にソースを変更していきます。

では、script.jsの内容を、以下のように書き換えてみましょう。

script.js

console.log("バージョン２");

「バージョン１」を「バージョン２」に変更しました。
これをコミットしたいのですが、コミットする前に、addしなくてはいけないんでしたね。

$ git add script.js

それでは、コミットしてみます。

$ git commit -m "バージョン２に変更"

git logで確認してみると、このようになります。

$ git log
commit 8bd2b87cd3840b021d10934738345699ff1f95b9 (HEAD -> master)
Author: R
Date:   Tue Aug 18 00:02:00 2020 +0900

    バージョン２に変更

commit 2a4316eeb28d17613b41a74cfee75c55345fe411
Author: R
Date:   Tue Aug 18 00:00:00 2020 +0900

    はじめてのコミット

script.js

console.log("バージョン３");

$ git add script.js
$ git commit -m "今日のりこ師匠のパンツ、何色だろう"

$ git log
commit 0c6447736d8e67a223bcd32bf0f9d195fa547419 (HEAD -> master)
Author: R
Date:   Tue Aug 18 00:00:04 2020 +0900

    今日のりこ師匠のパンツ、何色だろう

commit 8bd2b87cd3840b021d10934738345699ff1f95b9
Author: R
Date:   Tue Aug 18 00:00:02 2020 +0900

    バージョン２に変更

commit 2a4316eeb28d17613b41a74cfee75c55345fe411
Author: R
Date:   Tue Aug 18 00:00:00 2020 +0900

    はじめてのコミット

Gitのコミットメッセージ（コメント）を変更する（ git commit –amend ）

先ほど、本当は「バージョン３に変更」というふうにコミットメッセージを入れようとしたのですが、つい、間違えて入力してしまいました。

今現在、コミット履歴はこのようになっています。

$ git log
commit 0c6447736d8e67a223bcd32bf0f9d195fa547419 (HEAD -> master)
Author: R
Date:   Tue Aug 18 00:00:04 2020 +0900

    今日のりこ師匠のパンツ、何色だろう

commit 8bd2b87cd3840b021d10934738345699ff1f95b9
Author: R
Date:   Tue Aug 18 00:00:02 2020 +0900

    バージョン２に変更

commit 2a4316eeb28d17613b41a74cfee75c55345fe411
Author: R
Date:   Tue Aug 18 00:00:00 2020 +0900

    はじめてのコミット

コミットメッセージを変更するには、git commit --amendというコマンドを使います。

$ git commit --amend -m "バージョン３に変更"

これで先ほどのコミットメッセージが変更されます。

$ git log
commit 7194931e33ac9702919d553d399a802b04b3b77a (HEAD -> master)
Author: R
Date:   Tue Aug 18 00:00:04 2020 +0900

    バージョン３に変更

commit 8bd2b87cd3840b021d10934738345699ff1f95b9
Author: R
Date:   Tue Aug 18 00:00:02 2020 +0900

    バージョン２に変更

commit 2a4316eeb28d17613b41a74cfee75c55345fe411
Author: R
Date:   Tue Aug 18 00:00:00 2020 +0900

    はじめてのコミット

コミット履歴を指定して、好きなところに戻る

現在、３つのコミットがあり、script.jsの内容を「バージョン３」に変更したところです。
では、ここでふと、「バージョン１」に戻したい、と思ったとします。

そんなときは、git reset --hardを使います。

まず、git logで、戻りたいコミットを探します。

$ git log
commit 7194931e33ac9702919d553d399a802b04b3b77a (HEAD -> master)
Author: R
Date:   Tue Aug 18 00:00:04 2020 +0900

    バージョン３に変更

commit 8bd2b87cd3840b021d10934738345699ff1f95b9
Author: R
Date:   Tue Aug 18 00:00:02 2020 +0900

    バージョン２に変更

commit 2a4316eeb28d17613b41a74cfee75c55345fe411
Author: R
Date:   Tue Aug 18 00:00:00 2020 +0900

    はじめてのコミット

「バージョン１」は、最初に作ったものなので「はじめてのコミット」とコメントがつけられたコミットです。

では、このコミットのところまで戻りましょう。

commitと書かれた部分の右側にある文字列をコピーして、git reset --hardの後ろに貼り付けます。

$ git reset --hard 2a4316eeb28d17613b41a74cfee75c55345fe411
HEAD is now at 2a4316e はじめてのコミット

これで「バージョン１」に戻すことができました。

$ cat script.js
console.log("バージョン１");

$ git log
commit 2a4316eeb28d17613b41a74cfee75c55345fe411 (HEAD -> master)
Author: R
Date:   Tue Aug 18 00:00:00 2020 +0900

    はじめてのコミット

過去のコミットに戻したあと、やっぱりそのあとのコミットに戻す（ git reflog ）

git reset --hardで戻したあと、やっぱりそのあとのコミットに戻したいときもあるでしょう。
そんなときは、git reflogを使います。

git reflogを使うと、Gitを操作した履歴を見ることができます。

$ git reflog
2a4316e (HEAD -> master) HEAD@{0}: reset: moving to 2a4316eeb28d17613b41a74cfee75c55345fe411
7194931 HEAD@{1}: commit (amend): バージョン３に変更
0c64477 HEAD@{2}: commit: 今日のりこ師匠のパンツ、何色だろう
8bd2b87 HEAD@{3}: commit: バージョン２に変更
2a4316e (HEAD -> master) HEAD@{4}: commit (initial): はじめてのコミット

では、この履歴から「バージョン２」に戻してみたいと思います。
git reflogの結果を見ると、「バージョン２に変更」の履歴は、HEAD@3となっています。

$ git reflog
2a4316e (HEAD -> master) HEAD@{0}: reset: moving to 2a4316eeb28d17613b41a74cfee75c55345fe411
7194931 HEAD@{1}: commit (amend): バージョン３に変更
0c64477 HEAD@{2}: commit: 今日のりこ師匠のパンツ、何色だろう
8bd2b87 HEAD@{3}: commit: バージョン２に変更
2a4316e (HEAD -> master) HEAD@{4}: commit (initial): はじめてのコミット

このHEAD@3に、git reset --hardを使って、戻します。

$ git reset --hard HEAD@{3}
HEAD is now at 8bd2b87 バージョン２に変更

これで、「バージョン２」に戻すことができました。

$ cat script.js
console.log("バージョン２");

まとめ

今回はGitの使い方として、実際にGitを使っている時を想定して紹介してみました。

このシリーズの一覧はこちら

1. GitHubのアカウントを作成する方法
2. 【Mac】Gitのダウンロードとインストールの手順
3. Gitの使い方。バージョン管理する流れを、実際にやってみよう
4. 【Git】ブランチを使って履歴を分岐させる方法
5. 【Git】リモートリポジトリへPushする方法

• Tweet
• Facebook
• はてブ
• Pocket