初心者のためのGit超入門!導入からSourceTreeの使い方まで

こんにちは。大阪でWebエンジニアをしている @_ryskitです。

今回は、Git超入門ということで、基本的なGitの概念からコマンドが使えるまでを紹介したいと思います。

エンジニアのみならず、デザイナーやライターなど、何らかのファイルを日々管理している人にとって、Gitを覚えることはとてもメリットがあります!

では、そんな便利なGitを紹介していきましょう。

バージョン管理システムとは

まず、Gitの紹介をする前に説明しないといけないのが、「バージョン管理システム」というものです。

簡単にいうと、コンピュータで作成されたり、編集されたりするファイルの変更履歴を管理するシステムのことを言います。

このバージョン管理システムのなにが良いのか。それは、ファイルの作成や編集の履歴を残したり、過去に編集したファイルの状態に簡単に戻したりできることです!

例えば、バージョン管理を利用せず、他の誰かと共有フォルダのファイルを編集している場合に同じタイミングで編集し保存したらどうなるでしょうか。

conflict

上の画像のように、どちらかのユーザーの編集内容に上書きされ、もう一人の編集作業が無駄になったり、ファイル内容が互いに異なるため、ファイルの衝突が起こります。

こういった問題を解決し、メリットを享受できるのが「バージョン管理システム」です。

このバージョン管理システムですが、おおまかに管理方法が2種類あります。

1つは、「集中型」と呼ばれるもの。もう1つは、「分散型」と呼ばれるものです。
「集中型」では、Subversionと呼ばれるソフトウェアがあり、「分散型」には、今回取り扱っているGitがあります。

git

Gitでは、リモートリポジトリというサーバ上に置かれたリポジトリを自分の環境にクローン(複製)します。この複製したリポジトリをローカルリポジトリといいます。ローカルリポジトリに対してファイルの編集内容などを登録したりするため、先ほど画像で説明したようなファイルの上書きであったり、ファイルの衝突という問題は起こりにくくなります。

主流はGitなので、今から覚えるのであれば、Gitを始めれば良いと思います。

使用環境: OS: OS X El Capitan 10.11.2, Git: version 2.5.4 (Macにインストールされているもの)

Gitの基本的な概念を理解しよう

Gitの操作を行う上で、必ず覚えておく概念があります。
それは、「ワーキングディレクトリ」「ステージングエリア」「リポジトリ」です。

Gitがこれら3つのエリアを管理しており、データを保持しています。

まず、「ワーキングディレクトリ」というのは、直接作業を行っているディレクトリを指します。

次に、「ステージングエリア」ですが、これは「ワーキングディレクトリ」と「リポジトリ」に挟まれたバッファ領域で、ファイルを作成・編集したものをグルーピングして一時的に保存する領域のようなものです。

最後の「リポジトリ」は、一時点の特定の編集したファイルの状態などをデータとして抜き出したものを管理する領域です。

このリポジトリに、一時点のファイルの状態をデータとして抜き出して履歴として記録する作業を「コミット」と言います。

git_area

Gitを導入すると「ワーキングディレクトリ」にあるファイルを監視してくれるようになります。

そのため、新しくファイルを作成した場合は、そのファイルはまだ管理できていないため、untracked (未追跡)と状態を表示してくれます。また、すでにGitに監視されているファイルを変更をした場合は、modified (編集済み)と状態を表示してくれます。

このように、Gitでは3つの領域を使って、バージョン管理をしていきます。
次は、コマンドラインやSourceTreeからGitを操作してみましょう!

Gitの基本操作に慣れよう

Gitがインストールされている前提でお話をします。まだ、お手持ちのパソコンにインストールしていなければ、事前にインストールをしてください。

Gitを操作するにあたって、コマンドラインから操作する方法とSouceTreeというGitクライアントから操作する方法をご紹介します。

Gitはコマンドラインから操作はできるのですが、初めてGitをさわったり、コマンドラインに慣れ親しんでいないという方にはSourceTreeを使うことをおすすめします。

というのも、SourceTreeは無料で使えることはもちろん、ビジュアル的でとても感覚的にGitの操作が可能になるからです。
また後にご紹介しますが、Gitでは過去の履歴を辿ったりするので、SourceTreeを利用していると、どこにどんな履歴があって、どういうふうに枝分かれしているのか、ひと目で簡単に理解することができるからです。

ぜひ、以下のURLよりダウンロードして使ってみてはいかがでしょうか
URL: https://www.sourcetreeapp.com/

SourceTreeOfficialSite

git init

コマンドライン:

まず、ターミナルを立ち上げて以下のコマンドを入力してください。

[bash]
mkdir git_lesson # git_lesson ディレクトリ を作成
cd git_lesson # git_lesson ディレクトリ に移動
git init
[/bash]

コマンドラインの場合は、Gitで管理するためのディレクトリをまず作成します。その後に、作成したディレクトリの中に移動して、git initとコマンドを打てば、そのディレクトリ内はGitに管理されることとなります。

SourceTree:

まず、SourceTreeを立ち上げると、以下のような画面が表示されるので、ローカルリポジトリを作成します。

create_repository

Create local repositoryを選択します。

select_local_repository

create_git_lesson

ローカルリポジトリを作成できたら、以下のように表示されます。

finish_create_repository

git add

ファイルの新規作成や編集内容をステージングエリアに登録するコマンドです。ステージングエリアに登録することで、コミットする対象となります。

ここでは、sample.txtというファイルを作成します。その後、「これはサンプルテキストです。」と記述した後、git addコマンドを実行するまでを行います。

コマンドライン:

[bash]
touch sample.txt # sample.txtを作成
echo ‘これはサンプルテキストです。’ > sample.txt
git add sample.txt
[/bash]

ちなみに、例ではファイル名を指定していますが、作成・編集したファイルが複数ある場合は以下のオプションをgit addの後に付けてあげると便利です。

[bash]
# 新規作成・編集・削除されたファイルすべてをステージングエリアに登録
git add -A

# 新規作成・編集されたファイルをステージングエリアに登録
git add .
[/bash]

SourceTree:

先ほど作成したリポジトリを開きます。

click_repository

開くとこのような画面が表示されます。

スクリーンショット 2016-03-26 17.36.26

MacにあるFinderで、先ほど作成したgit_lessonディレクトリにsample.txtを作成し、「これはサンプルテキストです。」と記述して保存します。すると以下の画面になります。

スクリーンショット_2016-03-26_17_44_31

そして、チェックを入れるとsample.txtをステージングエリアに登録することができます。

スクリーンショット_2016-03-26_17_46_32

git status

このコマンドは、ファイルがどうなったのか(新規作成・編集・削除)、状態を一覧として表示するコマンドです。

コマンドライン:

[bash]
git status
[/bash]

このコマンドを実行すると、以下のようにターミナルに表示されます。

git_status_terminal

SourceTree:

SourceTreeでは、アイコンでファイルの状態を簡単に確認することができます。

git_status

git commit

ステージングエリアに登録されているファイル・ディレクトリをリポジトリに履歴として記録するコマンドです。
ファイルやディレクトリを意味のある形でグルーピングをして履歴を残すことで、ファイルを過去のある時点に戻したり、ファイルを削除しても元に戻すことが可能になります。

コマンドライン

[bash]
git commit
[/bash]

上記のコマンドを実行すると、エディタが立ち上がるので、1行目には変更した内容などの要約を記述しましょう。2行目は空行にして、3行目以降は、変更内容の詳細を記述しましょう。

git_commit_terminal

他にも、オプションとして-mをつけると一行コメントを残すことも可能で、この場合はエディタは立ち上がりません。

[bash]
git commit -m ‘一行コメントを残すこともできます’
[/bash]

SourceTree:

SourceTreeの場合は、コミットしたいファイルをチェックして、ステージングエリアに移動させた後、コミットします。

click_commit_btn

コミットメッセージを記述するボックスがあるので、記述してコミットボタンをクリックすると完了です。

clicke_commit

git log

このコマンドは、リポジトリにコミットした履歴を表示します。

コマンドライン:

[bash]
git log
[/bash]

コマンドを実行すると、以下のように表示されます。

a04b38e1452137baa02c7576601d610b

SourceTree:

SourceTreeの場合は、Historyと表示されている部分をクリックすると履歴を確認できます。

スクリーンショット_2016-03-27_21_07_53

git reset

このコマンドでは、間違ってステージングエリアにファイルを登録してしまったものを未登録にしたり、間違ってコミットしたものを削除することができます。

※新しくtest.txtを作成して、ステージングエリアに登録した前提とします。

コマンドライン:

git status をすると、以下のように表示されます。

スクリーンショット 2016-03-27 21.27.05

その後に以下のコマンドを実行します。

[bash]
git reset HEAD text.txt
[/bash]

その結果、以下のようにステージングエリアに登録したファイルを未登録にすることができます。

スクリーンショット 2016-03-27 21.29.05

SourceTree:

SourceTreeでは、画像のように指定のファイルのチェックボックスをクリックするとステージングエリアに登録したファイルを未登録にすることができます。

スクリーンショット_2016-03-27_21_47_57

git checkout

git checkoutは、ブランチを切り替えたり、コミットのハッシュを指定すると、ファイルの状態をそのコミットの履歴と同じ状態に戻すことができます。ここでは、checkoutで編集したファイルを元の状態に戻す方法を紹介します。

コマンドライン:

まず、準備として以下のように、sample.txtに新たにコメントを追記してみてください。

[bash]
echo ‘これは追記したコメントです’ >> sample.txt
git status
[/bash]

そして、git statusをすると以下のようになります。

スクリーンショット 2016-03-26 20.57.54

この追記したコメントを消して元のファイルの状態に戻したい場合には以下のコマンドを実行します。

[bash]
git checkout — sample.txt
[/bash]

コマンドを実行した後、ファイルの内容を確認すると、先ほど追記したコメントが削除されているのが確認できます。

SourceTree:

SourceTreeの場合は、以下の画像のようにすると、編集したファイル内容を元の状態に戻すことができます。

discard

git branch

Gitではブランチといって、木の枝のようにコミットを分岐させることができます。

branch

複数人で開発したり、ある機能はAブランチで、ある機能はBブランチで開発を同時並行でする場合に便利です。

※現在のブランチがmasterでブランチAを作成し、ブランチAに切り替えるまでを行います。

コマンドライン:

[bash]
git branch A # ブランチAを作成します
git checkout A # 現在のブランチをAに切り替えます
git branch # ローカルブランチに何があるのか表示
[/bash]

「git branch A」でブランチを作成し、「git checkout A」で現在のブランチをmaster → Aに切り替えます。

「git branch」と実行すると、ローカルブランチの一覧を表示することができます。現在のブランチにはブランチ名の横に「*(アスタリスク)」が付きます。

スクリーンショット 2016-03-27 23.29.10

SourceTree:

SourceTreeの場合は画像のように、どこからブランチを派生させるのかを指定して、新しいブランチ名を入力してボタンをクリックするだけでブランチを作ることができます。

スクリーンショット_2016-03-27_23_36_36

ブランチを切り替えたい場合は、ブランチ名をクリックするだけでチェックアウトできます。

スクリーンショット_2016-03-27_23_43_04

git merge

このコマンドは、あるブランチの変更内容を現在のブランチに取り込むことができます。

ここでは、ブランチAで作成したtest.txtをmasterブランチに取り込みます。

コマンドライン:

まず、ブランチAでtest.txtを作成し、コミットします。そして、masterブランチに切り替え、git mergeを実行するとブランチAの内容をmasterブランチに取り込むことができます。

[bash]
git checkout A
touch test.txt # test.txtを作成
echo ‘testファイルです’ > test.txt # test.txtにコメントを書き込む
git add test.txt
git commit -m ‘ブランチAからコミット’
git checkout master
git merge A # ブランチAで作成したtest.txtをmasterブランチに取り込む
[/bash]

git mergeをして以下のように表示されれば、mergeされているはずです。フォルダの中を確認しtext.txtがあるか確認ください。

スクリーンショット 2016-03-27 23.56.08

SourceTree:

ブランチAからtest.txtを作成し、コメントを記述します。そして、コミットを行います。

スクリーンショット_2016-03-28_0_03_10

その後、masterブランチに切り替えて、mergeを行います。mergeと書かれているアイコンをクリックしてマージを行ってください。

スクリーンショット_2016-03-28_0_06_46

参考資料

デザイナのためのGit入門

そもそもGitってなに?ということがざっくり解説されていて、分かりやすいスライドだと思います。

まず、Gitのコマンドよりも、どういうものなのかを理解するにはとても良い資料です。

いつやるの?Git入門

Gitを使い始めると、よく分からなくなるコミットやブランチ、マージといったコマンドについて、ビジュアルも使ってわかりやすく説明されている資料です。

Gitをなんとなく使っていていたり、イマイチ文章だけではブランチなどを理解が難しいという人がこのスライドを読むと何か掴めるのではないでしょうか。少しGitに慣れた人におすすめです!

もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜

Gitでは、何ができるのか、Backlogを利用してGitサーバの設定、Windows・MacのGitクライアントの設定、共同編集などについて、詳細に書かれています。スライドでは画像を多く使い、コメントも多いので、あまり迷うことなく設定や操作を行うことができると思います。

読みながらGitを実践していきたい人にはおすすめのスライドです!

やりなおせる Git 入門

Gitのcheckoutやresetなど、ある状態を変更するコマンドについて詳しく書かれているスライドです。コマンドによっては、ファイルをある状態に戻せなくなったりする場合もあるので、そういう危険についてどう対処すればよいのかを理解しやすいように書かれています。

ファイルの状態を変更したりする前に、まず読んでおきたいスライドです!

最後に

いかがでしたでしょうか。今回は超入門ということで、基本的なコマンドのみをご紹介しました。

参考資料にもあるように、まだまだ今回ご紹介できていないコマンドがあります。そういった情報は、GoogleやQiitaといったところで調べてみるも良いですし、書籍を買って学んでみるのもおすすめです。

入門git

入門git

posted with amazlet at 16.03.29
Travis Swicegood
オーム社
売り上げランキング: 176,637
Gitによるバージョン管理

Gitによるバージョン管理

posted with amazlet at 16.03.29
岩松 信洋 上川 純一 まえだこうへい 小川 伸一郎
オーム社
売り上げランキング: 207,584

ぜひ、gitを使いこなせるようになってみてください!