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

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


りこ

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

Gitの基礎知識

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

Git用語について

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

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

It is R

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


りこ

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

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

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

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

Git

りこ

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


It is R

2段階必要なんですね


りこ

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


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

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

コミットするまでの流れ

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

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

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


りこ

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


It is R

はい。りこ師匠の私生活をみっちりカメラに収めて、管理していこうと思います


りこ

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


It is R

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


りこ

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

りこ
R
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してみよう!

スポンサードリンク

関連コンテンツ

オススメ記事

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 WordPress テーマ自作シリーズ第五回目です。 今回から、本格的にテーマを作っていきます。 前回の記事はこちらです。 WordPres

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

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

JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

生まれも育ちもド田舎、@It_is_Rです。 JavaScriptマンガ講座、第3回目です。 笑いあり、涙あり(?)のマンガで、JavaScriptを覚えようというものです。 今回は条件

Swift

【Xcode7】Swift2使ってみた。playgroundで遊びながら覚える。

最近は押入れの中で寝るのが日課の@It_is_Rです。 押入れは寝心地がいいです。部屋も押入れ分だけ広くなるし。 SwiftはAppleが出しているプログラミング言語です。Swiftを使うこと

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

enchant.js

ゲームに背景画像を表示する方法!( enchant.js )

こんばんわ、@It_is_Rです。 ゴールデンウィークいかがお過ごしでしょうか。 今回は、 enchant.js を使った横スクロールアクションゲームの背景を表示してみようと思います。 空と

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと思い、その努力の割に何も得られないのが@It_is_Rです。やかましいわ。 今回の記事は初のWordPre

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

コメントをどうぞ!

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