現場でなんとなく使いがちなGit管理ツール「SourceTree」の使い方


WEBエンジニア勉強会 #04
2017/11/25(土) 13:30 〜 16:00
https://web-engineer-meetup.connpass.com/event/70551/

こちら上記勉強会の際に使ったLT資料です。


----
# きっかけ

----

2015/01/01にGit関係のこんな記事を公開。
![スクリーンショット 2017-11-25 11.52.53.png](https://qiita-image-store.s3.amazonaws.com/0/46299/1ba4c04d-3367-6a5c-7b95-5adb78c0782e.png "スクリーンショット 2017-11-25 11.52.53.png")

----
# Git管理方法の具体的な解説は需要ある

----

# もしかしたら使ってないかもしれない機能の紹介

- なんとなくこう使ってる
- なんとなく使えてるから問題ない

----

# 基本的な使い方

----

<ol style="font-size: 60px">
<li>ブランチ</li>
<li>ステージング</li>
<li>コミット</li>
<li>プッシュ</li>
</ol>

----

# これだけ出来れば基本は大丈夫

----

# ありがとうございました

----

# ではなくて…

----

# もうちょっと詳しく知りたい

----

# ですよね？

----

# ブランチ

----

# ブランチとは

- それまでのファイル状態と全く同じコピーをまるごと作成
- その中で作業すれば、間違っても取消し、やり直しが簡単。
- うまくできたら本流に取り込める。

→ 取り消し、取り込みのコマンドがある！

----


# 取り消し ＝ ブランチ削除

----

# 取り込み ＝ マージ

----

# 全部消したくない、部分的にやり直したい

----

# ですよね？

----

# できます

----

# ステージング

----

<div style="font-size: 80px">
コミットするファイルを選択できる
</div>

<div style="font-size: 80px">
だけではない！！
</div>

----

# コミットする行単位での指定が可能！

----

普通はファイルの変更点全てをコミット or 破棄

![スクリーンショット 2017-11-13 10.58.41.png](https://qiita-image-store.s3.amazonaws.com/0/46299/dcfe7857-8ad6-4211-4a3d-daaa1d2080ea.png "スクリーンショット 2017-11-13 10.58.41.png")

----

行を選択 → 選択した行をステージへ移動 で、選択した行だけコミット or 破棄

![スクリーンショット 2017-11-13 10.58.52.png](https://qiita-image-store.s3.amazonaws.com/0/46299/94cf267f-622f-3a72-c18d-469e52b186e5.png "スクリーンショット 2017-11-13 10.58.52.png")

----

# 部分的にコミット or 取り消しできる！

----
# つまり
- 余計な空行・変更をSourceTreeで取り消してコミット
- 1ファイル上の複数箇所に渡る変更を分けてコミット

このようなことをする場合、エディタで編集する必要がない！

----

# 差分を操る

----

# ファイル単位で取り消す場合
ファイルを右クリック→リセット

![スクリーンショット 2017-11-13 11.16.29.png](https://qiita-image-store.s3.amazonaws.com/0/46299/6401d59b-548f-fd02-45a8-8e62a1256ee9.png "スクリーンショット 2017-11-13 11.16.29.png")

----

# だいたい右クリックしたらなんとかなる

----

# ブランチのリセット1
コミットを選択して右クリック→ このコミットまで【ブランチ名】を元に戻す。

![スクリーンショット 2017-11-22 11.23.26.png](https://qiita-image-store.s3.amazonaws.com/0/46299/b196ef3e-4dbf-3969-3826-ed07e3587b90.png "スクリーンショット 2017-11-22 11.23.26.png")

----
# ブランチのリセット2
Soft, Mixed, Hardから選択。

- 差分はそのままにコミットをやり直したい場合はMixed。
- 差分も履歴も全てなかったことにしたい場合はHard。
- 今までの履歴と差分に手を付けずにコミットをやり直したい場合はSoft。

![スクリーンショット 2017-11-22 11.31.36.png](https://qiita-image-store.s3.amazonaws.com/0/46299/2fde27cf-b28f-01cc-20d0-56f18f265f5c.png "スクリーンショット 2017-11-22 11.31.36.png")

----
# 該当の履歴の状態まで一気に戻せる

----
# ファイル単位で戻したい場合は？

----
# コミットまで戻す1
先頭のコミットの差分がこんな感じ

![スクリーンショット 2017-11-22 11.15.19.png](https://qiita-image-store.s3.amazonaws.com/0/46299/ce83251c-2b0f-77a7-2a07-202c61b6b0ce.png "スクリーンショット 2017-11-22 11.15.19.png")

----
# コミットまで戻す2
履歴に表示されているファイル名の所で右クリック → コミットまで戻す

![スクリーンショット 2017-11-22 11.15.37.png](https://qiita-image-store.s3.amazonaws.com/0/46299/54fb7ea4-6458-8132-0db9-386a52aae2b5.png "スクリーンショット 2017-11-22 11.15.37.png")

----
# コミットまで戻す3
選択したファイルの状態まで差し戻される（コミットはされない）

![スクリーンショット 2017-11-22 11.16.10.png](https://qiita-image-store.s3.amazonaws.com/0/46299/4d95f089-7513-edd7-c832-4d69d66204c9.png "スクリーンショット 2017-11-22 11.16.10.png")

----

# スタッシュ

----

# スタッシュ

一時退避コマンド。
現在の変更を**全て**一時的に退避する。

![スクリーンショット 2017-11-21 22.27.42.png](https://qiita-image-store.s3.amazonaws.com/0/46299/685ebf35-4775-25a1-c903-46059d8a7401.png "スクリーンショット 2017-11-21 22.27.42.png")

----

# ですが、我々は知っている

----

# 部分的にステージに移動する方法を！

----

# そして、スタッシュの際、ステージされた変更を残すことが出来る

----

# つまり2つの操作を組み合わせられそう

----

# というわけで実例

----

# 複数行の差分があります

![スクリーンショット 2017-11-21 22.25.18.png](https://qiita-image-store.s3.amazonaws.com/0/46299/84d44464-fbc8-1bb1-418f-de8ecf19534f.png "スクリーンショット 2017-11-21 22.25.18.png")

----

#「ここだけ使いたい」の1行のみステージング
選択した行をステージへ移動
![スクリーンショット 2017-11-21 22.21.28.png](https://qiita-image-store.s3.amazonaws.com/0/46299/6afebedb-6b8a-62e6-46bd-09431c46c756.png "スクリーンショット 2017-11-21 22.21.28.png")

ステージ移動後
![スクリーンショット 2017-11-21 22.35.20.png](https://qiita-image-store.s3.amazonaws.com/0/46299/40ec1529-4be1-6dcc-07e0-e25e6743e0d7.png "スクリーンショット 2017-11-21 22.35.20.png")

----

# スタッシュ
一時退避します。
この時、「ステージされた変更を残す」にチェックを入れる。

![スクリーンショット 2017-11-21 22.24.09.png](https://qiita-image-store.s3.amazonaws.com/0/46299/de4d703b-a4fa-7ada-7455-eef98ea72775.png "スクリーンショット 2017-11-21 22.24.09.png")

----

# ステージされた変更だけ残る
作業ツリーのファイル表示が消える。

![スクリーンショット 2017-11-21 22.45.16.png](https://qiita-image-store.s3.amazonaws.com/0/46299/4055daf0-46f3-df57-466d-55559db75d70.png "スクリーンショット 2017-11-21 22.45.16.png")

## 変更前との比較
![スクリーンショット 2017-11-21 22.35.20.png](https://qiita-image-store.s3.amazonaws.com/0/46299/40ec1529-4be1-6dcc-07e0-e25e6743e0d7.png "スクリーンショット 2017-11-21 22.35.20.png")

----

# さらにスタッシュ
今回はチェックを付けずに一時退避。

![スクリーンショット 2017-11-21 22.49.20.png](https://qiita-image-store.s3.amazonaws.com/0/46299/cabf8759-5e39-5d46-c63f-e3619239c187.png "スクリーンショット 2017-11-21 22.49.20.png")

----

# 「ここだけ使いたい」のみの一時退避差分ができた
ここまでできたら、複数のブランチに対して、この変更をそれぞれ適用することが簡単にできる。

![スクリーンショット 2017-11-21 22.26.05.png](https://qiita-image-store.s3.amazonaws.com/0/46299/930bea7f-22c6-2735-2953-7faadecec20e.png "スクリーンショット 2017-11-21 22.26.05.png")

----

# 差分の抽出、加工がエディタを使わずにできた

----

# まとめ
- 状況に応じた単位でのコミット、差し戻しを使うと作業を効率化できる。
- 差分はエディタを使わなくても、SourceTree上で加工できる！
- SourceTreeはファイルをコミットするだけではない！

----

# 自己紹介
![スクリーンショット 2017-11-21 23.29.08.png](https://qiita-image-store.s3.amazonaws.com/0/46299/27d2681b-4788-2f2f-5f89-217572c00224.png "スクリーンショット 2017-11-21 23.29.08.png")

- 名前：笹島大和
- 職種：フロントエンドエンジニア
- 会社：CBcloud

----

## エンジニアの転職メモ
今年2月に公開。そこそこいいねが付いていたが、
10月に別記事で後日談を公開した所、Qiitaメルマガに載ったこともあり、閲覧数といいね数が急増する。

![スクリーンショット 2017-11-21 23.21.54.png](https://qiita-image-store.s3.amazonaws.com/0/46299/0145e3e5-22b0-f714-fde3-0470e54d2eb6.png "スクリーンショット 2017-11-21 23.21.54.png")

----

# ご静聴、ありがとうございました。