LoginSignup
13
22

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-03-15

はじめに...

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

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

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

環境はMacのパソコンで行います。
Windowsの方はSSH鍵の扱いが変わってきますので注意してください。


やること

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

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

Screen Shot 2018-03-15 at 23.09.33.png

1. gitのインストール

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

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

2. Bitbucketの登録

BitBucketとは...

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

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

Atlassianさんはこちらから。

gitでできると嬉しいこと

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

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

Bitbucket   The Git solution for professional teams.png

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

Welcome to Bitbucket.png

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

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

Overview — Bitbucket.png

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

3. SSH鍵の取得

注意!
デスクトップアプリを使用する場合はこの章を飛ばしてください。

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

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

公開鍵についてはこちらが分かりやすくなっています。
妻に公開鍵暗号を教えてみた - 西尾泰和のはてなダイアリー

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

Screen Shot 2018-03-14 at 12.39.29.png

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

Screen Shot 2018-03-14 at 12.42.35.png

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

Screen Shot 2018-03-14 at 12.46.32.png

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

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

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

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

Screen Shot 2018-03-14 at 13.01.06.png
b-d4ddf396170f.png">

Screen Shot 2018-03-14 at 13.02.39.png

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

Screen Shot 2018-03-14 at 13.06.59.png

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

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

Screen Shot 2018-03-14 at 13.20.09.png

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

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

Screen Shot 2018-03-14 at 13.27.49.png

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

Overview — Bitbucket (1).png

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

nago3   ssh keys — Bitbucket (2).png

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

nago3   ssh keys — Bitbucket (1).png

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

nago3   ssh keys — Bitbucket (3).png

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

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

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

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

注意!
デスクトップアプリを使用する場合は、3章の鍵作成は必要ありません。

Overview — Bitbucket (2).png

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

Create a repository — Bitbucket.png

nago3   test — Bitbucket.png

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

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

Sourcetreeというリンクを開きましょう。

Sourcetree   Free Git GUI for Mac and Windows.png

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

Screen Shot 2018-03-14 at 17.41.23.png

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

Screen Shot 2018 03 14 at 17 42 13 png  2880×1800 .png

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

Screen Shot 2018 03 14 at 17 44 35 png  2880×1800 .png

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

Screen Shot 2018 03 14 at 17 47 20 png  2880×1800 .png

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

Screen Shot 2018 03 14 at 17 53 44 png  2880×1800 .png

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

Screen Shot 2018 03 14 at 17 55 57 png  2880×1800 .png

Screen Shot 2018 03 14 at 17 57 12 png  2880×1800 .png

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

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

Screen Shot 2018 03 14 at 19 31 55 png  2880×1800 .png

Screen Shot 2018 03 14 at 19 33 10 png  2880×1800 .png

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

Screen Shot 2018 03 14 at 19 35 37 png  2880×1800 .png

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

Screen Shot 2018-03-15 at 10.43.19.png

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

5. Gitを試してみる

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

Screen Shot 2018-03-15 at 10.22.48.png

最初の画面です。

nago3   test — Bitbucket.png

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

Screen Shot 2018-03-15 at 10.37.50.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

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

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

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

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

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

Screen Shot 2018-03-15 at 23.53.21.png

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

Screen Shot 2018 03 16 at 0 07 21 png  2880×1800 .png

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

Screen Shot 2018 03 15 at 23 15 22 png  2880×1800 .png

Screen Shot 2018 03 16 at 1 01 11 png  2880×1800 .png

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

nago3   test   Branches — Bitbucket.png

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

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

プルリクエストについてはこちらを参考にしてください。
自分がやった作業、したい作業は何かを申請するものだと思ってください。

nago3   test   Pull requests — Bitbucket.png

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

nago3   test   Create pull request — Bitbucket (1).png

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

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

参考:
新卒がプルリクで100コメント貰って学んだこと
gitとプルリクエストに関して思うことまとめ

nago3   test   Pull requests — Bitbucket (1).png

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

nago3   test   Pull request  1  Create index html — Bitbucket.png

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

nago3   test   Pull request  1  Create index html — Bitbucket (1).png

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

nago3   test   Pull request  1  Create index html — Bitbucket (2).png

はい、ということでマージ完了です。

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

nago3   test — Bitbucket (2).png

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

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

Screen Shot 2018 03 16 at 1 44 59 png  2880×1800 .png

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

Screen Shot 2018 03 16 at 1 48 23 png  2880×1800  (1).png

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

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

Screen Shot 2018 03 16 at 1 50 47 png  2880×1800  (1).png

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

Screen Shot 2018 03 16 at 2 00 03 png  2880×1800 .png

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

Screen Shot 2018 03 16 at 2 02 09 png  2880×1800 .png

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

最後に...

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

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

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

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

13
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
22