SourceTreeとGithubでGitの練習環境をつくる

前回、<a href="http://qiita.com/naoki85/items/c7660d70347e9e70b201" target="_blank">はじめてのSourceTree（使い方編）</a>の続きになります。
組織でGitを使う方は多いと思いますが、自分で勉強する環境が欲しい方向けにログを残します。
**2018.1.22 追記**
私も少しGitの扱いに慣れてきたので、ブログの方に私がよく使うGitコマンドの方をまとめました。
もしよろしければご覧ください。
[https://re-engines.com/tag/git/](https://re-engines.com/tag/git/)
#GitとGithubの違い
似ている名前の2つ、それぞれどのようなものなのか？
ざっくり違いをまとめます。
## Git
バージョン管理システムのことです。
（分散型と集中型がありますが、Gitは分散型です。ここでは割愛しますが、興味のある方は調べてみてください。→<a href="http://d.hatena.ne.jp/hyoshiok/20140205/p1" target="_blank">集中型バージョン管理システムと分散型バージョン管理システムって</a>）
バージョン管理とは、要は**変更履歴を残すこと**です。
変更履歴は**リポジトリ**と呼ばれるものに保管されます。

例えば、下図のように、開発は時間とともに進んでいきます。
区切りの良いタイミングで今の状態をリポジトリに保存する（コミット）と、仮に「以前の状態に戻したい！」というときでも対応できます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/8a13ba69-9c69-317c-f3a2-79aa941849c2.png">

そして、Gitの特徴といえば、様々な人が共同で作業をすることができます。
元のデータはサーバーなどにある状態で、各人が自分のパソコンにそのデータを持ってきて作業します（クローン）。
ある程度区切りがついたら、そのデータを元のデータに反映させます（プッシュ）。
また、他の人が反映させた変更履歴を自分のパソコンに持ってくることも可能です。

<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/5e55a2fc-12b0-fc4f-1d17-217477755387.png">
　　　　　　　　　　　　　　　　　画像出典：<a href="http://www.backlog.jp/git-guide/" target="_blank">サルでも分かるGit入門</a>
## Github
GithubはこのGitの仕組みを利用して、世界中の人が自分の作品を保存、公開できるようにしたウェブサービスのことです。
**Githubはあくまでも、Gitを使いやすくするサービス**だということです。
こちらは、無料で利用できます。
Githubに似たサービスは他にもありますが、今回はGithubを利用します。

参考資料
<a href="http://blog.sixapart.jp/2014-03/mttips-02-what-is-git.html" target="_blank">「そもそもGitって何？」、「GitとGitHubは何が違うの？」にシンプルに答えるよ</a>
# Githubに勉強用のリポジトリを作成する
<a href="https://github.com/" target="_blank">Github</a>に登録、ログインされていない方は済ませておいてください。

新規リポジトリを作成します。
画面右上の「+」マークをクリックして、「New repository」を選択してください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/10231f3a-09ad-3759-442f-f0cd2dd6e773.png" width=150px>
リポジトリの作成画面になるので、リポジトリの名前と、READMEの項目にチェックがついているか確認しておいてください。
（チェックがついていないと、面倒な処理が必要なようです。→<a href="http://d.hatena.ne.jp/yk5656/20140212/1393158928" target="_blank">Githubにリポジトリを作成してみる</a>）
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/50148338-6de5-13be-68ca-d1ee80a9af3b.png">

作成が完了すると、下記のようなページができます。
まだ`README.md`以外ファイルは何もありません。
`README.md`はリポジトリを誰かと共有するときや公開するときに重要な役割を持ちます。
今回は自分用なので割愛します。
（README.mdについてはこちらのサイトを参照ください。→<a href="http://deeeet.com/writing/2014/07/31/readme/" target="_blank">わかりやすいREADME.mdを書く</a>）

<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/ac4f1449-2ba3-c3c8-0f6b-bff4fe25083a.png">

ついでにマスターデータも作成して、Githubにアップしてしまいましょう。
適当に自分のローカルでファイルを作ってください。
（今回私は`masterディレクトリ`に、適当なHTML文章を書いた`index.html`を作成しました。）
これを先程の画面の「Upload files」からアップします。

<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/99c36eea-9775-b341-7095-d712edf91219.png">

これも変更履歴として残るため、分かりやすいタイトルと説明をつけましょう。
（何も入れなくてもデフォルトの文字列が入ります。）
よければ「Commit changes」を押します。
そうすると、トップの画面に追加したファイルが表れたと思います。
これで、リポジトリの作成が完了しました。
これをリモートリポジトリと呼びます。

今度はローカルリポジトリを作成します。
# SourceTreeでローカルリポジトリ作成
<a href="http://qiita.com/naoki85/items/c7660d70347e9e70b201" target="_blank">はじめてのSourceTree（使い方編）</a>に書いたことは割愛します。
## SourceTreeとは
Gitのクライアントツールと呼ばれ、Gitの操作を簡単にするものです。
私も前回の記事を書くまではターミナルでGitコマンドを打ち込んでいましたが、SourceTreeの方が見やすいです。
## クローンする
まずは、先程作成したリポジトリをクローンします。
Github上に、そのリポジトリのURLがあるため、そちらをコピーします。

<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/057c7e52-ca02-22db-1754-5040789ceab4.png">

そして、SourceTreeを起動させます。
「新規リポジトリ」→「URLからクローン」を押し、先程コピーしたURLとクローン先のディレクトリを指定します。
（クローン先はには中身が空のディレクトリを用意してあげる必要があります。）
そしてクローンすると、新しくローカルリポジトリが作成されます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/4f5e2104-e6e4-a92b-0dbb-9b9e310216c1.png" width=200px>

SourceTree上で見るとこのような画面になると思います。

<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/16939b7e-0dce-43d1-cc2c-64764536b139.png">

まだ作成したばかりなので、パッとしません。
そこで、作成した**ローカルリポジトリ**に新しくファイルを加えましょう。
例えば私は、適当なPHP文を書いたindex.phpを加えました。
そして、コミットまでしてみましょう。
<a href="http://qiita.com/naoki85/items/c7660d70347e9e70b201" target="_blank">はじめてのSourceTree（使い方編）</a>

そうすると、グラフの方が変化したと思います。
これは、新しく「index.phpを追加」した変更履歴を作成したことになります。

<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/f06990bc-20c8-9300-da71-5ca6fcc21264.png" width=400px>

もしコミットの際に、「コミット後、ただちにプッシュする」にチェックを入れた方は既にリモートリポジトリにも反映されています。
（不安な方は、SourceTree上部バーの「プッシュ」に数字がある人は、まだ反映されていない項目があるということです。）
もし未プッシュであれば、プッシュしてしまいましょう。

<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/5c74df7f-8a69-d9df-f750-eeb5cf8cb0fd.png" width=150px>
# リモートリポジトリの確認
プッシュすれば、Githubの方にも反映されています。
<a href="https://github.com/" target="_blank">Github</a>に作成した自分のリポジトリ画面を見ていただくと、追加したファイルが反映されていることが分かります。
また、画面中段の「Graphs」→「Network」を押すと、SourceTreeと同じようなグラフを見ることができます。
（SourceTreeは時間軸が縦ですが、Githubは横なので少し違和感がありますが。）

<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/364104f6-bb40-939a-ba61-6025a02724c2.png">

今はmasterブランチしかないため寂しいですが、これから練習をしていけば、グラフがどんどん変化します。
しかし、グラフとして変更履歴を追うことができるため、「このとき何やった」、「あのときこれやった」などが分かりやすくなります。
# おわりに
今回は、自分用のGit練習環境を整える方法です。
私も仕事にてGitを使用しておりますが、やはりまだまだ操作が未熟で、練習したいと考えておりました。
練習を実際に製品を開発している環境でやると、ミスしたときが怖いので、やはり自分の練習環境が必要だと思います。
（自分用ならどれだけログがあれようが、リバート、リセットをしようが怒られないので笑）

当面やることは、

- もう1つローカルリポジトリを作成し、わざとコンフリクトを起こした後、それを解決する
- 作業ブランチを複数行き来して作業する（スタッシュ）
- その他、メジャーどころのコマンドしか知らないので、あまり使用しないようなコマンドも使ってみる

などです。

ご参考にしていただければ嬉しく思います。