SourcetreeでGitFlowとして初期化して、PullRequestを出すまでの手順

# はじめに
現在弊社では複数のインターン生がいます。
ほぼすべての案件でGitで開発を行っているため、インターン生にもGitを覚えてもらう必要があります。
社内向けのGitとGitを使った開発ワークフローの手順書として記述しました。
他の新人エンジニアの助けにもなれば幸いです。

# Git

現在は言語やフレームワーク、領域に限らずGitの導入が進んでいて、どの分野についてもGitを使えるようになっておくことは重要です。
新人エンジニアにとってはまだまだ長いエンジニアライフが待っていて、早いうちにGitを使えるようなることはとても有意義です。

コマンドラインで使うGitとGUIツールがあるのですが、まずはGUIツールでのGit利用をおすすめしています。
その理由としてはGUIの方が圧倒的に理解が早いからです。特にGitの仕組みに慣れていない序盤はGUIツールを使うことで理解が早まります。
GUIツールとコマンドラインは併用が可能ですので、理解が進んでからコマンドラインも覚えていくとよいでしょう。


ここで利用するGUIツールはSourcetree[^0]です。

[^0]: tは小文字らしいです。

# Sourcetreeのインストール

[Sourcetree公式サイト](https://www.sourcetreeapp.com/)からSourcetreeをダウンロード、インストールします。

<img width="1213" alt="Screen Shot 2019-03-08 at 15.18.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/08dac9ae-f040-9d46-bf1f-7687ae8aabeb.png">

[🍺HomeBrew](https://brew.sh/)を使っているひとは`brew cask`でのインストールもオススメです。

```bash
$  brew install cask sourcetree
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47327/d28b5431-34a0-019b-1308-1bc58e563643.png)


# Sourcetreeの設定
Gitのリポジトリを手元にクローンします。

[スポットライト検索](https://support.apple.com/ja-jp/HT204014)などでインストールしたSourcetreeを開きます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47327/98a372f6-3c7e-5470-efc6-514a983dd473.png)

上部メニューから`設定(Preferences)`[^1]を開きます。

<img width="485" alt="Screen Shot 2019-03-08 at 15.04.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/fe25cca8-2155-a3cb-f0fa-bf63834d87b1.png">

**デフォルトユーザー情報** の **名前** と **メールアドレス**を入力します。
**プロジェクトフォルダを** `/Users/yousan/git` のようにホームディレクトリ直下に`git`ディレクトリを作成して指定します。[^2][^3]

<img width="675" alt="Screen Shot 2019-03-08 at 15.05.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/37bdfafa-338c-75e4-8ecc-00bd37947d69.png">

[^1]: コマンドキーとカンマ(⌘,)で開くのがオススメです。
[^2]: `~/git`に限らず何でもよいですが、デフォルトだとホームディレクトリが汚れるので注意が必要です。
[^3]: GitHub用のリポジトリ管理ツール、[GHQ](https://qiita.com/strsk/items/9151cef7e68f0746820d)もオススメです

# リポジトリのクローン

リポジトリをクローンします。
まずGitリポジトリのURIを調べます。
GitHubの右側の「Clone or Download」からURIをコピーします。

<img width="1050" alt="Screen Shot 2019-03-08 at 15.04.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/b65c556f-adae-9332-1a29-910d80cdbbe0.png">

Sourcetreeの画面にて、「新規 > URLからクローン」を選択します。

<img width="504" alt="Screen Shot 2019-03-08 at 15.04.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/bdefbded-fbdf-af0d-1536-3f08687a6b72.png">

先ほどのURIを入力し、「クローン」します。

<img width="563" alt="Screen Shot 2019-03-08 at 15.06.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/be8ae151-df33-7b10-125d-b042692394d9.png">

クローンが完了しました！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47327/c9f481d6-fc7c-f386-ead1-fac571baf937.png)

# コーディング作業
実際にコーディングを行う際のワークフローについての説明です。

# Git flowでのコミット
Git flowでコミットを行ってみます。

上部のメニューから「リポジトリ > Git flow/Hg flow > リポジトリの初期化」を選択します。

<img width="627" alt="Screen Shot 2019-03-08 at 15.06.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/f1f6a87d-9ba9-15fb-6555-5442b43ce2a3.png">

そのままOKします。[^11]

<img width="529" alt="Screen Shot 2019-03-08 at 15.06.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/3c5feb71-06a0-3d1a-e0c4-f664ca0936a1.png">

下記のような状態になります。

<img width="688" alt="Screen Shot 2019-03-08 at 15.06.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/77b83315-5b4d-ee2c-6d62-856b81fd7e40.png">

実際の開発ではコードを修正してコミットします。
コミットは`develop`ブランチではなく、自分のブランチに対して行います。
開発用のブランチを作成します。
「リポジトリ > Git flow/Hg flow > 次のアクション」を選択します。
「新規フィーチャーを開始」を選択します。

<img width="266" alt="Screen Shot 2019-03-08 at 15.07.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/8c2eebfd-cdf4-de15-dbd2-e71d09123082.png">

「フィーチャー名」にブランチ名を入力します。入力ルールは `年月`/`ユーザ名`/`機能名` を入力します。例えば2019年3月であれば年月は`201903`となります。
ユーザ名にはGitHubのユーザ名を入力します。[^12]
`機能名`にはこれから実装する機能の簡単な説明を入力します。

`2019年3月`に`yousan`が作成する、`index.jsのデフォルトパラメタの修正`ブランチは
`201903/yousan/fix-index-default-prams`となります。

ここでは`feature`というキーワードは入力しません。Sourcetreeが自動的に補完します。

<img width="502" alt="Screen Shot 2019-03-08 at 15.07.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/307bdbdd-81e6-5bcd-211c-8c4af7a7cb30.png">

Sourcetreeのサイドバーにブランチが作成されています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47327/7ea21743-3f74-f03a-bc74-264f85db051a.png)


[^11]: バージョニングのルールにもよりますが、リリースを行う人はバージョンタグプリフィクスに`v`を入れてください。
[^12]: [GitHubのユーザ名とSlackのユーザ名をそろえておくと便利です](https://qiita.com/yousan/items/ab2b190f2dec034277e0#display-name-%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%AB)

# コミットとプッシュ

ソースコードを実際に修正したらコミットを行います。
Sourcetree上部の「コミット」アイコンをクリックします。
コミットするファイルを選択し、下段にコミットメッセージを入力します。
「コミットを直ちにプッシュする」はチェックを入れておきます。

<img width="1319" alt="Screen Shot 2019-03-08 at 15.13.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/c8570c58-e524-3539-90a2-55eda7a5a844.png">

右下の「コミット」からコミットとプッシュが完了します。（Option + Enterでも可能です）

# プルリクエストの作成

[新人エンジニアに覚えてもらいたいPullRequestの書き方 - Qiita](https://qiita.com/yousan/items/2bb395ba490a27e55d36 "新人エンジニアに覚えてもらいたいPullRequestの書き方 - Qiita")

作業が一通り完了したらプルリクエストを作成します。
左サイドバーのブランチリストから、作業が完了したブランチを右クリックします。
最下部にある「プルリクエストの作成」をクリックします。

<img width="780" alt="Screen Shot 2019-03-08 at 15.13.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/be2496c4-d252-e9cb-47cc-b9d71d62b075.png">

GitHubの画面が開いたらプルリクエストの各種項目を入力します。

<img width="1129" alt="Screen Shot 2019-03-08 at 15.15.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/75d6f4f5-9a95-6161-781a-f79c87033939.png">

まずブランチを確認します。左側に`develop`、右側に自分の作成したブランチを選択します。[^21]
PRにタイトルを付けます。タイトルは簡潔に完結していて、わかりやすく**日本語で**記述します。[^22]
右サイドバーの`Assignee`を自分にしておきます。

本文にはブランチで行ったことを完結に記述します。
[マークダウン](https://qiita.com/higuma/items/3344387e0f2cce7f2cfe#github-flavored-markdown)が使えるので、[リスト](https://qiita.com/higuma/items/3344387e0f2cce7f2cfe#lists)や[ヘッダー](https://qiita.com/higuma/items/3344387e0f2cce7f2cfe#headers)を活用するのがおすすめです。

画像を入れたり確認できるURLも入れるとすごくよいです。

Issueに対しての修正（機能拡張、バグフィックス）だった場合、`Fixes #123`とIssue番号を記述してください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/47327/fc582208-01c0-b97a-80ba-2e58e94b6553.png)

ここまでできたらプルリクエストを作成します。

上記の例はこちらにあります。
https://github.com/yousan/ex_micro/pull/2

# プルリクエストが完了したら

プルリクエストの作成が完了したらSlackで報告してください。

お疲れ様でした！


[^21]: これを意外に間違えることがあるので注意が必要です。
[^22]: 英語でも構わないですが、一目でわかるようにしておくことが重要です。

https://github.com/yousan/ex_micro/issues/1