【保存版】SourceTreeでGitの使い方まとめ1 個人開発編


俺日記のしんじです。一人称は僕です。

コマンドラインが苦手なGit初心者でも比較的容易にバージョン管理ができる、GitのローカルクライアントSourceTreeの使い方を説明する。

 

前提

・Mac版を利用
・testProject2という実験用プロジェクトを用意
・リモートリポジトリ管理にGitLabを利用

 

目次

  1. ローカルPC上のプロジェクトにSourceTreeで新しいリポジトリを設定
  2. SourceTreeでリモートリポジトリを設定
  3. 開発に必要のない設定ファイル等(.DS_store等)を追跡させない設定をしたい
  4. ある機能が完成したのでコミットしたい
  5. 直前のコミットメッセージを間違えたので修正したい。
  6. 直前のコミット時のファイル内容と編集後のファイル内容を比較したい
  7. 直前のコミット時点に戻したい(それまでの作業分は破棄)
  8. 直前のコミットから任意の時点のコミットをまとめたい
  9. 過去のコミット時点に戻したい(それまでの作業分はコミットして保持)
  10. 過去のコミット時点に戻り(それまでの作業分は保持)、実験的に機能を追加したが、必要なかったので破棄したい
  11. 過去のコミット時点に戻り(それまでの作業分は保持)、実験的に機能を追加したが、うまくいったので保持したい
  12. ブランチで作っていた機能が完成したのでmaster(他のブランチ)に反映したい。
  13. ローカルPCのデータをバックアップしたい

 

内容

ローカルPC上のプロジェクトにSourceTreeで新しいリポジトリを設定

SourceTreeを立ち上げるとまず下記の画面が開く。赤枠のマークをクリック。

スクリーンショット 2013-08-21 10.08.14

ダイアログが開くので「リポジトリを作成」タブをクリックし、「リポジトリの保存先」にtestProject2を設定し、作成をクリックして完了。

スクリーンショット 2013-08-21 10.12.27

以上。

 

 

SourceTreeでリモートリポジトリを設定

ブックマーク一覧にtestProject2が作られるので、これをダブルクリックし、下記のような画面を開く。リモートリポジトリを設定するため赤枠のボタンをクリックする。

スクリーンショット 2013-08-21 10.24.07

設定ダイアログが表示されるので、「追加」をクリック。

スクリーンショット 2013-08-21 10.35.33

リモートリポジトリ情報を記入してOK。

スクリーンショット 2013-08-21 10.46.14

以上。

 

 

 

開発に必要のない設定ファイル等(.DS_store等)を追跡させない設定をしたい

下記のような開発には必要のない設定ファイルがまぎれこむときがある。

スクリーンショット 2013-08-20 15.32.52
これを無視するために .gitignoreを編集する。
画面右上の「設定」をクリック。

スクリーンショット 2013-08-21 10.24.07

「高度な設定」タブを選択し、赤枠のボタンをクリック。

スクリーンショット 2013-08-21 11.33.54

テキストエディタが立ち上がるので

http://www.omakase.org/misc/gitignore.html

を参考に書き込み。

上記のようなコードを書いて、保存、テキストエディタをとじ、.gitignoreファイルをコミットして終了。

以上。

 

ある機能が完成したのでコミットしたい

基本的にはadd(追加)→commit(コミット)という流れ。
コミットされていないファイルの確認し、追加(addやステージングともいう)する。
ファイルを編集したり、追加したりすると、下記キャプチャ下部の「作業ツリーのファイル」欄へ編集・追加されたファイルの一覧がでてくる。アイコンの説明は以下のとおり。

…マーク:編集されたファイル
?マーク:今回初めて追加されたファイル

まず、”作業ツリーのファイル”欄でindexにステージングしたいファイルを選択し、「追加」ボタンをクリック。

スクリーンショット 2013-08-21 11.04.03

 

追加後、”indexにステージされたファイル”欄にファイルが移動したことがわかる。

スクリーンショット 2013-08-21 11.06.32

“indexにステージされたファイル”欄でコミットしたいファイルを選択したあと赤枠の「コミット」ボタンをクリックすると下記のような画面になる。コミットメッセージを記入しコミットをクリックし、コミット終了。

スクリーンショット 2013-08-21 11.08.50

コミット後、当然ながら作業ツリーにもindex上にもファイルが見当たらなくなる。赤枠エリアの各項目にマウスオーバーすると、キャプチャのように「表示」とテキストが表示されるので、クリックして開く。ブランチとリモートは開いておこう。

スクリーンショット 2013-08-21 11.11.10

各項目を開くと下記のようになり、「master」をクリックするとmasterブランチのコミット履歴を閲覧することができる。

スクリーンショット 2013-08-21 11.19.35

コミットまでの一連の流れが終了。
※私の環境ではgitignoreを分けてコミットしてしまったので下記のようになっている。

スクリーンショット 2013-08-21 11.45.25

以上。

 

直前のコミットメッセージを間違えたので修正したい。

下記の状態で、直前のコミット「commitE」というメッセージを修正したい場合。
コミットをクリック。

スクリーンショット 2013-08-23 16.23.11
すると、通常のコミットと同じように下記ダイアログが出現する。
ここで、赤枠の「最新のコミットを修正」にチェックをいれると、「コミットメッセージ」欄に直前のコミットメッセージが表示されるので、これを書き換えてコミットを行う。

スクリーンショット 2013-08-23 16.26.40

コミットメッセージの修正ができた。

スクリーンショット 2013-08-23 16.28.33
ただし、直前のコミットを既にpushしてしまっていると、問題が生じるので注意。
以上。

 

 

直前のコミット時のファイル内容と編集後のファイル内容を比較したい

下記画面からスタート。

スクリーンショット 2013-08-21 11.45.25

※余談だが、キャプチャ画面中部のコミット履歴が載っている欄について。各コミットをクリックすると、下記のように各段階のコミット内容(どのファイルを追加・削除・編集したか)を確認できる。アイコンの意味はそのうちわかるので説明は割愛する。

スクリーンショット 2013-08-21 11.53.38

さて、最後のコミットから作業を進めていると、ブランチには下記のようにUncommitted changesというメッセージが表示される。また、”作業ツリーのファイル”欄には直前のコミットからの変更点(追加・削除・編集したファイルの一覧)が表示される。

スクリーンショット 2013-08-21 12.36.39
これらのファイルを追加→コミットを行うと新たにコミットが出来上がる。
しかし、今回はその前に直前のコミットと変更内容を比較したいときの方法を記す。
赤枠に簡単な情報が記載されているが、赤枠内の「外部Diff」をクリックすると専用のエディタが立ち上がる。

スクリーンショット 2013-08-21 12.45.03
立ち上がったエディタ内で直前のコミット時のファイル内容と、現在の状態の比較を行うことができる。
下記では、直前のコミットと比較して、new lineという行が加えられる変更が行われたということを示している。
右下のActionsをクリックすると、右の状態、左の状態のどちらの内容を採用するか選択することができ、左の内容を選択すると、直前のファイル内容に戻るということになる。
編集後、上書き保存してエディタを閉じる。

スクリーンショット 2013-08-21 13.13.52

以上。

 

 

直前のコミット時点に戻したい(それまでの作業分は破棄)

この状態からスタート。
直前のコミットからファイルの削除、追加を行ったものとする。

スクリーンショット 2013-08-21 13.31.09
誤ってファイルを削除したり、これまでの編集を破棄して直前のコミットの状態に戻したい場合は、リセットを利用する。
画面上部の「リセット」をクリックすると下記のようなダイアログが出現するので、戻したいファイルにチェックをいれ、「変更内容を破棄」をクリック。

スクリーンショット 2013-08-21 13.32.21
リセットを利用すると、これまで追跡していなかったファイルも対象になる。
newfile.phpは今回初めて追加したが、リセットの対象になることがわかる。
リセットの詳しい仕組みはこちら

以上。

 

 

 

直前のコミットから任意の時点のコミットをまとめたい

下記のような状態からスタート。コミットが細かすぎたので、commit 4,5,6,7のコミットを一つにまとめたいとき。

スクリーンショット 2013-08-23 13.14.19

戻りたいコミットを選び(ここではcommit3)、「このコミットにnewbranch(ブランチ名)リセット」をクリック。

スクリーンショット 2013-08-23 15.15.41

すると下記のようなダイアログが出現するので、「Soft」を選択する。

スクリーンショット 2013-08-23 15.17.38

実行すると、commit3後のコミットが全て削除され、その間に行われた変更は全て Uncommited changesに変更されている。

スクリーンショット 2013-08-23 15.18.58

これを新しいコミットとし記録することで、当初の目的であったcommit4,5,6,7をまとめることができた。

スクリーンショット 2013-08-23 15.27.33

以上。

 

 

過去のコミット時点に戻したい(それまでの作業分はコミットして保持)

最後のコミットからファイルを編集した下記の状態とする。
過去のコミット時点の状態を確認したいときを想定。

スクリーンショット 2013-08-21 14.36.04

まず、Uncommitted changesを選択し、編集したファイルを選択→追加をクリック。その後 commitBとしてコミット。

スクリーンショット 2013-08-21 14.49.25

その後、commitAのファイル内容を確認したいとする。
commitAをダブルクリック(もしくはcommitAを選択し、チェックアウトボタンをクリック)すると下記のようなダイアログが出現する。

スクリーンショット 2013-08-21 14.51.32

気にせずOKをクリック。すると下記のような状態になる。

スクリーンショット 2013-08-21 14.52.54
「HEAD」とは、自分が今どのブランチで作業しているかを示す特別なポインタのことを指す。
現状、masterブランチからHEADが切り離されてしまっている(detached HEADという)。つまり、いまどのブランチにも所属していないことになる(no branch)。
この状態のメリットとしては下記。

You are in ‘detached HEAD’ state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.

‘detached HEAD’状態になっちゃったよ。このコミット時点のファイルがどうなってるか見て回ったり、実験的な変更を加えてコミットしてみたり、そしてそのコミットを他のブランチに影響を与えずにポイっと捨てられるよ。それには別のブランチをチェックアウトすればOK。

この時点で、自分のPC内のファイル内容を確認すると、commitA時の構成となっている。
これで、commitBは保持したまま過去のコミット(commitA)に戻ることは成功した。
commitBに戻りたい場合は、単純にcommitBをダブルクリックすればよい。
以上。

 

 

過去のコミット時点に戻り(それまでの作業分は保持)、実験的に機能を追加したが、必要なかったので破棄したい。

commitBからcommitAに戻った状態からスタート。

スクリーンショット 2013-08-21 14.52.54

この状態でファイルを編集すると、下記のように表示される。

スクリーンショット 2013-08-21 14.57.15
一旦この状態で追加→commitする。
ダイアログ右下のブランチが”no branch”となっていることがわかる。

スクリーンショット 2013-08-21 14.59.25

commitCとしてコミット。

スクリーンショット 2013-08-21 15.23.45
このとき、commitCは他のブランチにチェックアウトした時点で破棄される。
例えば、masterブランチにチェックアウトすると、左カラムに掲載されていたHEAD(このときはno branch)が消えて、commitCも破棄されていることがわかる。
→つまり、過去の時点に戻って変更を加えて遊んでみるときなどに使える。遊び終えたら他のブランチにチェックアウトして破棄。

以上。

 

 

過去のコミット時点に戻り(それまでの作業分は保持)、実験的に機能を追加したが、うまくいったので保持したい。

この状態からスタート。

スクリーンショット 2013-08-21 15.32.57

過去のコミット時点(ここではcommitA)に戻り、実験的に追加した機能をcommitDとしてコミットする。

スクリーンショット 2013-08-21 15.40.02

ここでcommitDの作業内容を残したいと考えたとする。このままチェックアウトするとcommitDは破棄されてしまうので、この場合、新たなブランチを作ることで保持させる。commitDを右クリックし、ブランチをクリックするとダイアログが出るので、下記のように入力。

※ブランチ名は通常は機能名などを採用します。

スクリーンショット 2013-08-21 15.43.32

これで、commitDがnewbranchに属するようになる。

スクリーンショット 2013-08-21 15.45.21

以上。

 

 

ブランチで作っていた機能が完成したのでmaster(他のブランチ)に反映したい。

newbranchで作っていた機能が完成したとする。

スクリーンショット 2013-08-21 15.45.21
他のブランチ(今回はmasterとする)にnewbranchの内容を反映させたいのでマージを使う。
まず、masterブランチへチェックアウトする。下記赤枠の部分でmasterをダブルクリックすればOK.
今いるブランチには印がつくので確認すること。

スクリーンショット 2013-08-21 16.06.16

その後、newbranchを右クリックし、「newbranchをmasterへマージ」をクリック。

スクリーンショット 2013-08-21 16.08.12
すると下記のようなダイアログが出現するので、すきなものを選んで「確認する」をクリック。
※今回全てのチェックを外した。

スクリーンショット 2013-08-21 16.09.11

競合(コンフリクト)が発生した場合下記のようなダイアログが出現する。

スクリーンショット 2013-08-21 16.09.56
OKをクリックし、確認するため、下記画面へ移動すると、競合のあるファイルに!マークが表示されている。
赤枠内に競合情報が記載されている。

スクリーンショット 2013-08-21 16.11.32
競合しているファイルを右クリック→競合を解決→と辿ると、
、自分(HEAD(ここではmaster))の変更or相手(ここではnewbranch)の変更を使って解決
というのがある。
仮に、自分の変更を使って解決する場合は下記ダイアログが出現。

スクリーンショット 2013-08-21 16.15.10

その後、追加→コミットして、マージは完了する。

スクリーンショット 2013-08-21 16.18.21

以上。

 

ローカルPCのデータをバックアップしたい

これまでのコミット履歴を、リモートリポジトリにpushするということ。
下記の状態でmasterブランチをリモートリポジトリにpushする。赤枠のプッシュをクリック。

スクリーンショット 2013-08-23 10.37.40

下記のようなダイアログが表示される。今回はmasterだけなので、下記のようなチェックをいれる。

スクリーンショット 2013-08-23 10.39.53

プッシュ後下記のようになる。

スクリーンショット 2013-08-23 10.41.16

リモートリポジトリの様子を確認すると下記のように、masterブランチがpushされていることがわかる。

スクリーンショット 2013-08-23 10.44.15

 

push時の各項目について説明する。

「プッシュ先のリポジトリ」:
よく利用されるのはにorigin。ここではgitlabとなっている。ちなみに、SourceTreeではなく、コマンドラインからプッシュ先のリポジトリを確認するにはgit remoteを利用する。念のためコマンドラインで確認する。
$ git remote
gitlab
確かにgitlabになっている。

「プッシュしますか?」:
チェックすると、コマンドラインにおける下記コマンドのbranch-nameの部分に名前をいれるのと同義となる。
git push [remote-name] [branch-name]
一時的に作成しただけのブランチ(チームで共有したりバックアップの必要のないブランチ)であれば、プッシュする必要はない。

「追跡しますか?」:
追跡ブランチ (tracking branch) というブランチにするかどうか。
追跡ブランチとは、リモートブランチと直接のつながりを持つローカルブランチのこと。今回の場合のほか、リモートブランチからローカルブランチにチェックアウトした際などに作成される。

追跡ブランチの用途①
追跡ブランチであれば、プッシュ先やプル元のリモートリポジトリのブランチが既知なので、git pull と git push に何も引数を渡さなくてもよくなるというメリットがある。(本来であればコマンドラインから git push [remote-name] [branch-name]と入力しなければならない。)
※しかし、SourceTreeでは、プッシュ・プル時に明確にブランチを指定するので、このメリットはあまりない。

追跡ブランチの用途②
追跡ブランチの場合、下記のようなアイコンがつく場合がある。
これはmasterブランチに未プッシュのコミットが一つあるという意味になる。
スクリーンショット 2013-08-23 11.20.09

下記の「1 ahead」も同じ意味。
スクリーンショット 2013-08-23 11.22.26

また、未プルのものがあると、下記のように↓と個数のアイコンがつく。
スクリーンショット 2013-08-23 11.54.24

下記の「1 behind」も同じ意味。
スクリーンショット 2013-08-23 11.54.39

以上。


投稿者: しんじ

ベトナムでオフショア開発会社経営中 www.bit-vietnam.com 。サービス開発が趣味。web系は主にPHPで、スマホアプリはswiftで。最近はエンジニア向けの英語勉強webアプリ エングリッシュ e-lish.io を作りました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です