解 説

Gitはバージョン管理をするための分散型バージョン管理システムです。
日頃からソースコードの変更履歴を記録・管理するくせをつけておくと、会社などの実務に入ってから戸惑うこともなくなると思います。
バージョン管理は大切な共同作業を行う上で必須項目です。一度時間をかけて習得しておいて損はないでしょう。

Gitの入門書はGitが、おもしろいほどわかる基本の使い方33〈バージョン管理、SourceTree、Bitbucket〉が解りやすく、Webデザイナーさんにはお勧めです。

Gitでできること

今回はわかりやすいように、複雑な仕組みよりもざっくりと基本機能について見ていきましょう。

Gitの主な仕組み

Gitの主な仕事は、バージョン管理です。バージョン管理とは、HTMLファイルを新規に作成し、CSSファイルも新規に作成し、HTMLの編集、CSSの編集、不要になったファイルの削除などの作業を、「いつ」、「誰が」、「どのファイルに」「何を」行ったのか履歴がわかり、必要に応じてその時点の状態に戻って再度作業が行えるようにすることです。

更に、「GitHub」や「Bitbucket」を使うことで、作成したファイルと共にGitで管理しているバージョン情報をサーバー上に置くことができます。それはつまり、ネットを介して多数の人と共同作業ができるという事です。

例えば学校の自主制作のときにGitとBitbucketを使用することで、学校と自宅で同じファイルを同じバージョンの状態で作業ができるようになります。これだけなら、Dropboxを使えばよいと思うかもしれませんが、状況に応じて過去のコードに戻ってやり直しできる事がメリットです。

では、どうしてそのような事ができるのか、カラクリをみてみましょう。

いくらコンピューターといえども勝手にバージョン管理をしてくれるものではありません。
我々人間の操作が必要になります。その人間の操作とは区切りになるところを決める事です。
区切りとは、新規ファイル作成した時点、HTML基本タグ作成した時点、header部分作成時点、グローバルナビ作成時点、・・・・など自分なりの区切りです。簡単なページならHTMLのコーディング終了時を区切りにする場合もあるかもしれません。
つまり、これらの区切りはコーディングする人しか決める事ができない事です。この区切りになるところを決めておけば後でその区切りのところへ戻ってきて再度やり直しができるようになります。

Gitの基本機能は、この区切りを決めておいて、その区切りに戻ることができる事です。

dog_git01

最も重要な人間の操作、区切りを決めることを、Gitでは「コミット」と呼んでいます。
まずはコミットする方法を覚えてしまうことです。これがGitを使う第一歩になります。

Gitの導入方法

簡単にGitを使えるようにするには GUIツールの「SourceTree」をインストールすることです。これをインストールするとGitも同時にインストールされます。(Macは標準でGitは導入されていますが「SourceTree」は別途インストールする必要があります)Mac版とWindows版があります。

SourceTreeのダウンロードページ

「Download SourceTree Free」をクリックしてダウンロードしたファイルを使ってインストールします。

インストールが完了するとユーザー登録が必要です。
現在のところは無料ですので「今すぐ登録・無料」をクリックしてユーザー登録をします。

*2016年2月にSourceTreeは大きく刷新され、インストールやユーザー登録など判りにくくなっています。
インストール方法とユーザー登録方法を作成しましたので参考にしてください。

とりあえずGitを使う

今回はあえて黒い画面(ターミナル)を使ってみることにします。黒い画面とはWindowsでは「コマンドプロンプト」Macでは「ターミナル」のことです。GUIツールの「SourceTree」をインストールしておきながらなぜって思うかもしれませんが、ここはGitが何を行っているか確認するだけですから、だまされたと思ってちょっとだけ黒い画面(ターミナル)を使ってみましょう。

準備するのは作業フォルダです。
「git_sample」など好きなフォルダ名を付けて空のフォルダを作成しておきます。このフォルダの中に、後でHTMLファイルなど作業するファイルを作成していくことになります。今回はtxtファイルを作成しながら説明します。

リポジトリの作成

次にリポジトリを作成します。
リポジトリとはファイルやフォルダを管理するファイルです。リポジトリは不可視フォルダに入っていますので、通常は見えません。
リポジトリを作成するとそのフォルダ内のファイルはバージョン管理されるようになります。今回は「git_sample」フォルダが対象フォルダですから、この中にリポジトリを作成します。

リポジトリ作成の手順〜コマンドでの作成

  1. 黒い画面(ターミナル)を開きます
  2. ファイルを管理するフォルダに移動します。ターミナルでカレントディレクトリに移動するコマンドは「cd 」として「cd 該当フォルダのパス」と入力します。Macの場合はターミナルにcdとコマンドを入力して、その後は対象のフォルダをターミナルにドラッグアンドドロップすると、そのフォルダのパスがターミナルに入力されます。
    カレントディレクトリ移動のコマンド入力例
  3. リポジトリ作成コマンド「git init」を入力
    リポジトリの作成のコマンドは「git init」です。

    上のリポジトリ作成のコマンドを入力すると次のような内容が表示されます。
    ターミナル表示内容

リポジトリができると作業フォルダに新規ファイルを作成して作業を始めます。
例として、新規テキスト「sample.txt」を作成しましょう。

コミット

ファイルやディレクトリの変更、追加をリポジトリに記録するには「コミット」を行う必要があります。
ここで、いきなりコミットの操作をするのではなく、少しばかり追加の手順が必要です。

作業ツリー領域とステージングエリアについて

新規のファイルsample.txtを作成した状態です。

現在の状態を確認するには、コマンド「git status」で確認します。

現在のファイルの状態を確認するコマンド

ターミナル表示内容

ターミナルに表示された内容はコミットするためのステージングエリアに移動してない旨が表示されています。
git add”を使って管理下に追加してね的なことが書かれています。

この段階でのGitの認識は、編集したファイルは作業ツリー領域にあります。「sample.txtを作成した」とコミットするには、コミットの前に作業ツリー領域からステージングエリアに移動する工程が必要です。
このひと手間をかけることで、複数のファイルに同じ目的で編集した場合などまとめてコミットすることができるようになります。

dog_git02

作業ツリー状態のファイルをステージングに移動するには「git add」コマンドを使用します。

再び、コマンド「git status」で確認します。

ターミナル表示内容は次のとおりです。

これでコミットできるようになりました。

コミットの作成

「コミット」を行うことで履歴が作成されます。「コミット」すると、それ以前の「コミット」から現在の「コミット」までの差分が記録されるわけです。
どこで「コミット」を入れていくかはプログラムなどのコードを書いていく上で大切なポイントになります。日頃から「コミット」を入れる習慣を付けておくことはエンジニアにとって大事な習慣となることでしょう。

コミットのコマンドは「git commit」です。これだけではコメントが入りませんので、「git commit -m “ここに作業の内容などのコメントを入れる”」のように入力します。
コミットのコメントの書き方は決まりがありますが、ここでは簡単なコメントを入れるだけにしています。

コミットの入力例

ターミナル表示内容

これまでの「コミット」を確認するにはコマンド「git log」で確認します。

ターミナル表示内容

表示内容のcommit の「c42492fb5776a7bc1991eba57999478ce8baab2e」部分の番号がコミットIDで、過去に戻るときに必要になるものです。

ここで少しsample.txtを編集します。適当な文章を加えます。今回は「今日は晴れ。」と書いて保存しました。

この段階で状態を確認します。

ターミナルの表示

作業ツリー状態のファイルをステージングに移動するには「git add」コマンドを使用します。

次にコミットします。
コミットの入力例

ターミナルの表示

ここで再びsample.txtに記事を追加します。「出かけよう」と追加しました。

作業ツリー状態のファイルをステージングに移動するために「git add」コマンドを使用します。

コミットします。

ここでログを確認します。

ターミナルの表示

過去の作業状態に戻る

過去の作業状態に戻すには、「git checkout [commit_id] [file_name]」コマンドを使います。

それでは、sample.txtの「今日は晴れ」の状態に戻ってみます。コミットIDはログから探して入力します。

コマンドは次のとおりです。

これでコミットidの時点まで過去の状態にファイルが戻ったはずです。sample.txtの内容は「今日は晴れ」だけで、「出かけよう」の文言はありません。

こんな具合に過去に戻ることができるわけです。commit_idにまた「出かけよう」のIDを指定すればもう一度「出かけよう」までの文章に戻すこともできます。

Gitの基本的な仕組みは「git add」でステージング領域へ移動して、「git commit 」でコミットし、「git log」で履歴を確認できることが確認できたと思います。

ここでもう一度ログの内容を見てみます。

コミットの内容がわかりづらいです。たった2行の文章ならこれでも良いですが、通常は複雑な内容になるはずです。そのような場合にこのようなコミットの内容では、一体このコミットは何を行ったときなのか判らなくなります。
そのため、コミットには書き方のルールがあります。

1行目:変更内容の要約(タイトル、概要)
2行目 :空行
3行目以降:変更した理由(内容、詳細)

最低限この書き方は守るようにしましょう。タイトルの付け方や内容の書き方もローカルルールが存在します。
まずは3行に分ける書き方に慣れることと判りやすいコメントを書く練習をすることです。

まとめ

手軽にGitを試すコマンド一覧

  • リポジトリ作成 git init
  • 現在の状態を知る git status
  • 作業ツリーからステージングエリアへ移動  git add ファイル名
  • コミット git commit -m “コメント”
  • コミットの確認 git log
  • 過去に戻る git checkout コミットID ファイル名

次回はGUIツール「SourceTree」と使ってGitを操作する基本操作について学習します。
今回のコマンドでコミットできるようになっておくと、「SourceTree」が何を行っているか理解しやすくなると思います。

参考サイト
Gitのインストール
Gitチュートリアル
サルでもわかるGit入門

Gitの関連記事