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 <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

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

$ 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コマンドを使います。
-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 <file>..." to update what will be committed)
  (use "git checkout -- <file>..." 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 <xxx@xxx.xxx.xx>
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の使い方 – その4】ブランチを使って履歴を分岐させる方法

エビの殻や、ポテチ、煮干しなどを食べると、必ずと言っていいほど口が血だらけになります。@It_is_Rです。 さて、Gitの使い方4回目の今回は、ブランチについてです。 ブランチは作業を枝分か

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

Homebrew

Homebrewの使い方。よく使うコマンド一覧と詳しい解説まとめ

※追記 この記事は2018/04/30に最新の情報に書き直しました。 人生をもう一度やり直したいとつくづく思う@It_is_Rです。 今回はHomebrewについての記事を書いて

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

Macで「デフォルトシェルはzshになったよ」と表示されるときの対処法

MacOSをアップデートしてから、ターミナルを開くたびに、「The default interactive shell is now zsh.」というメッセージが表示されるようになりました。 こ

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げる

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です