[SourceTree]初めてのgit -登録からマージまで-

**はじめに...**

初めてgitに触る人は、そもそも「Gitってなに？」を解消できないまま、体感で覚えていくと思います。
今回は画像で流れを追っていきながら、どこで何をしているのかをちょっとでも理解できる助けになればいいと思っています。

今回はBitbucketを使います。
GitHubの方は先逹の記事を参考にしてください。

1~3章はBitbucketの登録です。
4~5章はデスクトップアプリの使い方になります。

環境はMacのパソコンで行います。
<font color="red">Windowsの方はSSH鍵の扱いが変わってきますので注意してください。</font>
____________

## **やること**

1. gitのインストール
2. Bitbucketの登録
3. SSH鍵の取得

-----------

4. sourcetreeの起動、連携(デスクトップでも操作したい場合)  
5. Gitを試してみる

<img width="644" alt="Screen Shot 2018-03-15 at 23.09.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/161922/4ffa54de-e147-8363-a16d-1bf801945aaa.png">

## 1. gitのインストール

以前の記事に載っていますので、こちらを参考にしてください。
https://qiita.com/nago3/items/cf72eb6a4c2028831b68

できる人はもちろんコマンドラインから入れてくださって構いません。


## 2. Bitbucketの登録

[BitBucket](https://bitbucket.org/product)とは...

Atlassian のサービスの一つで、開発するサービスのバージョン管理ができます。
また、会社の社外秘のコードなどをプライベートに管理することもできます。

GitHubと違うのは、5名までの小規模なら<font color="red">無料でプライベート環境が使えます。</font>
GitHubは有料です。
後は好みの問題だと思っています。

[Atlassian](https://www.atlassian.com/?_ga=2.195340520.532521367.1520993573-1025129494.1518487970)さんはこちらから。

**gitでできると嬉しいこと**

* 作ったものが誰がどのように変更したかわかる
* もしエラーが発生してしまっても、前の状態に戻せる
* 作業内容ごとに作業することができる

とりあえず3つあげてみましたが、他にもいろいろメリットがあります。
最初あまりgitがわからないうちは、<font color="blue">手間がかかる分だけ素敵なツール</font>だと思ってください。

![Bitbucket   The Git solution for professional teams.png](https://qiita-image-store.s3.amazonaws.com/0/161922/4cb2ba7a-a2bb-518e-7137-9c2d89df3eea.png)

まずは公式ページから会員登録して、ログインしましょう。

![Welcome to Bitbucket.png](https://qiita-image-store.s3.amazonaws.com/0/161922/6aa1cea4-e52d-8bc9-d5ef-740e25269a58.png)

このような感じにレポジトリの作成にチームで行うか、一人で使うかの選択肢が出てきます。
チュートリアルなので、とりあえずやってみて慣れてみるといいと思います。

いらないと思ったら'Check out our tutorials'から抜けてください。

![Overview — Bitbucket.png](https://qiita-image-store.s3.amazonaws.com/0/161922/8eb1b57c-7172-33e7-b48b-d124eebae1c9.png)

おめでとうございます、これでログインできました。
次のステップに進みましょう。

## 3. SSH鍵の取得

**注意!**
<font color="red">デスクトップアプリを使用する場合はこの章を飛ばしてください。</font>

次に自分のパソコンと、Bitbucketをブラウザを使わないで接続できるようにしましょう。
SSHはセキュリティの一種だと思っていただければ最初はいいと思います。

鍵は自分のパソコンで作成します。鍵は秘密鍵、公開鍵の2種類が作られ、公開鍵の方をBitbucketに登録します。
Bitbucketにある公開鍵と対応する秘密鍵で確認の取れている相手だと認識をする仕組みです。

公開鍵についてはこちらが分かりやすくなっています。
[妻に公開鍵暗号を教えてみた - 西尾泰和のはてなダイアリー](http://d.hatena.ne.jp/nishiohirokazu/20140809/1407556873)

SSHは調べると面白いので、よかったらいろいろ調べてみてはどうでしょうか？

<img width="225" alt="Screen Shot 2018-03-14 at 12.39.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/161922/63922255-4054-4986-a6a4-82245c8f6244.png">

まずはコンソール画面から.sshディレクトリに移動します。

<img width="292" alt="Screen Shot 2018-03-14 at 12.42.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/161922/ddb71352-f3a0-3170-4c9a-6cae23991a1a.png">

次にBitBucketの鍵ファイルを置くディレクトリを作成し、その中に移動します。

![Screen Shot 2018-03-14 at 12.46.32.png](https://qiita-image-store.s3.amazonaws.com/0/161922/44893842-cb1f-5ffc-c587-aff2db66e03f.png)

鍵の作成です。順を追って説明します。

まず、ssh-keygenというコマンドを使って鍵の作成を行います。
この時、-C から先は登録したメールアドレスを記述してください。

まず鍵の配置先を聞かれるので、先ほど作成した[bitbucket]ディレクトリを設定しましょう。
次にパスフレーズの作成です。Enterを2回押すことでパスできます。

そうしますと、鍵が無事作成されているはずです。

<img width="456" alt="Screen Shot 2018-03-14 at 13.01.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/161922/9b18443c-b3bf-08f4-a45<img width="463" alt="Screen Shot 2018-03-14 at 13.14.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/161922/9a2bf38c-23fa-4a0b-187d-4381168077d9.png">
b-d4ddf396170f.png">

<img width="362" alt="Screen Shot 2018-03-14 at 13.02.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/161922/442132ee-0841-4c9a-ea24-03f4a01ee505.png">

そのまま作成した秘密鍵のパーミッションを変更します。
この作業は、このファイルにアクセスしたり、編集したりできる人を決めています。

<img width="266" alt="Screen Shot 2018-03-14 at 13.06.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/161922/9e600ca1-c453-5d41-713b-438de0dac9ef.png">

次にBitbucketにアクセスするための設定を行います。
.sshディレクトリに戻ってconfigファイルを作ります。

作業は'vim'で行っていますが、vimが難しい場合は普段使っているエディタをご利用ください。

<img width="503" alt="Screen Shot 2018-03-14 at 13.20.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/161922/03a3957a-3a7a-d343-4d51-00ab804b3910.png">

このような内容になって入ればいいです。
重要なのは、Port, HostName, IdentityFileです。

```
Portは22です。
HostNameは相手先の記述です。今回はBitbucketなので、このように記述します。
IdentityFileは秘密鍵の指定をしています。
```

<img width="410" alt="Screen Shot 2018-03-14 at 13.27.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/161922/992022d1-11e2-64bb-ebd8-92aaf1d2cf47.png">

最後にBitbucketに記述する公開鍵の中身をコピーしましょう。

![Overview — Bitbucket (1).png](https://qiita-image-store.s3.amazonaws.com/0/161922/c54350e4-8886-dbba-5b37-292831ff2817.png)

Bitbucketのコンソール画面に戻ります。
画面下部の人のマークから[Bitbucket settings]を選択します。

![nago3   ssh keys — Bitbucket (2).png](https://qiita-image-store.s3.amazonaws.com/0/161922/b1c079fd-6273-2ffe-a803-00bb6ce7df6e.png)

[SSH keys]から[Add key]をクリックします。

![nago3   ssh keys — Bitbucket (1).png](https://qiita-image-store.s3.amazonaws.com/0/161922/7e450348-0d3f-3106-18dc-4f557a83320d.png)

先ほどのコマンドでコピーしてある公開鍵の内容を[Key]にペーストします。
Labelはこの鍵について分かりやすい内容にしましょう。指定はありません。

![nago3   ssh keys — Bitbucket (3).png](https://qiita-image-store.s3.amazonaws.com/0/161922/0e1d9358-8f0a-fd0f-3cc7-129e27ee1ea8.png)

このように追加されて入れば完了です。

このままGitコマンドを使って[origin/master]に接続して見てください。
これでコマンドラインでBitbucketを使う準備が整いました。

これ以降はデスクトップアプリでBitbucketを操作したい方向けです。



## 4. デスクトップアプリの起動、連携

**注意!**
<font color="red">デスクトップアプリを使用する場合は、3章の鍵作成は必要ありません。</font>

![Overview — Bitbucket (2).png](https://qiita-image-store.s3.amazonaws.com/0/161922/e09b1def-d941-2445-75c5-f390a95b22fb.png)

では、初期画面からお試し用のレポジトリを作ってみます。

![Create a repository — Bitbucket.png](https://qiita-image-store.s3.amazonaws.com/0/161922/5e8901ea-0501-1758-60c7-a3be42e5612c.png)

![nago3   test — Bitbucket.png](https://qiita-image-store.s3.amazonaws.com/0/161922/46292c8e-2555-c139-6625-ac058b4a16d4.png)

というとで、あっという間に作業する元が出来上がりました。
ここにある'git clone ~'のコマンドを使えばもう自分のパソコンで作業を始められます。

しかし、今回は分かりやすく画面を見ながら作業できるようにしましょう。

[Sourcetree](https://www.sourcetreeapp.com/)というリンクを開きましょう。

![Sourcetree   Free Git GUI for Mac and Windows.png](https://qiita-image-store.s3.amazonaws.com/0/161922/d48ea6a4-adbc-e0e7-5ef3-e9210df607f5.png)

こちらからダウンロードできます。

<img width="1440" alt="Screen Shot 2018-03-14 at 17.41.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/161922/f6dea8e7-44d0-4fad-110a-bf0a147b554e.png">

ダウンロードしたアプリを開くと、このようになっています。

![Screen Shot 2018 03 14 at 17 42 13 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/63a5e7bf-063c-dbe0-05c0-48c6d884ed91.png)

[remote]から[connect...]を選択しましょう。

![Screen Shot 2018 03 14 at 17 44 35 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/32687b30-0efa-ea81-e7ab-4b1d3540698c.png)

オンラインのbitbucketとパソコンのBitbucketを接続するのに[Connect Account]をクリックします。

![Screen Shot 2018 03 14 at 17 47 20 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/a901e584-11ee-c85f-d310-4ce24b42e7ce.png)

先ほど作成したアカウントにログインします。

![Screen Shot 2018 03 14 at 17 53 44 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/b4c51fb2-232c-f0f1-c957-edabb544563e.png)

接続することの認証を求められるので、許可します。

![Screen Shot 2018 03 14 at 17 55 57 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/1fb130ae-510d-1e5e-6cc0-94f645e6db15.png)

![Screen Shot 2018 03 14 at 17 57 12 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/f89e4ff9-5d73-e828-5c7a-05361ca81397.png)

これで先ほど作ったリポジトリと自分のパソコンを同期できました。

最後にSSHキーを作成します。

![Screen Shot 2018 03 14 at 19 31 55 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/ca8226e5-a7b9-6bfc-51f2-1970d2db5c28.png)

![Screen Shot 2018 03 14 at 19 33 10 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/51857d9b-9fbf-a3eb-0493-cce854c7460e.png)

こちらは空欄でも大丈夫です。

![Screen Shot 2018 03 14 at 19 35 37 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/902be362-a855-ca4f-b1b4-c61bcf3bddab.png)

最後に確認をしたら保存します。

![Screen Shot 2018-03-15 at 10.43.19.png](https://qiita-image-store.s3.amazonaws.com/0/161922/d54f894b-80c4-0db4-9d2d-be71c44a29e6.png)

これでリポジトリの中に入れます。
配置場所は[/User/<user-name>/Documents/Bitbucket/test]と、ドキュメント配下にBitbucketディレクトリを作って管理します。

## 5. Gitを試してみる

デスクトップから動かします。

<img width="1440" alt="Screen Shot 2018-03-15 at 10.22.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/161922/490d1adb-236d-7b21-75db-78bbd13004dd.png">

最初の画面です。

![nago3   test — Bitbucket.png](https://qiita-image-store.s3.amazonaws.com/0/161922/14146831-cb77-bec5-35e6-df9b0bcf0ff8.png)

Bitbucketのこの画面と関係を持っています。

<img width="308" alt="Screen Shot 2018-03-15 at 10.37.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/161922/28e24937-e7d3-91a3-92e6-1111a86861bb.png">

パソコン内では以下の場所がSouceTreeと関係があります。

では、Gitの流れを説明します。

> 1. ブランチを作る
> 2. ブランチに移動して作業をする
> 3. 完了した内容をプッシュする
> 4. プルリクエストを作る
> 5. プルリクエストの内容を反映させる
> 6. 作業し終えたブランチを削除する

Gitでは、完成したものが[Master]というブランチに保存されます(もちろん別のブランチに変えることもできます)。

作業するだけならば[master]で2, 3をすれば良いですが、作業を複数人で行う場合やエラーが発生した場合にmasterで作業しているとすぐにサービスに影響が出て大変なことになりますよね。

そのため、ブランチ(支流)を作って、影響が出ない環境で作業する必要があります。

![Screen Shot 2018 03 15 at 10 58 52 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/4e44abb4-989b-5503-5a74-021fee29e6a6.png)

では、ブランチを作ってみましょう。

ブランチに名前をつけ、[Checkout new branch]にチェックをつけてブランチを作ります。
名称は行う作業内容についてを記載すると良いです。
[Checkout]はブランチを移動することを意味します。

```
[master]ーーーーーーーーーー[master]
        \             　/    (<- マージ)
         -[test-branch]-    (<- ここで作業)
```

作業のイメージはこのようになります。

* [master]を元にした[test-branch]で作業を実施
* 完成した作業を[master]に反映させる

<img width="314" alt="Screen Shot 2018-03-15 at 23.53.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/161922/07b63a38-4bc6-8679-4d58-fc5bea86c502.png">

まずは作業を実施します。
今回は[Hello World!!]と表示する[index.html]を作成します。

![Screen Shot 2018 03 16 at 0 07 21 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/80b4307d-0fbe-5a0a-3c10-01f0c6374012.png)

[test-branch]上に[index.html]が作成されていることがわかります。
作業内容についての詳細コメントを記述し[Commit]します。

![Screen Shot 2018 03 15 at 23 15 22 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/bacb07f8-bf36-fae1-3333-81997aa2c437.png)


![Screen Shot 2018 03 16 at 1 01 11 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/fbf03970-bb9d-5f95-92c7-aa268e034a90.png)

ヘッダーの中の[Push]から[test-branch]にチェックが入っていることを確認して[OK]をクリックします。

![nago3   test   Branches — Bitbucket.png](https://qiita-image-store.s3.amazonaws.com/0/161922/34e0618f-0736-9c66-7e96-1144ead62d39.png)

Bitbucket上に[test-branch]が作成されていることがわかりますね。

では、プルリクエストを作成します。

プルリクエストについては[こちら](https://backlog.com/ja/git-tutorial/)を参考にしてください。
自分がやった作業、したい作業は何かを申請するものだと思ってください。

![nago3   test   Pull requests — Bitbucket.png](https://qiita-image-store.s3.amazonaws.com/0/161922/2867dc6c-0d82-fef7-07aa-801f7be29ca0.png)

サイドバー[Pull request]の項目から[Create pull request]をクリックします。

![nago3   test   Create pull request — Bitbucket (1).png](https://qiita-image-store.s3.amazonaws.com/0/161922/c5500a4a-a2b4-93b2-429f-46d0f8debe32.png)

作業していた[test-branch]から[master]ブランチに反映される設定になっていることを確認します。
作業内容を記述し[Pull request]を作成します。

この時、プルリクエストの内容をわかりやすく書くことがチームで作業するときに大事になってきます。

参考:
[新卒がプルリクで100コメント貰って学んだこと](https://qiita.com/hand12/items/89f62ad51a51f596d259)
[gitとプルリクエストに関して思うことまとめ](https://qiita.com/doilux/items/b5a9abd95ac91e848a5f)

![nago3   test   Pull requests — Bitbucket (1).png](https://qiita-image-store.s3.amazonaws.com/0/161922/c1552255-ba60-6d32-6a3f-77ab167303fc.png)

作成したプルリクエストが表示されました。
では、詳細を確認します。

![nago3   test   Pull request  1  Create index html — Bitbucket.png](https://qiita-image-store.s3.amazonaws.com/0/161922/5ddfa61d-3f6f-a692-cd9f-036759e378fb.png)

作業内容に間違いがないことを確認したら、いよいよマージです。
[Merge]をクリックしましょう。

![nago3   test   Pull request  1  Create index html — Bitbucket (1).png](https://qiita-image-store.s3.amazonaws.com/0/161922/2a881bea-7f8b-abf3-5abb-d2a872e580fe.png)

もう一度マージするブランチに間違いがないか確認し、[Close source branch]にチェックを入れてマージします。
[Close source branch]は、マージしたら作業していたブランチを削除するという内容です。
後で削除することもできますが、ここでは削除していきましょう。

![nago3   test   Pull request  1  Create index html — Bitbucket (2).png](https://qiita-image-store.s3.amazonaws.com/0/161922/c4d0f545-03a8-bdad-2ca2-ee7228528ec8.png)

はい、ということで<font color="red">マージ完了</font>です。

[MERGED]という表示が出ていますね。

![nago3   test — Bitbucket (2).png](https://qiita-image-store.s3.amazonaws.com/0/161922/fe15f4d1-d732-5d09-4336-ebe397bb7073.png)

[master]ブランチに[test-branch]で作成した[index.html]が反映されていますね。

おめでとうございます、これで[Git]で自分の作業を管理することができました。

![Screen Shot 2018 03 16 at 1 44 59 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/b50ccffa-a6ec-ba4e-d4dd-5fa273561899.png)

最後に自分のパソコン上の[SourceTree]の片付けをしましょう。

![Screen Shot 2018 03 16 at 1 48 23 png  2880×1800  (1).png](https://qiita-image-store.s3.amazonaws.com/0/161922/48e192c1-4207-0d46-880f-874e23452262.png)

オンライン上の[Bitbucket]には[test-branch]の作業を反映させましたが、
自分のパソコンではまだ反映されていないですね。

なのでローカルの自分のパソコンに[Bitbucket]の[master]ブランチを同期させます。
<font color="blue">最初のクローンと同じですね。</font>

![Screen Shot 2018 03 16 at 1 50 47 png  2880×1800  (1).png](https://qiita-image-store.s3.amazonaws.com/0/161922/9c75294d-4b1c-7430-424f-07037e5b2e5e.png)

ということで[SourceTree]上でも作業が反映されました。

![Screen Shot 2018 03 16 at 2 00 03 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/c4f7ba00-0443-5168-34d6-11caf830fa69.png)

最後にSourceTreeに残っている[test-branch]を消しましょう。
右クリックから[Delete test-branch]で消せます。

![Screen Shot 2018 03 16 at 2 02 09 png  2880×1800 .png](https://qiita-image-store.s3.amazonaws.com/0/161922/c9a43026-47d0-f681-6246-9c2373879d61.png)

ということで、作業完了です、お疲れ様でした。


##**最後に...**

今回は[gitによるバージョン管理]をやっていきました。

この作業は、人や会社によっても手順は変わってきます。
先にプルリクエストを出してから始める方が多いのではないですかね？

他にも[Git]はコマンドラインを使った方が遥かに早く作業ができます。
コンソール画面をいじるのは慣れるまで、というくらいで考えていた方がいいかもしれません。

バージョン管理は[GitHub]の方が有名なので、そちらについては沢山の資料があります。
ぜひそちらも試してみてはいかがでしょうか。