1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Git
  6. »
  7. 【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

お魚くわえた@It_is_Rです。

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

It is R

It is R

りこ師匠! 今回はGitの使い方を教えてくれるんですよね!


りこ

りこ

そうね。インストールがまだの人は前回の記事を見てね

目次
  1. Gitの基礎知識
  2. Gitの設定をしよう ( git config )
  3. Gitで管理するファイルを作成する
  4. コミットするまでの流れ
  5. 管理中のファイルに変更を加える
  6. まとめ

Gitの基礎知識

まずは、Gitの基礎知識を学びましょう。

Git用語について

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

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

It is R

It is R

なんか……よく分からんですね


りこ

りこ

うん……でも実際にやってみると分かってくると思うわ。
次はコミットするまでの流れを解説するね

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

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

  1. 作業ディレクトリ(ワークツリー)で開発していきます。
  2. ある程度開発が進んだら、ステージング・エリア(インデックス)に追加します。ここで「ステージ済」状態となります。(①ステージ)
  3. ステージング・エリアに保存したものを、ローカルリポジトリにコミットします。(②コミット)

Git

りこ

りこ

コミットするには、一旦ステージング・エリアに追加する必要があるの。
この機能のおかげで、全体を綺麗なまとまりでリポジトリに保存できるの


It is R

It is R

2段階必要なんですね


りこ

りこ

あと、今回はローカルのみの解説だけど、リモートに保存したい場合は、この後にプッシュって作業を行うの


It is R

It is R

なんかこんがらがりそうなので、後日の記事でお願いします

Gitの設定をしよう ( git config )

Gitの設定をしていきます。
ユーザー名とEメールアドレスの設定をしてみましょう。

ターミナルを開いて、以下のコマンドを入力します。

$ git config --global user.name "ユーザー名"
$ git config --global user.email "メールアドレス"

また、設定を確認したい場合は、以下のコマンドを使います。

$ git config -l --global

Gitで管理するファイルを作成する

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

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

$ mkdir git
$ cd git

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

$ touch script.js
$ ls
script.js

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

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

りこ

りこ

コンソールにバージョンを表示するだけのソースを用意しておいたわ


It is R

It is R

これならバージョンが分かりやすい!

コミットするまでの流れ

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

イニシャライズ ( 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 ..." 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

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

$ 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 ..." to unstage)

	new file:   script.js

次は、コミットしてみましょう。

コミットする ( git commit )

コミットするには、git commitコマンドを使います。
-mをつけることで、エディタを開くことなくコメントをつけることができます。

$ git commit -m "add first file"

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

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

管理中のファイルに変更を加える

では、管理中のファイルを変更してみます。

script.jsを変更する

では、script.jsファイルを変更してみましょう。

$ vim script.js

以下のように変更します。

//バージョン1 => バージョン2
console.log("バージョン2");

git statusで確認します。

$ git status   
On branch master
Changes not staged for commit:
  (use "git add ..." to update what will be committed)
  (use "git checkout -- ..." to discard changes in working directory)

	modified:   script.js

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

「modified: script.js」というのは、script.jsが変更されたということです。

変更された場所を知る ( git diff )

たった今、script.jsの内容をバージョン1からバージョン2に書き直しました。
その変更された場所を知りたい時には、以下のコマンドを使います。

$ git diff
diff --git a/script.js b/script.js
index 80ba85c..4278287 100644
--- a/script.js
+++ b/script.js
@@ -1 +1,2 @@
-console.log("バージョン1");
+//バージョン1 => バージョン2
+console.log("バージョン2");

また、これはステージング・エリアに追加する前に使えるコマンドですので、git addした後の場合はcachedのオプションを使います。

$ git diff --cached
diff --git a/script.js b/script.js
index 80ba85c..0f6501a 100644
--- a/script.js
+++ b/script.js
@@ -1 +1 @@
-console.log("バージョン1");
+//バージョン1 => バージョン2
+console.log("バージョン2");

変更を取り消す

しかし、このバージョン2は間違いだったとしましょう。
どうにかバージョン1に戻したいわけです。

そんな時は、以下のコマンドを使います。

$ git checkout -- script.js

すると、script.jsの中身は、バージョン1に戻ります。
また、これもステージング・エリアに追加する前に使えるコマンドです。

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

もしもgit addした後でしたら、以下のコマンドを使います。

$ git reset --hard HEAD
HEAD is now at 730d491 add first file
$ cat script.js
console.log("バージョン1");

git resetについては後ほど紹介します。

ログを確認 ( git log )

ログを確認するときは、git logを使います。
これでコミットが今どうなっているのか見ることができます。

$ git log      
commit 730d49116ababefd9d3ec1597b870169bf764f82 (HEAD -> master)
Author: xxx 
Date:   Wed Mar 7 01:56:52 2018 +0900

    add first file

git logによると、今現在、コミットが一つあることが分かります。

過去のバージョンに戻る ( git reset )

では、過去のバージョンに戻る方法です。

過去のバージョンに戻るというのは、過去にコミットしたところに戻るということになります。

先ほども紹介しましたが、以下のようにすると、直前のコミットに戻ることができます。

$ git reset --hard HEAD

このHEADというのが、最新のコミットという意味なので、今変更した部分を取り消すというふうになります。
HEAD^とすると、その前のコミットという意味です。今変更したファイルをコミットしてしまったが、その前に戻りたい場合などに使います。

--hardは、作業ディレクトリも、ステージング・エリアも両方戻したい場合に使います。

また、HEADではなく、git logで表示される、commitの後の文字列を入力すると、そのバージョンに戻ることができます。

$ git reset --hard 730d49116ababefd9d3ec1597b870169bf764f82

まとめ

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

It is R

It is R

よーし、Gitの使い方が分かってきたぞ。自分、私生活管理アプリの開発段階をGitで管理しようと思うんです


りこ

りこ

そんなん作ってたんだ。めずらしくいい心がけね


It is R

It is R

はい。りこ師匠の私生活をみっちり管理していこうと思います


りこ

りこ

なるほど、あたしの私生活を……えっ、あたしっ!?


It is R

It is R

やだなぁ、It is Rの私生活なんて誰も興味ないですよ


りこ

りこ

てめー、そういう問題じゃないわっ!! (蹴

りこ
R
R

It is R

It is R

ぎえぇーっ! 重い! りこ師匠なみに重い!


りこ

りこ

やかましいわっ!

まだ、紹介しきれていない部分もあるので、次回以降の記事で少しずつ紹介していければと思います。

この企画の一覧はこちら

  1. 【Gitの使い方 – その1】GitHubのアカウントを取得する方法!
  2. 【Gitの使い方 – その2】GitをMacにインストールする方法!
  3. 【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!
  4. 【Gitの使い方 – その4】ブランチを使って履歴を分岐させる方法
  5. 【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

スポンサードリンク

関連コンテンツ

オススメ記事

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

gulp

gulp4完全攻略ガイド。インストールから使い方まで徹底解説!

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回はgulp4の使い方を、インストールか

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目とな

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

【Android Studio】新規プロジェクトを作成する方法。

インスタント焼きそばを作ろうとすると、なぜか焼うどんになります。 @It_is_R です。 しかも、ラーメン作ろうと思うと焼きそばができあがります。 前回、 Android Studio のイ

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

コメントをどうぞ!

メールアドレスが公開されることはありません。