Git勉強中☆ローカルで作業ブランチを作成しリモートへPushするまでの手順

先日、867さんのブログに登場した、Git勉強中のうっかりチカちゃんです!Granfairs内ではチカッパの愛称で呼ばれています。

昨年末からGitの勉強を始めているのですが、 勉強開始直後、早速リモートのmasterブランチにローカルの作業ブランチをプッシュしてしまいました…。

このようなミスを犯してしまうのはGitの概念や仕組みをきちんと理解しきれていないことが理由です。 また、SourceTreeなどのGUIを使用すれば、自分がどのような操作をしようとしているか把握してなくても直感的に操作できてしまうためミスを犯しやすい…。

今回は、正しい手順を追って作業ブランチを作成し、リモートへプッシュするまでの工程をお伝えできればと思います。 私のようなGitお勉強中の方のお力になれば幸いです。

※環境はWindowsです。

リモート上のmasterブランチからローカル上の作業用ブランチを作成する

ローカルのmasterブランチから作業用ブランチを作成するまでの手順

(1)masterブランチとは作業の基となるブランチです。 リモートリポジトリからローカルへクローンすると、自動的にローカル上にもmasterブランチが作成されます。

(2)このローカル上のmasterを元に、作業用のブランチを作成します。上のイラストでは「dev/testsite」という名前の作業用ブランチを作っています。

(3)ローカル上で作業を行った後は、「dev/testsite」をリモートへプッシュ。

以下の作業では、「dev/chikako」という作業用ブランチを作成し、リモート上へプッシュします。

コマンドを使用してブランチを作成

では、まず作業を行うためにブランチを作成してみましょう。

この時に注意するのは、どのブランチを基準にして作成するかということです。
複数の人数で制作を行っている場合、「master」「develop」「release」など、様々なブランチが存在します。

作業内容によって元にするブランチは異なると思いますが、指定されたブランチを元に、新しい作業ブランチを切るといったシーンは多いはずです。

早速、新しいブランチを切ってみましょう。SourceTreeのGUIから作成することももちろんできますが、工程が多いので、ここはコマンドでブランチ作成を行うことをおススメします。

Source Treeからターミナルを立ち上げましょう。Source Treeの右上の「ターミナル」というボタンを押します。

Source Treeからターミナルを立ち上げてGitのコマンドを打つ

立ち上がったら、早速ブランチの作成。試しコマンドを打ってみましょう。
リモートの「master」を元に、自分の名前のブランチ「dev/yourname」を作成したい場合は以下のように入力します。

git branchでブランチを作成

$ git branch dev/yourname origin/master

これで、「dev/yourname」というブランチが作成できたはずです。

$ git branch <新しいブランチ名> <元にするリモートブランチ>

↑ 新しいブランチ名が前、そのあとに元にするリモートブランチと覚えればOKです。

$ git branch <新しいブランチ名>

↑ 元にするリモートブランチを指定しない場合は、現在自分がいるブランチを元にして新しいブランチが作成されます。

ブランチを作成した後に、そのブランチに移動したい

でも、新しいブランチで作業を始めるためには移動checkoutしなくてはいけません。
その両方を一度に叶えるコマンドがこちら!

$ git checkout -b dev/yourname origin/master

-bbranchの省略です。

checkoutについては詳しくこの後の章で紹介していますのでご覧ください。

SourceTree上でどのブランチにいるのか確認

私がmasterブランチにプッシュしてしまった原因のひとつは、まだ、SourceTreeも使い始めたばかりで「チェックアウト」をどのように行ったら良いか理解しきれていなかったことでした…

SourceTree上にて現在どのブランチにいるかは、以下のように確認します。

SourceTreeでどのブランチにいるのか確認する方法

SourceTreeの画面左サイド、この太字になっているブランチが現在チェックアウトしているブランチです。

作業ブランチをチェックアウトする

私のように、うっかりする方は少ないかと思いますが…

これではチェックアウトできていない

このように選択された状態で色が変わっていれば既にチェックアウトされているものだと勘違いしていました…。 これは間違えです…注意してくださいね。

SourceTreeでチェックアウトを行う場合は以下の通り。

SourceTreeでチェックアウトする

チェックアウトを行いたいブランチの上にカーソルを合わせ右クリックし、「dev/chikakoをチェックアウト」を選択

コマンドでチェックアウトを行う場合はこちら。

$ git checkout dev/chikako

この「dev/chikako」はチェックアウトしたいブランチの名前を入力して下さい。

プッシュ前は忘れずに!作業ブランチを最新に

自分が作業を行っている間、他の作業者がリモート上のmasterブランチを更新しているかもしれません。 リモートとローカルの間に差分があると、SourceTree上では「コミット遅れ」などと表示され、プッシュすることができません。

プッシュする前に、「Pull」もしくは「Fetch+merge」をし、ローカルを最新状態へ更新しましょう。 私は「Fetch+merge」を使用して更新をしています。 コマンドでは以下の通りです。

(1)fetchを使用して、最新を取り込む

$ git fetch origin

(2)念のためチェックアウト

$ git checkout dev/chikako

(3)mergeを使用して取り込んだ最新状態を現在のブランチへ統合する

$ git merge origin/master

このorigin/masterはローカルにあるorigin/masterです。 取り込んだら、リモート上の作業ブランチへプッシュしましょう。

リモート上の作業ブランチへプッシュする

SourcetTree上でプッシュを行う場合は以下のように行います。

自分が作成したリモート上のブランチへプッシュする

「OK」を押す前にプッシュ先のブランチに間違いがないか確認しましょう

コマンドでは以下の通りです。

(1)git addでファイルをステージング

$ git add ファイル名

コミットしたいファイルをインデックスへ追加します。

(2)git commitでファイルをコミット(一行メッセージ)

$ git commit -m "メッセージを入れます"

どのような作業を行ったか知らせるために、メッセージを入力します。 ただ、このコマンドは一行のコメントしか入力できません。

変更内容を知らせたい、でも一行では足りない… こんな感じでに三行にわたって詳細を知らせたい…

1行目:変更内容を入力
2行目:空行
3行目:変更した理由(詳細)を入力

複数行を入力したい場合はいろんな方法がありますが、 「git commit」と打つと、vimが開きコメントが入力できるので、そちらを試してみましょう。

$ git commit

以下のような画面へ移動します。いつもより色が多かったので、エラーかと思いドキっとしましたw

gitのvim

vim上でテキストを入力したいときはi入力します。(insertの「i」らしいです)情報を入力し終わったら、「Esc」ボタンを押してコマンドモードに戻り、:wqと入力し保存したら、メッセージの入力は終了。

この記事を書いているときに867さんに教えてもらったのですが、ここで入力する_wpとは「write and quit(書いて終了)」の意味_らしいです。 変更しない場合は:q(quit:終了)、変更したけれど破棄して終了させたい時は:q!で強制終了になります。

Gitを使いこなす為には、UNIXの基本的なコマンドを覚えておく必要がありそうですね。

(3)思い切ってプッシュ

現在のブランチに対して、初めてPushをする場合は「追跡オプション」を指定します。

$ git push -u origin dev/chikako

-uはupstreamの省略。この後git pushした時に追従の対象にしてくれます。
二回目からのPushは、git pushだけでOK!

$ git push

これで、リモート上の作業ブランチへ無事更新することができました!

Gitの概念を掴むのは難しい

Gitの勉強を始めしばらく経ちますが、概念を理解するのは本当に難しく感じています。 チームの皆さんから、「まずはコマンドを使用して工程を掴むといいよ!」とのアドバイスをいただいたので、SourceTreeからコマンドに徐々に移行しています。 (でもまだまだ使いこなせません!)

これからは定期的にGitについて学んだことをまとめ、皆さんに共有していければと思います。 最終回では、私が無事にGitマスターになれるよう応援してくださいね!

他にもGitに関する様々な記事を公開しています。
私たちが普段行っている様々なワークフローも公開していますので、ぜひblogからご覧ください!