Visual Studio 2015とGithubでGitflow（No.1）

# はじめに
本稿はリポジトリにGithubを、クライアントツールとしてVisual Studio 2015を、構成管理ワークフローにGitflowを利用する場合の、主にVisual Studioの利用方法を記載した記事になります。
GitのプラグインとしてのGitflowには一切触れる予定はありませんのでご注意ください。

ことの発端は、Qiitaで公開している画像処理系のTipsのコードサンプルをちゃんと公開しようと考えたことがひとつ。
もうひとつは、職場の構成管理環境の一部に、いまだにVSSなんていう旧石器時代の遺物が利用されているので、今年こそは移行してやろうと目論んでいたことから、一度手順をきちんとまとめないと、と考えていたためです。
VSS以外にはCVS・Subversionなんかも利用してはいますが、基本的に集中型の構成管理システムを利用してきたので、分散型の構成管理はあまり経験がありません。
なので色々間違っているかもしれませんので、何かあれば絶賛突っ込みください。

もっともこれから公開しようとしているコードは、絶賛ボッチで開発することになるんで、Gitflowなんて不要なんですけど！(｡Ａ ｡　)
そ、そこはノウハウを仕事に転用をですね。。。

なお、本稿ではGitflowのすべてのワークフローについて書ききれませんでした。
本稿では以下を記載しています。

1. 　Githubへリポジトリの作成
2. 　ローカルへクローンの作成
3. 　developブランチの作成
4. 　フィーチャーブランチの作成
5. 　フィーチャーブランチへリソースの作成とローカルリポジトリへのコミット
6. 　ローカルリポジトリのコミットのリモートへのプッシュ

> 2016.01.24 追記
> 第二回はこちら
> [Visual Studio 2015とGithubでGitflow（No.2）](http://qiita.com/Nuits/items/0db34b30ca2b2db00993)

# 前提条件

* GitクライアントツールとしてVisual Studio 2015 Communityエディションを利用します
* 事前にVisual Studio 2015 Communityエディションがインストールされているものとします
* リポジトリとして、Githubを利用します
* 事前にGithubのユーザ登録が完了していることを前提とします
* Gitflowのワークフローに対する知識を一定以上所持している方が読む前提として記述しています
* Gitflowのワークフローに関しては、以下のサイトを参考にさせていただきました！
[Atlassian社さん Gitチュートリアル Gitワークフロー](https://www.atlassian.com/ja/git/workflows#!workflow-gitflow)

# Githubにリポジトリを作成する
Githubに新しいリポジトリを作成するところから始めます。
まずはGithubにログインし、「New repository」ボタンを押下します。

![No-0000.png](https://qiita-image-store.s3.amazonaws.com/0/99262/f20a41b4-4f41-5489-b13a-4e8e9af73ce3.png)


その後、必要事項を入力して「Create repository」ボタンを押下します。

![No-0031.png](https://qiita-image-store.s3.amazonaws.com/0/99262/78baf4d4-87c2-845b-a1f8-a432ba86b1f5.png)

上の画像では、ライセンスにMIT Licenseを選択していますが、そこは各自のポリシーに合わせて選んでください。
gitignoreは、今回はVisual Studioから設定する想定なのでNoneでOKです。

「Create repository」を押下してリポジトリを作成したら、以下の画面の赤枠でくくった場所のボタンを押下して、リポジトリのパスをコピっておきます。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/d8a0b5d6-4adf-338d-859a-957032b93e73.png)

Github上での操作は、ひとまず以上です。

# リポジトリをローカルにクローンする
Githubに作成したリポジトリを、ローカルにクローンします。
まずはVisual Studioを起動し、チームエクスプローラータブを開きます。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/6a8d4469-c5e1-353e-e456-ee592af9467b.png)

チームエクスプローラータブを開いたのち、「ローカルGitリポジトリ」の「複製」を押下します。
すると以下のように画面が表示されます。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/223cf6ad-be6c-e788-ce91-da0558fa6be2.png)

「複製するGitリポジトリ～」と表示されているテキストボックスに、先ほどGithub上でコピーしたリポジトリのパスを貼り付けます。

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/99262/e796af6b-4e54-8292-7613-7eb895973999.png)

貼り付けた下のテキストボックスが、ローカルにクローンされるリポジトリのパスになるので、適宜必要に応じて修正してください。
その後、「複製」ボタンを押下し以下の画面が表示されれば、クローンは正常に完了です。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/8ba2dc34-cb74-527a-693b-6695167d4a1c.png)

# Visual Studio上のGitのグローバル設定
これ以降の、ブランチを作成したり、コードをコミットするためには、Visual Studio上で、Gitのグローバル設定を行う必要があります。
まずは下図の赤枠のホームアイコンを押下してください。
この後、ホームボタンはよく出てくるので覚えておいてくださいね！

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/837a040a-e0df-b072-1605-cf24b9f960a9.png)

その後、「設定」ボタンを押下します。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/dbf40f81-27f2-07bd-a85b-0f00e6b7a769.png)

下図の画面が表示されるので、ユーザ名とメールアドレスに適切な値を設定後、「更新」ボタンを押下しましょう。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/d1a55706-8708-4bea-9ae0-9eb451491452.png)

# developブランチの作成
続いて開発の中軸となる、developブランチを作成します。
手順的には、まずローカルリポジトリにブランチを作成したのちに、リモートにプッシュします。

まずはホームアイコンを押下してから、下図の「ブランチ」ボタンを押下してください。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/fc1132a4-b2f9-520c-9b7f-ec97bdc26fd4.png)

ちなみに、上に表示されているサードパーティ製うんぬんは、Visual Studioから実行できないGitのコマンドがあるため、インストールしたほうが良いんでしょうけど、今回はあくまでVisual Studioからの操作がテーマなため、インストールしません。
けど、「今後表示しない」にして、後で泣くといやなチキンな私は、断固そのまま放置します！(｡Ａ ｡　)

さて、ブランチメニューが表示されたら、下図の通りブランチを作成するローカルリポジトリを右クリックし「新しいローカルブランチ...」を押下してください。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/1baa2496-9d1a-d4ab-23d0-3e3c4abca0ad.png)

以下の画面が表示されるので、「ブランチ名を入力してください＜必須＞」テキストボックスに「develop」と入力し、「ブランチの選択」プルダウンから「master」を選択して「ブランチの作成」ボタンを押下してください。
これで「master」ブランチの最新の状態をベースとしたブランチが作成されます。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/95ce52db-31be-698b-8c64-e6490947871c.png)

以下の図のように、ローカルにdevelopブランチが作成されたはずです。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/bdd1858b-4952-ab27-2465-d9033521d1dd.png)

このままでは、ローカルリポジトリに作成されただけで、リモート側にはまだ反映されていませんので、次はリモートへ作成したブランチをプッシュします。
ホームボタンを押下して、以下の画面から「同期」ボタンを押下してください。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/d3400f1b-4cb5-dd1a-fd1a-8003b543b77c.png)

その後、同期画面内の「出力方向のコミット」→「公開」ボタンを押下します。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/210b516d-27b0-c26b-3f74-39493a83442e.png)

すると、以下のような認証画面が表示されます。
ここで、Githubの認証情報を入力しましょう。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/dc9182e6-f8f8-5771-5d61-18075fb4c9a7.png)

次のように表示されれば、リモート（Github）上にブランチがプッシュされているはずです。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/f41fed61-defc-47ee-40b6-b22efcad68a0.png)

Github上で確認すると、以下のようにdevelopブランチが正常に作成されていることが見て取れます。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/fe1d1ad3-9c43-4ead-a7cf-20d55c238d3e.png)

Visual Studio上で確認するには、「ホーム」→「ブランチ」から確認すると、以下のようにリモートにもdevelopブランチが作成されていることが確認できます。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/394957de-44d1-115b-7796-09d28a4bb57e.png)

# フィーチャーブランチの作成
ここまでで、やっと実装を開始できるだけの準備が整いました。
ということで、機能の作りこみをするためのフィーチャーブランチを作成します。
といっても、本稿ではVisual Studioのソリューションを作るだけですけどね！

と言うわけで、developブランチを作成した時と同様に、ブランチを作ります。
ブランチの名前はひとまずdevelop-create-new-solutionとでもしておきます。

1. リポジトリを右クリックして、「新しいローカルブランチ...」を選択
2. ブランチ名に「develop-create-new-solution」、ブランチの選択に「develop」を選択し、ブランチを作成
3. 「ホーム」→「同期」画面の、「出力方向のコミット」→「公開」から、リモートリポジトリへ、前述のブランチをプッシュする

という手順でブランチを新たに作成します。

ここで気をつけて？いただきたい事として、この時点で新たに作成したブランチを「チェックアウト」（選択？）された状態になっているということです。
改めてチェックアウトしなおす必要はありません。
なお、現在選択されているブランチは、Visual Studioの右下をみるとわかります。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/eeca6400-ce75-7565-6e63-fb3d97c2c795.png)

またチェックアウトするためには、ブランチを右クリックしたコンテキストメニューから実行できます。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/60eadec4-0331-c90f-3c5d-24e7e4cbabce.png)

# リソースの作成～ローカルリポジトリのコミット

さて、それではVisual Studioのソリューションを作成し、ローカルのリポジトリへコミットします。
なおVisual Studioでは基本的にステージングは行わず、直接ローカルリポジトリへコミットされます。（というか、同時に行われると言ったほうがよいのかも？）

ソリューションは、リポジトリの直下には作らず、Srcディレクトリを作成し、その下にソリューションディレクトリを作成します。
ソース以外のリソースも合わせて構成管理したいので、ディレクトリを分けます。
（ボッチプロジェクトには不要でしょうけど。。。）

下のような感じでソリューション（プロジェクト）を作成します。

![No-0038.png](https://qiita-image-store.s3.amazonaws.com/0/99262/a3b0f90d-657a-2754-dc98-39604cff11e0.png)

「場所」を見ていただくとわかると思いますが、作成先はリポジトリをクローンしたローカルのパスの下に作成します。（これが良いのかイマイチ良くわからないんですけど。。。まぁ意図したことは一応できます。）

ここで、エクスプローラでローカルリポジトリを開いてみてください。
以下のように、.gitignoreファイル等がVisual Studioによって自動的に作成されているのが見て取れます。

![No-0042.png](https://qiita-image-store.s3.amazonaws.com/0/99262/8cffaa6b-740d-9dd8-2849-28794ab5d752.png)

ソリューションをローカルリポジトリにコミットするだけなら、Visual Studioのソリューションエクスプローラからソリューションを右クリックし「コミット」すれば良いのですが、今回は.gitignoreファイル等もコミットしたいので、チームエクスプローラから「ホーム」→「変更」を開きます。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/4179b48c-e900-4dc4-a7b8-31a1bb01d7d6.png)

ここでコミットメッセージを入力し、「コミット」ボタンを押下することで、ローカルリポジトリへコミットされます。
なお、ステージングとコミットを同時に実行するだけではなく、プッシュまで同時に行うこともできます。

下の図のように、「コミット」ボタンの右をクリックして切り替えることができますが、ここでは単純にコミットのみを実施します。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/1bfa8880-ae65-9239-cbb3-90b3488e621f.png)

次のように表示されれば、ローカルへのコミットは完了です。
![image](https://qiita-image-store.s3.amazonaws.com/0/99262/fe0fb84f-8569-27f1-c168-a7165cc6573b.png)

この時点では、リモートへはまだプッシュされていません。

# リモートリポジトリへのプッシュ

それでは、ローカルリポジトリへのコミットをリモートリポジトリへプッシュします。

チームエクスプローラの「ホーム」→「同期」を押してください。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/f82b8be1-f7d1-d69e-2320-595863fd9698.png)

ここで、「出力方向のコミット」→「プッシュ」を押下します。
次のように表示されればプッシュは成功です。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/f07063a8-4b64-38eb-5644-bbf10e4246bd.png)

Githubのページから参照してみましょう。

![image](https://qiita-image-store.s3.amazonaws.com/0/99262/86a7f9aa-a9e4-a073-543d-37cc7dd8417f.png)

確かに、リモートリポジトリまでプッシュされていることが確認できましたね！

ということで、今回はここまで。
次回はフィーチャーブランチからdevelopブランチへのプルリクエスト以降を書きたいと思います。

思ったよりなげぇな。。。