はじめに

この記事は、GitやGitHubのバージョン管理を
行ったことがない人向けの記事になります。

Gitなどの基本概念から理解したい人は、
こちらの記事をご確認ください。

最初だけ準備が必要な作業

1.隠しファイル/隠しフォルダの表示

隠しファイルとは「.」から始まるファイルです。
（隠しフォルダも同様）
まずは、自分の開発環境上で
隠しファイル/隠しフォルダをターミナル上で表示させましょう。

$ ls -a

2.Gitの設定

Gitコマンドで名前とメールアドレスを設定する方法を解説します。
Gitは、コミット時にコミットした人が誰なのかを表記します。
そのため、Gitにnameとemailを設定する必要があります。

$git config --global user.name "kokoni.namaewokaku"

メールアドレスも同様です。

git config --global user.email "mail@gmail.com"

設定を終えたら確認を行います。

$less ~/.gitconfig

そうするとターミナル上に、
登録したname,emailが表示されます。

[user]
   name = kokoni.namaewokaku
   email = mail@gmail.com

ここまで確認できれば最初の準備は完了です。
さて、いよいよ本番のバージョン管理です。
※コミットする度にこちらの作業をする必要はありません。

バージョンの管理

今回はtest.htmlを作成し
下記の順番でバージョンを管理していきます。

1.リポジトリの作成
2.ファイルを新規作成
3.変更箇所をステージさせる
4.コミット
5.2回目のコミット

1.リポジトリの作成

まずはターミナルでtestフォルダを作成し
testフォルダへ移動します。

$ mkdir test
$ cd test

次に、Gitコマンドを使ってリポジトリを作成し
test/をGitのバージョンの管理下に置きます。

$ git init

そうすると下記のように表示されます。

これで、ローカルリポジトリの作成ができました。
きちんとGitでバージョンを管理されている場合は
Cloud9の場合、ターミナルに(master)という文字が追加されています。

ローカルリポジトリの作成のタイミングでワークツリー、
インデックスといった箇所も自動的に確保されました。

2.ファイルの新規作成

ファイルのバージョンを管理するために、
index.htmlを作成してtestフォルダに置きましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <titke>バージョン管理</title>
  </head>
  <body>
    <h1>初めてのバージョン管理</h1>
    <p>テストです。</p>
  </body>
</html>

上記のファイルは新規追加をすると
自動的にワークツリーに追加されています。

ワークツリーとインデックスの状況を確認

ワークツリーを新規追加したのでインデックスとの違いを
ターミナル上で見てみましょう。

$ git status

ターミナル上に赤文字で、新規追加したindex.htmlおり
ワークツリーに追加されていてインデックスには追加されていないものだとわかります。

3.変更箇所をステージする

次はワークツリーから変更箇所をステージしてインデックスに移動させましょう。
インデックスに移動させるには、gitaddこマントを使用します。

$ git add index.html

特にターミナルに何も表示されませんが、次のコマンドで
インデックスに移動したかを確認します。

$ git status

そうすると、先ほどのindex.htmlが緑になっていれば
ワークツリーの変更をインデックスに移動させることに成功です。

4.コミット

次はインデックスにあるバージョンをコミット（ローカルリポジトリに移動）します。

$ git commit

ターミナルが下記のようになるのでコミット内容がわかるように
簡潔にコメントを入力しましょう。今回はfirst commitにします。

コメントを書けたら、 Control+x（Windowsの場合はCtrl+x）で終了
その後、yを押して保存完了です。

nano終了後に表示されるログでコミットされたことがわかります。

[masuter (root-comit)********] first commit
1 file changed, 11 insertions(+)
create made 12345 index.html

コミット履歴の確認

お疲れ様でした。
ここまでで１つ目のコミットを作成完了です。
ここで、git statusを使うと

On branch master
nothing to commit, working tree clean

となり、ワークツリーとインデックスが
コミットと同じく最新の状態ということになります。

コミットした履歴は下記で確認ができます。

$ git log

コミットのリビジョン番号やコミットメッセージが
確認できるのでみてみましょう。

5.2回目のコミット

index.htmlの中に追記していきます。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <titke>バージョン管理</title>
  </head>
  <body>
    <h1>初めてのバージョン管理</h1>
    <p>テストです。</p>
    <p>追記です。</p>
  </body>
</html>

現在のワークツリーとインデックスを確認

$ git status

前回は、index.htmlが赤文字で表記されていましたが
今回は、

追記です。

が赤文字で表記されています。

インデックスへステージします。

$ git add .

今回はファイル名ではなく「.」を利用しています。
「.」を利用することで追加されたり変更されたものは
全てステージさせることが可能です。

コミットの方法も初回よりも簡単なコマンドをご紹介します。

$ git commit -m "tuikidesu"

コマンドを-mオプションを利用することにより
一度のコマンドでコメントも登録することができます。

コミット履歴をgit logで確認すると
コミットが2つに増えていれば2回目のコミットの成功です。

まとめ

お疲れ様でした。
長文になりましたが最後まで見ていただきありがとうございます。

最後に覚えておくコマンドをおさらいして終わりましょう。

コミットまでの一連の流れ

・ローカルリポジトリの作成　

$ git init

・ワークツリーとインデックスの確認

$ git status

・ステージする

$ git add hennkoukasyo

もしくは変更点全てをステージする

$ git add.

・コミットする

$ git commit -m "nandemocoment"

・コミット履歴を確認

$ git log