[SourceTree]  git/GitHub を管理する方法

# 概要
SourceTree を利用して、git で作業ディレクトリ（ローカルディレクトリ/リモートディレクトリ）を管理する方法についてまとめる。

# 前提知識
[ターミナルで git/github を管理する方法](https://qiita.com/ub0t0/items/04b67ac95a1adb8cbe3c)

# 環境
Sourcetree for Mac 2.7.6 
（version 3 以降はアカウントを複数作成する必要があるようなので 2 系の最新版を利用）



# ローカルディレクトリの管理
### git init //フォルダをバージョン管理の対象にする
1.[新規] → [ローカルリポジトリを作成] をクリック
![スクリーンショット 2020-09-11 9.39.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/4859735f-1a96-3a04-09ee-da85534e3bfc.png)
2. [ローカルリポジトリを作成] ウィンドウでバージョン管理の対象にしたいフォルダを選択し、[作成] をクリック
 
![スクリーンショット 2020-09-11 9.41.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/82370cdc-ed32-71b8-870d-65432c356c98.png)

そうすると、指定したフォルダに`.git`フォルダが作成される
![スクリーンショット 2020-09-11 9.41.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/401dc48f-1cb5-d8ba-c2a1-83b3722c774a.png)

トップページに作成したリポジトリが表示される
![スクリーンショット 2020-09-11 9.42.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/5e2e01d5-de0c-7525-3694-3a9bd6f72a1f.png)

このフォルダに text.md ファイルを格納しておく

### git add //記録対象の指定
フォルダーの中にファイルを格納すると、自動的に Sourtree でも検知され、[作業ツリーのファイル] に表示される
![スクリーンショット_2020-09-11_9_57_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/30b8d3d1-a21f-ee34-f97c-cfcef0c37486.png)


ファイル名の先頭にあるチェックをオンにすると、ファイルが [indexにステージしたファイル] に追加される


### git commit  // 変更点の記録
![スクリーンショット_2020-09-11_10_00_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/cef1742b-0193-b3e8-3b20-4499f64918fb.png)

画面下部にコミットメッセージを入力するところが出てくるので、コミットメッセージ（ここでは「first commit」）を記載し、[コミット] をクリック

ファイルの中身を修正すると、以下のように表示されるので、コミットしたいファイルを[作業ツリーのファイル] から選択し、コミットメッセージを入力する、という手順を繰り返す
![sa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/ddd99522-e481-de3f-46c3-5557792f010e.png)



# リモートリポジトリへ変更を反映
### github でリポジトリを作成
[Your profile] → [Repositories] → [New] をクリック
![スクリーンショット 2020-09-10 17.05.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/abfe8a08-7a2d-ac7c-6c0d-0db69221e5bb.png)

[Create a new repository] ページが表示されるので、[Repository name] を入力する。ここでは、ローカルディレクトリとあわせて「helloSourcetree」とし、[Create Repository] をクリックする

ここでは、画面に表示された [HTTPS] をコピーする

### Sourcetree でローカルディレクトリを github のリモートディレクトリに紐づける
![スクリーンショット_2020-09-11_10_32_41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/6823a8da-a0af-fa2e-7787-ce540a37af41.png)
画面左上の [設定] をクリックし、[リモート] → [追加]をクリックし、github でコピーした URL（ここでは https のリンク） を貼り付けて設定する。

![スクリーンショット_2020-09-11_10_33_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/849992de-4fb3-6278-6027-a46b66b9d3b8.png)

リポジトリごとにこの設定が必要になるので、[リモートの名前] にはわかりやすいようにディレクトリと同様の名前を入力しておく。

### commit した変更を github に反映
![スクリーンショット 2020-09-11 10.47.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/53cceefa-ddb3-0a06-0f05-fcc8e68ff442.png)

[プッシュ] をクリックすると、接続先を指定するウィンドウがでてくる
![スクリーンショット_2020-09-11_10_33_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/a7e9b501-19ec-5864-072f-e7354f10621f.png)

[プッシュ先のリポジトリ] で上記で作成した 「helloSourcetree」を選択し、[プッシュするブランチ]でプッシュしたいブランチをオンにして、[OK] をクリック

ID と PW を入力すると、githubに公開される
SSH を利用すると、プッシュする際に毎回 ID と PW をいれなくてOKなので便利

### github でファイルの中身を変更した場合
github 上で Read me ファイルの作成やファイルの中身を変更した場合や他の人が編集した場合も Sourcetree 上に反映される。 pull コマンドを利用して、ローカルリポジトリを更新する。

![スクリーンショット 2020-09-11 11.00.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/9bd6441c-ba7f-9381-1f89-ed90c7234b05.png)
[プル] のところに❶と表示されていて、一件更新があることが確認できる。 [プル] をクリック

![スクリーンショット 2020-09-11 11.00.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/35cb3881-34ef-2e24-db7d-1af0c9cc8eef.png)

デフォルトのまま OK をクリックすると反映される


#### 注意点
[プル] できるとき（ローカルが最新状態でないとき）に、プルせずにプッシュしようとすると以下のエラーが発生する。
このエラーが発生した場合はプルしてからプッシュすること。
![スクリーンショット_2020-09-11_21_48_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/cb537d6a-8f7d-bab2-8cc3-26762ff416c7.png)


### github にすでにあるリポジトリをローカルで管理
github にすでにあるリポジトリ（リモートリポジトリ）をローカルで管理するためにはクローンする必要がある
![スクリーンショット 2020-09-11 11.28.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/398d9eb0-02b4-4794-847f-08c55b9d4516.png)
[新規] → [URLからクローン] をクリック

ここでは、[GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~](https://qiita.com/shizuma/items/2b2f873a0034839e47ce)を参照し、SSH の設定を行っている

![スクリーンショット_2020-09-11_11_37_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/b3b061af-16c1-67c8-a5e4-c0060dbacc6a.png)
[ソース URL] には github の [Code] → [Clone with SSH] をコピーして貼り付ける
HTTPS を利用したい場合は、[Use HTTPS] をクリック

![スクリーンショット_2020-09-11_11_37_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/48aeb31f-b0ec-2d72-92ea-283e1fa66c67.png)



# Sourcetree では利用しないコマンド
### git status //ステータスの表示 にあたる画面
![スクリーンショット_2020-09-11_11_13_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/b1824750-ebb2-3ee7-4a0a-5aadfee126e9.png)

commit していないファイルの一覧を確認することができる。

### git log // ログの表示　にあたる画面
いつだれが更新したかを確認することができる。

![スクリーンショット_2020-09-11_11_13_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/6c2f6eb2-50ac-a103-c0ec-b625038565a8.png)


# 参考

[サル先生のGit入門](https://backlog.com/ja/git-tutorial/?fbclid=IwAR1PMC9cDTV-OrbzKUAB7I2cQOmM7_dalEsEDBHKoppoQR_8WyGLhJex_8M)
[マンガでわかるGit](https://next.rikunabi.com/journal/tag/webdesign-manga/?fbclid=IwAR1PMC9cDTV-OrbzKUAB7I2cQOmM7_dalEsEDBHKoppoQR_8WyGLhJex_8M)