解 説

前回はコマンドでGitの仕組みを見てきました。今回はGUIのアプリケーションSourceTreeの使い方を学習します。

ローカルでのバージョン管理を行う上で必須の作業は次の3つです。

  1. ローカルリポジトリの作成  git init
  2. 作業ツリーからステージングエリアへ移動  git add ファイル名
  3. コミット  git commit -m “コメント”

SourceTreeを使えばコマンド入力は必要ありません。直感的に操作できますので、Webデザイナーさんはこちらの方が使いやすいと思います。

今回覚えておきたい用語
リポジトリ:バーション管理するフォルダやファイルを入れる入れ物
ステージング:バージョン管理の対象にすること
コミット:バージョン管理の印を付けること

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

リポジトリとは直訳すると容器とか倉庫などの意味があります。Gitではリポジトリはファイルやディレクトリの状態を記録する場所になります。
つまり、リポジトリ内のファイルやフォルダの変更履歴を管理することになるのです。
バージョン管理する上でもっと基盤になる器といったところです。

SourceTreeで新規リポジトリ作成方法〜Mac

MacでSourceTreeを使用してリポジトリを作成する手順です。

  1. SourceTreeを起動して出てくるパネルから「+新規リポジトリ」ボタンをクリックして「ローカルリポジトリ作成」を選択します。
    git001
  2. 次に保存先のパスを指定します。指定するフォルダはこれから作業をするファイルなどを格納するフォルダです。
    ここで指定したフォルダの中にリポジトリフォルダ「.git」が格納されます。リポジトリフォルダは不可視フォルダですから、一般的な設定では見ることができません。
    Macで不可視フォルダを見えるようにする方法

    git002

参考:リポジトリを作成するコマンドは「git init」です。

SourceTreeで新規リポジトリ作成方法〜Windows

WindowsでSourceTreeを使用してリポジトリを作成する方法です。

  1. メニューのファイルから「新規/クローンを作成する」、またはツールバーの「新規/クローンを作成する」を選択します。
  2. 表示されたボックスの「リポジトリを作成」タブを選択します。
  3. 「保存先のパス」で保存するパスを選択します。パスを選択するとブックマーク内の名前にフォルダ名が自動で入ります。
  4. その後「作成」ボタンをクリックします。

git101

これでバージョン管理を行う器ができたことになります。

sample.htmlファイルの作成

練習用にsample.htmlファイルを作成します。

sample.htmlのHTMLコード

sample.htmlファイルを追加するとSourceTreeが感知して作業ツリーに表示します。
Macの例
git003

Windowsの例
git102

SourceTreeでステージングエリアに移動する方法

リポジトリ内のファイルを変更すると作業ツリーに自動で表示されました。
けれども、このままではバージョン管理はできません。
バージョン管理したい対象をステージングエリアに移動する必要があります。そうすることでバージョン管理したいファイルやフォルダを細かく指定することができるのです。

ステージングエリアに移動する方法は簡単です。
作業ツリーにあるsample.htmlにチェックを入れるだけで、ステージングエリアに移動します。
Macの例
git004

Windowsの例
git103

参考:ステージングエリアに移動するコマンドでは「git add」です。

SourceTreeでコミットする方法

コミットはバージョン管理を行う上で重要な目印になります。
コミットするにはステージングエリアに対象のファイルやフォルダを移動しておく必要があります。

コミットの方法は、コミットボタンをクリックして行います。
さらにメッセージ欄にコミットメッセージを記述します。
Macの例
git005

Windowsの例
git104

参考:コミットするコマンドは「git commit -m “コメント”」です。

コミットしようとするとエラーになる

コミットしようとすると次のように「Please tell me who you are.」エラーになる場合があります。
git106

エラーの原因

設定の際にグローバルユーザーの設定がされてないためです。

対策

Macの場合は環境設定から出てくるボックスの全般タグを選択します。
デフォルトユーザー情報の「フルネーム」と「メールアドレス」を記入します。
Macの例
git108

Windowsの場合は、メニューのツールからオプションを選択します。
デフォルトユーザー情報の「フルネーム」と「メールアドレス」を記入します。
Windowsの例
git107

SourceTreeでコミットの履歴を確認する方法

左メニューのブランチ欄のmasterをクリックするとコミットした内容が表示されます。
Macの例
git006

Windowsの例
git105

復習 sample.htmlに追加記入してコミットするまでの流れ

今度はsample.htmlの「title」に「Git練習」とテキストを追加しました。
まだコミットしていませんので「uncommitted changes」と表示されています。

参考画像はMacのものです。
git70
まず、「uncommitted changes」部分を選択します。
次に、作業領域にあるsample.htmlのチェックボックスをクリックしてステージングエリアに移動します。もし複数のファイルを編集した場合は複数のファイルが表示されます。ステージングエリアに移動したい作業ツリーのファイルのチェックボックスにチェックを入れます。
参考画像はMacのものです。
git711

これでステージングエリアにファイルが移動します。
参考画像はMacのものです。
git72

ツールパネルの左側にある「コミット」ボタンをクリックしてコメントを記入します。
参考画像はMacのものです。
git73

コミットすると次のようになります。
参考画像はMacのものです。
git71

履歴を戻ってファイルやフォルダを修正する方法

何らかの理由で前のバージョンに戻りたい。または消去したファイルを戻したいときなどの方法です。
これはまさにGitの真骨頂な本来のバージョン管理の便利な仕組みです。
この操作は編集しているファイルを過去にさかのぼってやり直したい場合のことです。

履歴を戻りたいときはSourceTree上の戻りたい位置を選択して右クリックでメニューで一番上にある「チェックアウト」を選択します。そうすると対象のグラフの丸印が大きく変わります。

この操作の後にファイルを確認すると変更内容は無くなり、その前の状態に変わります。
git86
git87

このような方法でコミットを付けた時点に行ったり来たりすることができます。
まずはこのやり方をしっかり覚えてしまいましょう。

もしSourceTreeの操作を間違えて訂正したい場合

間違えることはしばしばあります。訂正方法を知っておきましょう。
訂正といっても、Gitの場合次のような2つのケースが考えられます。ケースが変われば対応も変わりますのでまとめておきます。間違った訂正を行うとグチャグチャになってしまいますのでここは重要です。

ケース1
コミットのミスでコメントを訂正したい。
ケース2
SourceTree上の操作ミスでもう一度前に戻ってやり直したい。対象のファイルも元の状態に戻したい。

ケース1〜SourceTree上のミスでコミットのコメントを訂正したい

コミットの内容を訂正したい場合はよく起こります。その割に訂正方法が判りにくいです。
まず、変更したいコミットの一つ前の履歴を選択します。
右クリックして出てくるメニューから「xxxxの子とインタラクティブなリベースを行う」を選択します。
Macの場合
git109

Windowsの場合
git110

出てきたボックスの下にあるボタンから「メッセージ編集」ボタンをクリックします。
Macの場合
git110b

Windowsの場合
git111

コミットメッセージを編集します。
Macの場合
git110a

Windowsの場合
git112

ケース2〜SourceTree上のミスでもう一度前に戻ってやり直したい、対象のファイルも元の状態に戻したい。

もし、何らかのSourceTree上のミスでもとの状態に戻ってやり直しをしたい場合は、戻りたい時点を選択してそこで右クリックします。出てきたメニューから「このコミットまでmasterを元に戻す」を選択します。

*この操作はあくまでSourceTreeのミスをやり直す方法です。現在コーディングしているファイルも元の状態に戻ります。

git75

「ブランチの指す先を移動してよろしいですか?と表示されたら、3つのモードの種類を選択します。
git76

「Hard-すべての作業コピーの変更内容を破棄」を選択するとこの時点の状態に戻ります。
git77

再びファイルの更新とコミット

sample.htmlファイルにh1要素とp要素を追加します。SourceTree上に「Uncommitted changes」が表示されます。
git81

作業ツリーのファイルにある「sample.html」にチェックを入れて、ステージングエリアに移動します。
git82

コミットします。
git83

ここまでのSourceTree上の表示は次のようになります。
git84

同様の作業を行いながら少しsample.htmlをコーディングします。
ここではsection要素にp要素を入れ子にしたものを作成しました。
git85

次回はリモートリポジトリについてBitbucketで説明します。

Gitの関連記事