［デザイナー向けGit解説］エンジニアと同じブランチで作業する日

前のGit解説の続き。 Gitでは色んな作業の仕方があります。デザイナーとエンジニアの間でよくある作業の流れをイメージ描きつつ説明してみようかと。今回は「エンジニアとデザイナーが同じブランチで作業する」です。まず朝出社！今日は検索ページを作るお仕事をすることになりました。このイメージにそって説明してみます。

イメージ内：P-1

エンジニアがみんなの場所（remoteとか呼ばれてるところ）から最新の「master」ブランチを持ってきて… そこから「search」というブランチを作りました。

イメージ内：P-2

エンジニアは「search」というブランチで、検索フォームのあるページを作成しました。デザインはまだ入ってません。

イメージ内：P-3

エンジニアは「git push」というコマンドでみんなの場所remoteに「search」ブランチを置きました。だいたい14時くらい！デザイナーさんにチャットやメッセや口頭で「searchっていうブランチ作ったのでデザインいれてください」などと連絡します。

イメージ内：1

デザイナーは、「git fetch」っていうコマンドをうちました。これで、みんなの場所（remoteとか呼ばれてるところ）で何があったか？っていうのを、デザイナー側のPCが把握してくれます。「git fetch」せずに「searchっていうブランチを自分のPCに持ってこい！」ってお願いしても、「そんなブランチ知らない」って言われてしまいますので。。慣れないうちは「git fetch」と「git status」はクセにした方がいいなーと思います。デザイナーさん、さっそくコーディングです〜。イメージの続き。

イメージ内：2

デザイナーは「git checkout -b search origin/search」っていうコマンドをうちました。これで、「remoteにあるsearch（origin/search）をコピーして、自分のところにもsearchっていうブランチを作って、今いるブランチmasterから、searchブランチへ移動（checkout）」がいっぺんに出来ます。さっそく検索フォームにデザインをいれます！

イメージ内：3

作業が完了したら、「git add -p」ってコマンド。コードを確認しながら、addできます。「add -p」とは「commitしたいもの」を選ぶ作業って感じです。コードレビューもできて一石二鳥ですね！あ、画像や新規ファイルがある場合は「git add ディレクトリ/ディレクトリ…/ファイル名」って感じで、ファイル名やディレクトリを直接指定してaddします。そして「git commit -m “検索フォームのデザイン追加”」。ダブルクオーテーションの中に、変更内容を簡潔に書いておきます。これで「検索フォームのデザイン追加」っていう変更作業のパッケージが出来ました！

イメージ内：P-4

この間にエンジニアは「検索フォームの下に検索結果のリストを出す」っていう仕組みを作って push（remoteのsearchブランチにpush）してくれたようです。15時だよ。 pushっていうのは、自分がcommitした変更作業をremoteのブランチにも置くことです。続きのイメージ！これでラスト！

イメージ内：4

16時。デザイナーはpushしたい！変更点をremoteに置きたい！で、pushの前に、pull（remoteの変更点を自分のPCのブランチに持ってくる）をしないといけないわけですが… ただのpullではなく、「git pull –rebase origin search」ってコマンドをうちます。デザイナーの作業は14時にsearchブランチを持ってきたところから始まってますが、これを、16時のsearchブランチから始まったことにしちゃうのです。これによってGitのtreeがとってもキレイに見やすくなります！（イメージだと15時からもってきた感じになってますが、15時から16時までremoteのsearchブランチは何の変更もなかったって設定で…）ここでコンフリクト（コードの変更点の衝突）をすることもあると思います。コンフリクトしたら、「git add」すれば良いのですが、慣れないうちはエンジニアさんを呼んでお願いした方がいいと思います。(^^;; ここでは「pull」成功！したという設定で。