Git

SourceTreeのインストール方法を徹底解説!ド文系でもわかるGit入門

きのみ
きのみ
こんにちは、きのみです。

前回はGitを用いたWebサービスについて説明しました。

Git機能を提供するWebサービスを紹介!ド文系でもわかるGit入門
 前回から引き続き、ド文系でもわかるGit入門をお届けします。 https://skillog.jp/git1 今回は...

そのWebサービスの1つに「SourceTree」がありましたね。

復習すると、SourceTreeは、Gitコマンド操作をボタンなどのGUIで行えるようにしたGitクライアントツールでした。

当入門では、まずSourceTreeを使ってGitの基本操作を学んでいきます。
それでは、SourceTreeのインストールからいきましょう。

SourceTreeをインストールしてみよう

SourceTreeは以下の公式サイトから入手できます。(図1)

(図1)

「MacOS X 向けダウンロード」ボタンをクリックするとインストーラーをダウンロードできます。
ダウンロードしたファイルをダブルクリックして開き、表示された「SourceTree.app」を起動します。

SourceTreeを起動すると、Bitbucketアカウント登録画面が表示されるので、アカウントを作成しましょう。(図2)

(図2)

メールアドレス入力画面になるので、ご使用のメールアドレスを入力します。(図3)

(図3)

その後、各必要事項の入力が完了すると、アカウントが作成されます。(図4)

(図4)

Bitbucketアカウント作成後、SourceTreeの画面に戻るとアカウントへのアクセス確認画面が表示されるので、アクセスを許可しましょう。(図5)

(図5)

すると、登録が完了します。
続行をクリックしましょう。(図6)

(図6)

Preferences画面はチェックなしで問題ありません。
完了をクリック。(図7)

(図7)

すると、SourceTreeが起動し、リポジトリブラウザが表示されます。(図8)

(図8)
きのみ
きのみ
以上でSourceTreeのインストール作業は完了だよ!

ローカルリポジトリを作ろう

SourceTreeをインストールしたら、次に自分のPCにローカルの練習用リポジトリを作ってみましょう。
このローカルリポジトリを使って、SourceTreeの基本操作を学んでいきます。

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

SourceTreeウィンドウの上部にある「新規…」ボタンをクリックします。(図9)

(図9)

メニューから「ローカルリポジトリを作成」を選択します。(図10)

(図10)

保存先のパスと名前を指定しましょう。自分わかりやすい場所・名前を指定すれば良いです。(図11)

(図11)

すると、SourceTreeウィンドウの中央部に、自分が作成したローカルリポジトリが表示されます。(図12)

(図12)
きのみ
きのみ
以上がローカルリポジトリの作成だよ!

コミットのやり方を覚えよう!

次はコミットの作業を実際におこなって、手順を覚えていこう!

ローカルリポジトリにファイルを追加する

ローカルリポジトリを先ほどの手順で作成したので、次はファイルを作成し、コミットしてみましょう。

まずはコミットするファイルをテキストエディットなど作ります。ファイルの内容・形式は何でも問題ありません。

今回は以下のような内容を「test.rtf」として作成してみました。(図13)

(図13)

次に、リポジトリとして登録した「skillog」フォルダに保存します(図14)

(図14)

SourceTreeを開き、作成したローカルリポジトリをダブルクリックしてください。
今回では「skillog_test」がそれに該当します。(図15)

(図15)

すると以下のような画面が表示されます。
表示さない場合は、左にあるワークスペース内のファイルステータスをクリックしてください。(図16)

(図16)

※(図16)のようにならず、(図17)のような画面が表示れた場合は、画像内の赤四角で囲った部分をクリックして「ファイルをステージに移動する」を選択してください。(図17)

(図17)

ここまで進むと、「作業ツリーのファイル」という中央下部の欄に、新たに追加したファイルである「test.rtf」が表示されているはずです。(図18)

(図18)

SourceTreeが自動的にリポジトリで起こった変更を確認し、表示してくれます。
また、右側にはその「test.rtf」のファイルの中身が表示されています。

コミットする前にステージへファイルを移動する

それでは、追加したファイルをコミットするためのファイルとして追加してみましょう。
test.rtfの左側にあるチェックボックスにチェックを入れます。(図19)

(図19)

すると中央上部の「Indexにステージしたファイル」というエリアにtest.rtfが移動します。(図20)

(図20)

このように、ファイルをコミットする際には、ファイル自体をステージに移動する準備が必要になります。

このフローは、複数のファイルの変更があった場合に、変更の内容によってコミットを分けたいといった場合に便利になります。

きのみ
きのみ
吹き出しの内容 コミットするためにはまずステージに移動するということを覚えておこう!

メッセージとともにコミットする

ステージに移動させたらコミットをおこないます。

コミットするには画面上部のツールバーにある「コミット」ボタンをクリックします。(図21)

(図21)

すると、下部にコミットメッセージの入力欄が表示されます。
ここに変更内容についてのコメントを入力します。
今回は、「1回目のコミットです。」というコメントを入力しました、

各々のコミットがどういうことを意味しているのかを把握するために、各コミットには必ずコミットメッセージをつけましょう。

コミットメッセージを入力したら、画面右下の「コミット」ボタンをクリックします。(図22)

(図22)

以下の画面へ遷移すると、コミットが成功した証になります。(図23)

(図23)

そして、左にある「ブランチ」から「master」をクリックすると、今おこなったコミットが表示されるはずです。(図24)

(図24)
きのみ
きのみ
吹き出しの内容 これでコミットが完了したよ!

ファイルの変更・更新とコミット間の移動

もし、「test.rtf」ファイルの内容に変更があった場合は再度同じ手順で、ステージに移してコミットを行うと変更内容が修正されます。

それでは、実際に「test.rtf」ファイルの内容を変更し、変更内容をコミットしてみましょう。

今回は次のように「test.rtf」ファイルの内容を変更してみました。(図25)

(図25)

「test.rtf」ファイルを保存して、SourceTreeに戻ると以下のような画面になっているはずです。(図26)

(図26)

「Uncommitted changes」が変更を加えた「test.rtf」ファイルになります。
そして、「Uncommitted changes」をクリックすると、選択できるようになります。(図27)

(図27)

「test.rtf」の左側にあるチェックボックスにチェックを入れ、左上のコミットボタンを押し、コミットメッセージをつけましょう。
(図28)

(図28)

最後に右下にあるコミットボタンを押してコミット完了しましょう。
すると、(図29)のような状態になります。

(図29)

これでファイルの更新とコミット間の移動が完了しました。

きのみ
きのみ
お疲れさま!

ちなみに、コミットは時系列のつながりを持っているので、コミット単位で内容を戻すことができます。

「test.rtf」を一度目の状態に戻してみましょう。
まず、コミット履歴欄で一度目のコミットをダブルクリックします。(図30)

(図30)

すると、以下のようなダイアログが表示されるので、「OK」をクリックしましょう。(図31)

(図31)

すると、一度目のコミットに「HEAD」という文字が表示されました(HEADについての説明はまた後日おこないます)
この「HEAD」が表示は、一つ前の状態に戻ったことを意味しています。(図32)

(図32)

「test.rtf」を開いてみましょう。
ファイルの中身が一つ前のコミットの状態に戻っていることがわかります。(図33)

(図33)

SourceTreeの操作は簡単でしょう?

SourceTreeでは、このように簡単な操作で、ファイルの変更・更新とコミット間の移動をすることが可能です。

Gitは複数のメンバーでのバージョン管理に威力を発揮しますが、以上の操作より個人のファイル管理・バージョン管理にも活用できることがわかりましたね。

以上が、SourceTreeの基本的な操作となります。

引き続き、ド文系でもわかるGit入門は続いていくので、この機会にGitをマスターしてはいかがでしょうか?

きのみ
きのみ
きのみ自身も頑張って学んでいるよ!