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

スポンサードリンク

関連コンテンツ

オススメ記事

gulp

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

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

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

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

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

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

WordPress テーマ自作 | サイト全体のレイアウトを整える。

水を飲む時、口に入れすぎてしまう@It_is_Rです。 WordPressテーマ自作シリーズ第11回目です。 今回は、サイト全体のレイアウトを整えてみましょう。 このシリーズの前回の記事

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。

時計を見るとなぜか悲しくなります。@It_is_Rです。 今回から、いくつかの記事に渡って、 WordPress のテーマ(テンプレート)を自作する方法を紹介していきたいと思います。 しかし、

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

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

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめでとうございます。@It_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

コメントをどうぞ!

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