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

スポンサードリンク

関連コンテンツ

オススメ記事

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

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりや

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

これまでのプログラム全体をクラスを使って作るべ!

小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかも

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

scratch

小学生から始めるScratch入門。使い方とゲーム開発の基礎知識

小学生から始めるプログラミング入門です。 前回の記事で、プログラミングってどういうものなのか何となく理解してもらえたでしょうか? 少しだけScratch(スクラッチ)についてもふれましたが、ま

コメントをどうぞ!

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