1 はじめに

この記事は、「Git使ってみたいけど、コマンドとかよくわからないし難しそう」って思っている人が、Gitの概要についてなんとなく理解してノーコマンドでGitを操作できるようになることを目標に書いた記事です。

内容

2章 Gitの基礎知識
- Git、Gitクライアントツールについて
- Git用語リポジトリとコミットについて
3章実践
- リポジトリを作成
- 1本のブランチで変更履歴をコミット
- コミットを前の状態に戻す
4章補足
- コミット時と納品時の注意

この記事のゴール

Gitの基礎を知る
Gitが現場でどのように使われているかを理解する
とにかくGitに触れる
コマンド使わず、なんとなくバージョン管理ができるようになる

対象者

何かしらソースコードを書いている
Gitをよく知らない
コマンドをよく知らない
まずはひとりでバージョン管理してみたい

コマンドを使ってGitを操作したいや、ブランチについて学びたい方は別の方の記事を読んでくださると幸いです。

2 Gitの基礎

Gitを使ってみる前に基礎の基礎をちょっとだけ覚えましょう！

2-1 そもそもGitって何者なん？

"Git とは"で検索すると、大体こんな説明文が出てきます。

Gitはプログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。

「......うん、全然わからん！！」
ってなるけどちょっと待って！

大丈夫です！今回は下の3つを理解しておけばOKです。

"Git(ぎっと)" とは、ソフトウェアの名称のこと
Gitを使うと、ソースコードなどの変更履歴を記録できるようになる
バージョン管理の種類は、集中型と分散型の2種類があり、Gitは「分散型バージョン管理システム」を採用しているシステムなんだな。

さて、ここまででGitはバージョン管理できるシステムであることはわかりました。

2-2 バージョン管理システムの必要性

Gitが何者かわかったら、なぜ必要かを理解していきましょう。

バージョン管理システムがないとどうなる？

まずは、バージョン管理システムがない世界でソースコードを管理するとどうなるか想像しましょう。
だいたい以下の方法でソースコードのバックアップをとることが多いです。

ソースを管理しているフォルダを丸ごと圧縮して、フォルダ名に日付やリリース情報をつけて管理
リリースだけでなく、開発段階のコード一式もバックアップをとる
いつ、どんな理由で、どんな変更をしたのか変更履歴を文書に残す

これだとどんな問題があるの？

こういうアナログな管理方法だと、

何が最新のファイルかわからなくなる
フォルダの中のファイルを開いて比較するまで変更箇所がわからない
開発時のコードもバックアップ取ってないと、前のコードに戻したくなっても戻せない
めんどくさくて誰もちゃんとした履歴文書を残さない

みたいな問題が多発します。
また、チーム開発の場合はもっと面倒なことにもなってきます。

サーバーのとあるファイルを同時編集してしまい、保存のタイミングによっては自分の編集がパーになる
誰が、どのファイルを、具体的にどう修正したかわからない
複数人で共同編集したコードに関しては、誰か1人がAさんの編集したファイルとBさんの編集したファイルを見比べて、手作業でAさんのファイルにBさんの変更した行を足していく作業をしなければならない

という問題もつきまとってきます。

......想像しただけで相当な手間です。めんどくさいこと極まりないです。

それを解決するのが「バージョン管理システム」？

そうなんです！

ただし、バージョン管理システムも万能ではありませんので負担を軽減するくらいの認識でいましょう。
バージョン管理システムを導入すると、以下のことができるようになるので、これまで悩んできたバージョン管理の手間を軽減させることができます。

変更履歴を残せる
デグレードを防げる
ファイルを前の状態に戻すことができる

そして、今回は数あるバージョン管理システムの中から、最も使われているであろうGitを使って行きましょう

2-3 GitはCUIで操作するシステムである

突然ですが、世の中の「ソフトウェア」には、CUIとGUIの2種類が存在します。

種類	説明	例
GUI	Graphical User Interfaceの略マウスなどによってグラフィカルな画面を操作	Excelなど
CUI	Character User Interfaceの略文字を打ち込んで操作	Mac:ターミナル Windows:コマンドプロンプト

そして肝心のGitは、CUIで操作するタイプのソフトです。
なので、ターミナルを起動して、下のようコードのように文字(コマンド)を打ち込んで操作する必要があります。

$ git init
$ git add .
$ git commit -m "Initial commit"
$ git remote add origin https://github.com/XXXX/XXXXXX.git
$ git push -u origin master

「うわ！無理！文字ばっかり！コマンドなんてわからんし難しそう！断念！」
...って思うの、ちょっと待って！

そんな時は、GitをCUIではなくGUIで操作することができるGitクライアントツールというのを使ってみましょう。

2-4 Gitクライアントツール SourceTree

Gitクライアントツールとは、ターミナルなどCUIを使わず、GUIで操作することができるソフトのことです。
そのなかでも、今回は「SourceTree」というソフトを使ってGitを操作していきます。

2-5 Git用語

今回はリポジトリとコミットという用語を覚えましょう。

リポジトリ

リポジトリとは、変更履歴を保存・管理しておく場所のことです。
リポジトリには、リモートリポジトリとローカルリポジトリの2種類があり、今回扱うのはローカルリポジトリです。

種類	説明
ローカルリポジトリ	自分のPC上にある変更履歴の管理場所のこと
リモートリポジトリ	場所を共有サーバーやGitHubなどに作り、複数人で共有できるようにしている管理場所のこと

コミット

変更履歴をリポジトリに保存することを「コミットする」といいます。

「今日の変更コミットするか〜。」
「Bさん、昨日の変更コミットした？」
「Cさん、機能Bまで実装したらコミットしておいて」

っていう風に使います。

Tips: Gitの変更履歴の保存システムについて

コミットすると、Gitは変更したファイルたちをまるごと「リポジトリ」に保存します。
これをスナップショット保存と言います。

このため、ファイルの名前を変更しただけでも、コミットすればそのファイル丸ごとスナップショット保存されちゃいます。

...ということは、容量の大きいファイルをコミットするたびに、ファイルを丸ごとスナップショット保存するため、リポジトリはどんどん肥大化していきます。

リポジトリが肥大化すると、リポジトリのダウンロードに時間がかかったり、ストレージの容量を圧迫したりしてしまいます。
そのため、動画や画像、Wordファイルなどの容量が大きい非テキストファイルは、変更履歴を管理しなくても良い場合はしないという選択肢を取ると良いです。

でもどうやって変更履歴を管理しないようにするの？？？
それは次の項目で説明しますね。

2-6 除外ファイル/フォルダを設定する

「.gitignore(ぎっといぐのあ)ファイル」に「このファイル/フォルダを無視しますよ」と記述しておけば、どのファイルが管理対象外かをGitが判断してくれるようになります。

たとえば、「拡張子がjpgのファイルはすべて変更履歴を管理しません」という設定をしたい場合は、.gitignoreファイルに「*.jpg」と追記してリポジトリ直下に置きます。
そうすることで、jpgファイルを削除しようが、ファイル名を変更しようが、差し替えようが、.gitignoreでjpgは監視するなって言われてるので、Gitはjpgの変更内容をリポジトリにコミットすることはできません。

.gitignoreファイルの作成方法は、SourceTreeを使って自動作成することもできますし、手作業で作っても問題ありません。
今回はSourceTreeを使って作ってみます。

2-7 まとめ

Git: バージョン管理システムのことで、本来はCUIで操作するシステムのこと
Gitクライアントツール: GUIでGitを操作できるようにしたソフトのこと
リポジトリ: 変更履歴を保存・管理しておく場所のこと
コミット: 変更履歴を保存すること
.gitignoreファイル: 変更を管理しないファイルやフォルダを登録するためのファイル

3 それでは、GitをSourceTreeを使って試してみましょう！

おまたせしました！さっそく手を動かします！
今回はひとりで簡単にバージョン管理を行うことを目的としていますので、「ブランチ」は使わず作業していきます。

(0) 前準備

SourceTreeとGitをインストールしてください。
SourceTreeをインストールしている途中でGitもインストールできると思います。

(1) ローカルリポジトリを作る

SourceTreeを起動して[新規...]をクリックして[ローカルリポジトリを作成]をクリックします。

[...]をクリックして、ソースコードを管理しているフォルダを選択して[作成]をクリックします。

そうするとリポジトリのブックマークリストに指定したフォルダ名が表示されているとおもいます。
これで正常にリポジトリを作ることができました！

Finderでも確認してみましょう。
リポジトリを作ったフォルダをFinderで表示して、Command+Shift+.を押して、非表示ファイルも見れるようにするとと、「.git」フォルダができていることがわかるはずです。

この「.git」フォルダの中には親フォルダが「リポジトリ」として振舞うために必要なファイルが全て入っています！
そして、このフォルダを消すと、リポジトリではなくなり、変更履歴が全部消えてしまいます。
なので、間違っても削除しないよう注意してください。

(2) ソースコードをフォルダに置く

ソースコード一式をフォルダにおきましょう。
あとからファイルの追加や削除もできますので、今回はとりあえずindex.htmlと画像を管理する「assets/images」フォルダを置きました。

そして、SourceTreeに戻って、先ほど作ったブックマークをダブルクリックすると以下のような画面が表示されます。

左側の[ファイルステージ]タブをクリックして、コミットしていないファイル一覧を表示します。

Tips: ファイルステージ/履歴/検索タブについて

SourceTree左側にある、3つのタブについて説明しますね。

タブ	説明	ショートカットキー
ファイルステージ	コミットする前のファイル一覧。ここで、コミットするファイルを選択して、コミットを実行します。	Command+1キー
履歴	コミットしてきた履歴の一覧を確認することができます。	Command+2キー
検索	コミットの検索をすることができるタブです。	Command+3キー

(3) .gitignoreファイルを作る

あらかじめ管理する必要のないファイルやフォルダがあれば設定してしまいましょう。
特別な理由がないかぎり、非テキストファイルやそれを扱うフォルダは.gitignoreファイルに登録すると良いでしょう。

SourceTree上で画像ファイルを右クリックして、コンテキストメニューから[無視...]をクリックします。

拡張子が一致するものは全て管理しない場合は[この拡張子を持つファイルをすべて無視]をクリック、フォルダごと無視する場合は[以下を全て無視]をクリックして、フォルダ名を選択します。
また、[この無視エントリの追加先]を[このリポジトリのみ]を選択して[OK]をクリックします。

さて、SourceTreeの[ファイルステージ]タブをみてみましょう。
.gitignoreファイルが追加されていることと、設定したファイルが表示されなくなっていることが確認できますね。

これで変更履歴を無視するファイルの設定が完了した状態となります。
あくまで変更履歴を監視しないだけの設定なので、元ファイルがちゃんとPC上に残っていることをFinderで確認して理解しておいてください。

(4) ファイルをコミットしてmasterブランチを作成する

全て選択して、コミットメッセージを書いて、[コミット]をクリックするとコミットします。

Tips: コミットメッセージの書き方について

一般的な記入方法は以下の通りです。

1行目：変更内容の要約（タイトル、概要、チケット番号など）
2行目：空行
3行目以降：変更した理由（内容、詳細）

1行で内容がわかれば、2行目以降は省略してもいいです。
ただし、ハンバーガーメニュー修正のみなどのメッセージでは情報量として不十分です。
fix: ハンバーガーメニューが1度開いたら閉じない不具合を修正のように、ある程度詳細に書くよう心がけましょう。

また、以下の記事が参考になるので、ぜひ読んでみてください。
Gitのコミットメッセージの書き方

[履歴]タブを開いてみましょう。
行が1行追加されていますね。これで無事、変更履歴をリポジトリにコミットすることができました。

(5) ファイルを変更する

index.htmlを自分のいつも使っているソフト(Visual StudioやAtomなど)を使って、コードを編集して保存してみましょう。
今回は以下のように編集してみました。

index.html

<html lang="jp">
↓
<html lang="en">

そして、もう一度SourceTreeに戻り、[ファイルステージ]タブを表示してください。
真ん中の領域に変更したファイル名、右側の領域に変更箇所が表示されていると思います。

赤背景の行が変更前、緑背景の行が変更後のコードです。

(6) コミットする

先ほどと同様にコミットメッセージを入力してコミットして、[履歴]タブを確認しましょう。

これで2回目の変更履歴をリポジトリにコミットすることができました。
これ以降は(5)と(6)の操作を繰り返していけばOKです

(7) コミットを前の状態に戻す

これは、「ソースコード、昨日の状態に戻したいなぁ」ってときに行う操作です。

まず、SourceTreeを開いて、[履歴]タブを表示します。
そして、どのコミットの位置まで戻したいかを探し、そのコミットの行を右クリックしてコンテキストメニューから[(ブランチ名)をこのコミットまで戻す]をクリックします。

そして、[モード]一覧から[Mixed]または[Hard]を選択して[OK]を押します。

モード	説明
Soft/Mixed	ファイルに施した変更は保持したまま、コミットした事実だけを無かったことにする ※厳密にいうと両者間にも違いはありますが、今回はその説明は割愛します
Hard	今までコミットしてきた変更履歴をPC上からすべて削除する

これで、リポジトリの状態を前の状態に戻すことでソースコードも前の状態に戻すことが出来ました！

4 注意点

Gitを使っているときの注意点をいくつかまとめました。

コミットするときの注意点

リポジトリの肥大化を防ぐため、以下の点に注意しましょう。
1. コミット数は最小限に(1日1回または区切りのいいところでコミットするのが目安)
2. 動画やWord、Photoshopなどの非テキストファイルはなるべく.gitignoreに登録して管理しない

納品時の注意

.gitフォルダや.gitignoreなどのGitの情報を納品しないでください。

お客さんが変更履歴を覗けてしまうため
データ容量が肥大化し、ダウンロードにものすごい時間がかかる

5 最後に

SourceTreeを使ってGitを操作してみようという今回の記事はこれにて終了です。
以下のこと、達成できましたでしょうか。

Gitの基礎を知る
Gitが現場でどのように使われているかを理解する
とにかくGitに触れる
コマンド使わず、なんとなくバージョン管理ができるようになる

もともと、この記事はデザイナーさんに向けて作成した記事でしたが、デザイナーさんでなくても誰かのお役に立てれば幸いです。

ひとりでなんとなくGitを使ってみよう(with SourceTree)