Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[2019/03/23]プルリクとの上手な付き合い方

 [2019/03/23]プルリクとの上手な付き合い方

NaITE #30 「プルリクとの上手な付き合い方 and もくもく会」
https://nagasaki-it-engineers.connpass.com/event/121343/

tosite

March 23, 2019
Tweet

More Decks by tosite

Other Decks in Technology

Transcript

  1. プルリクとの
    上手な付き合い方
    Event /
    NaITE #30
    プルリクとの上手な付き合い方
    and もくもく会
    Date / 2019-03-23 (Sat)
    Presenter / Naoto Teshima (tosite / まおちゃ)

    View full-size slide

  2. はじめまして

    View full-size slide

  3. GMOペパボ
    ホスティング事業部
    ムームードメイングループ所属
    手島 尚人
    インターネット上ではまおちゃという名前で
    バーチャルJKやってます

    View full-size slide

  4. 最近はRuby on Railsや
    Laravelなどを書いています

    View full-size slide

  5. Twitter : @mao_sum
    Blog : tosite.work
    NaITE・JaSST九州・
    PHPカンファレンス福岡
    の実行委員もやっています

    View full-size slide

  6. おもしろ自己紹介

    View full-size slide

  7. ref: https://kimromi.hatenablog.jp/entry/2019/02/23/225740

    View full-size slide

  8. はじめに

    View full-size slide

  9. 皆さん、プルリクを
    作っていますか?

    View full-size slide

  10. Git全盛期の昨今
    名前だけでも聞いたことが
    あるかと思います

    View full-size slide

  11. 特にチーム開発を行う場合、
    プロダクトの品質を担保するためにも
    プルリク→コードレビューの流れ
    は必要不可欠かなと思います

    View full-size slide

  12. そんな中で、こんなプルリクを
    見たことはありませんか?

    View full-size slide

  13. おおよそニンゲンには
    検知不可能な変更量

    View full-size slide

  14. そしてこんなコミットを
    積んでいませんか?

    View full-size slide

  15. 何が変わったのか
    わからない

    View full-size slide

  16. 今日は
    よいプルリクを作るには?
    プルリクとの上手な付き合い方
    を実体験からお話ししていきます

    View full-size slide

  17. 参考文献:イシューからはじめよ

    View full-size slide

  18. 知的生産者
    としての心構え

    View full-size slide

  19. 知的生産者としての心構え
    ってなんだと思いますか?

    View full-size slide

  20. 知的生産者としての心構え
    最小限の時間で
    最大限の生産性を出す
    方法を考えていくことだと思います

    View full-size slide

  21. 知的生産者としての心構え
    そのためには
    犬の道
    から脱却しなくてはなりません

    View full-size slide

  22. 知的生産者としての心構え
    犬の道とは

    View full-size slide

  23. 知的生産者としての心構え
    一心不乱に仕事を
    することで問題解決
    していこうとする姿勢のこと

    View full-size slide

  24. 知的生産者としての心構え

    View full-size slide

  25. 知的生産者としての心構え

    View full-size slide

  26. 知的生産者としての心構え
    限られた時間・リソースの中で効率を高めるには
    課題の本質を見抜き
    解の質を高めていく
    ことが必要不可欠です

    View full-size slide

  27. 知的生産者としての心構え
    特にありがちなのは、
    丁寧にやりすぎた結果
    膨大な時間を費やしてしまう
    ことです

    View full-size slide

  28. 知的生産者としての心構え
    もちろん丁寧さは大切ですが、それ以上に
    イテレーションの回転数・スピード感
    を上げていくことが最重要です

    View full-size slide

  29. 知的生産者としての心構え
    考える 答えを出す
    答えを出す
    考える 答えを出す
    考える 答えを出す
    考える
    時間

    View full-size slide

  30. 知的生産者としての心構え
    考える 答えを出す
    答えを出す
    考える 答えを出す
    考える 答えを出す
    考える
    時間

    View full-size slide

  31. 知的生産者としての心構え
    そのためにも
    Issueやプルリクと
    上手に付き合いつつ
    犬の道から脱却していきましょう

    View full-size slide

  32. 閑話休題
    -海の話-

    View full-size slide

  33. 閑話休題
    突然ですが皆さん、海に
    泳ぎに行ったらどうしますか?

    View full-size slide

  34. 閑話休題
    いきなり着替えもせずに海に入る、
    ということはしないと思います

    View full-size slide

  35. 閑話休題
    まずは着替えて、日焼け止めを塗って、準備運動して…
    事前の準備を済ませてから
    泳ぎますよね

    View full-size slide

  36. 閑話休題
    何かを作るときにも同じで、
    いきなり飛び込まずに
    最初に考える時間を作る
    ことが大事だと僕は思います

    View full-size slide

  37. 閑話休題
    そもそも何の問題を解決するためなのか
    どういった問題があるのかなど、やるべきことを
    大きいことから徐々に細かく分解
    していくといいです

    View full-size slide

  38. 閑話休題
    このあたりの詳しい話について興味のある方は
    イシューからはじめよ
    をご覧ください

    View full-size slide

  39. ポイントは
    悩まないこと

    View full-size slide

  40. ポイントは悩まないこと
    皆さん、悩むことと考えることは
    どう違うと思いますか?

    View full-size slide

  41. ポイントは悩まないこと
    アイスブレイク3分:
    自己紹介
    話し合う

    View full-size slide

  42. ポイントは悩まないこと
    悩む

    View full-size slide

  43. ポイントは悩まないこと
    決めかねたり解決の方法が
    見いだせなかったりして、心を痛める。
    思いわずらう。
    goo辞書: https://dictionary.goo.ne.jp/jn/165175/meaning/m0u/%E6%82%A9%E3%82%80/

    View full-size slide

  44. ポイントは悩まないこと
    考える

    View full-size slide

  45. ポイントは悩まないこと
    知識や経験などに基づいて、
    筋道を立てて頭を働かせる。
    goo辞書: https://dictionary.goo.ne.jp/jn/47607/meaning/m0u/%E8%80%83%E3%81%88%E3%82%8B/

    View full-size slide

  46. ポイントは悩まないこと
    考えても答えが出ないことに
    思いを巡らせることが「悩む」
    具体的に解決への道筋を
    組み立てることが「考える」

    View full-size slide

  47. ポイントは悩まないこと
    僕自身悩むこともそれはそれで好きではありますが…
    10分考えて分からないことは
    悩んでいる可能性が高いです
    悩むことをやめて聞こう・相談しよう

    View full-size slide

  48. ポイントは悩まないこと
    でも、誰かに相談された場合に、
    思考の順序や道筋が見えない
    と相談を受ける側もよくわからないことがあります…

    View full-size slide

  49. フレームワークを
    使おう

    View full-size slide

  50. フレームワークを使おう
    考えを整理するにあたって、
    フレームワークの力を借りる
    ことはとても有益です

    View full-size slide

  51. フレームワークを使おう
    5W1Hやなぜなぜ分析
    といった言葉を耳にしたことはありませんか?

    View full-size slide

  52. フレームワークを使おう
    個人的にオススメなのは
    マインドマップ
    です

    View full-size slide

  53. フレームワークを使おう

    View full-size slide

  54. フレームワークを使おう
    思考の過程が可視化される
    ため、他の人が見たときにわかりやすいと思います

    View full-size slide

  55. プルリクを
    構成するもの

    View full-size slide

  56. プルリクを構成するもの

    View full-size slide

  57. プルリクを構成するもの
    コミット

    View full-size slide

  58. プルリクを構成するもの
    どんな作業をしたのかが一言で言える
    ようなコミットがわかりやすいです

    View full-size slide

  59. プルリクを構成するもの
    あとでレビューを受けるときに
    コミット単位で見られる
    ことを考えておこう

    View full-size slide

  60. プルリクを構成するもの
    タイトル

    View full-size slide

  61. プルリクを構成するもの
    例えばリリースして半年経過して、
    過去のプルリクを検索する、
    といったシチュエーションを
    想像していただきたいのですが

    View full-size slide

  62. プルリクを構成するもの

    View full-size slide

  63. プルリクを構成するもの
    こちらとこちら、
    どちらが見やすいですか?

    View full-size slide

  64. プルリクを構成するもの
    後から探しやすいタイトル
    をつけることを意識していきましょう

    View full-size slide

  65. プルリクを構成するもの
    細かいことは次の概要に書いていくので、
    あまり説明的になりすぎない
    ように気をつけましょう

    View full-size slide

  66. プルリクを構成するもの
    概要

    View full-size slide

  67. プルリクを構成するもの
    超重要

    View full-size slide

  68. プルリクを構成するもの
    レビュアーがここを見たときに
    プルリクの意図をパッと掴める
    ように整えておきましょう

    View full-size slide

  69. プルリクを構成するもの
    5W1Hに沿って書き出す、
    概略図などを掲載する
    などしておくと最高です
    ref: https://kimromi.github.io/2017-08-31/pull-request.html

    View full-size slide

  70. プルリクを構成するもの
    GitHubであれば
    テンプレートを登録
    することもできるので、活用していきましょう

    View full-size slide

  71. プルリクを構成するもの
    コメント

    View full-size slide

  72. プルリクを構成するもの
    基本的には議論の場
    なので、どんどんコミュニケーションを
    取っていきましょう

    View full-size slide

  73. プルリクを構成するもの
    最近やり始めましたが、
    変更したコードの補足説明を
    自分で入れる
    などするとわかりやすいです

    View full-size slide

  74. プルリクを構成するもの
    こんな感じ

    View full-size slide

  75. プルリクを構成するもの

    View full-size slide

  76. プルリクを構成するもの
    他にもコメント部分に
    スクリーンショットや
    実際のレスポンスなど
    のエビデンスを記載しておくと丁寧でGoodですね

    View full-size slide

  77. プルリクを構成するもの
    ラベル

    View full-size slide

  78. プルリクを構成するもの
    僕のチームでは
    プルリクの状態を管理する
    のに使っています

    View full-size slide

  79. プルリクを構成するもの

    View full-size slide

  80. プルリクを構成するもの
    レビュー待ちの状態・マージ可能な状態・
    WIP(下書き)
    の状態など
    ラベルからパッとわかる

    View full-size slide

  81. プルリクを構成するもの
    レビュー

    View full-size slide

  82. プルリクを構成するもの
    レビューとは

    View full-size slide

  83. プルリクを構成するもの
    コードレビュー(英: Code review)は、ソフトウェア
    開発工程で見過ごされた誤りを検出・修正することを
    目的としてソースコードの体系的な検査(査読)を行う
    作業のこと。
    ref: https://ja.wikipedia.org/wiki/コードレビュー

    View full-size slide

  84. プルリクを構成するもの
    他の人からのレビューをもらうことで
    考慮漏れに気づいたり
    コードの品質を高めたり
    することができます

    View full-size slide

  85. 閑話休題
    -コードコメント-

    View full-size slide

  86. 閑話休題
    皆さんこのツイートをご覧に
    なったことはありますか?

    View full-size slide

  87. 閑話休題
    ref: https://twitter.com/t_wada/status/904916106153828352

    View full-size slide

  88. 閑話休題
    ref: https://www.amazon.co.jp/dp/4873115655

    View full-size slide

  89. 閑話休題
    動いているコードに対しては
    コメントなしで何をしているかわかる
    ことが理想だと思います

    View full-size slide

  90. 閑話休題
    逆になぜこのやり方ではダメなのか
    をコメントで説明できると丁寧ですね

    View full-size slide

  91. プルリクについての考え方
    プルリク作成
    レビュー
    修正コミット マージ
    Approve
    プルリク
    作成者
    レビュアー

    View full-size slide

  92. プルリクに
    ついての考え方
    -プルリク編-

    View full-size slide

  93. プルリクについての考え方
    いいプルリクとは

    View full-size slide

  94. プルリクについての考え方
    意図がしっかりと説明されており
    レビュワーが理解しやすいもの

    View full-size slide

  95. プルリクについての考え方
    すぐにマージされるもの

    View full-size slide

  96. こんな状態に
    なっていませんか?

    View full-size slide

  97. プルリクの概要が
    よくわからない

    View full-size slide

  98. プルリクの概要がよくわからない
    自分で概要を書いていて、
    どんなプルリクなのかすぐに書けない
    ことはありませんか?

    View full-size slide

  99. プルリクの概要がよくわからない
    一言でどんなプルリクなのか
    言い表せない

    View full-size slide

  100. プルリクの概要がよくわからない
    これは
    複数のことを一つの
    コミットでやっている
    可能性が高いです

    View full-size slide

  101. プルリクの概要がよくわからない
    プルリクのスコープが明確でない
    場合に起きがちです
    あと一歩、というところで手を止める勇気を持ちましょう

    View full-size slide

  102. プルリクの概要がよくわからない
    initial commit→
    プルリク作成(タイトル・概要記入)→
    コード実装

    View full-size slide

  103. プルリクの概要がよくわからない
    コードを書く際にコメントから書き始める手法のように
    はじめにどういうことをやる
    プルリクなのかを決めておく
    とブレずにいいかもしれません

    View full-size slide

  104. コードを書いた
    後で考慮漏れに
    気づく

    View full-size slide

  105. コードを書いた後で考慮漏れに気づく
    コードを書き終わって
    レビューの際に考慮漏れに
    気づいて書き直し
    といったことがあるかもしれません

    View full-size slide

  106. コードを書いた後で考慮漏れに気づく
    先程もお伝えしたように、
    飛び込む(=コードを書く)前に考える
    ことが大事です

    View full-size slide

  107. コードを書いた後で考慮漏れに気づく
    僕はレビューは
    コード以外のことにも適用できる
    と思っています

    View full-size slide

  108. コードを書いた後で考慮漏れに気づく
    例えば事前に
    実装方針や仕様を整理しておいて
    レビューをもらう
    ことで手戻りが自然と少なくなるでしょう

    View full-size slide

  109. コードを書いた後で考慮漏れに気づく
    極端な話
    コードを書かなくても
    レビューはできます

    View full-size slide

  110. コードを書いた後で考慮漏れに気づく
    言葉で説明するのが難しい場合は
    WIPでコードを書いて
    先にレビューをもらう
    (マージはしない)というやり方も良さそうです

    View full-size slide

  111. プルリクに
    ついての考え方
    -レビュー編-

    View full-size slide

  112. プルリクについての考え方
    お気づきかもしれませんが
    プルリクの段階ではまだ
    コードは世に出ていません

    View full-size slide

  113. プルリクについての考え方
    そういう意味では、プルリクは
    バリューの原石
    だと言えるでしょう

    View full-size slide

  114. プルリクについての考え方
    率先してレビューすることで
    一つでも多くのプルリクを早くマージ
    できるようにしていきたいですね

    View full-size slide

  115. こんな状態に
    なっていませんか?

    View full-size slide

  116. プルリクがずっと
    放置されている

    View full-size slide

  117. プルリクがずっと放置されている
    食い気味にお願いして
    レビューしてもらいましょう…

    View full-size slide

  118. コメントが少ない

    View full-size slide

  119. コメントが少ない
    これは一概に悪いとは言えませんが…
    完璧に説明がなされており
    見ただけで即Approveできるものなど

    View full-size slide

  120. コメントが少ない
    例えば自分の場合だと
    気になったことや気づいたこと、
    わからないことなど
    細かいことでもコメント
    するようにしています

    View full-size slide

  121. コメントが少ない
    このあたりはレビューの文化を
    根付かせることにも
    つながってきますが…

    View full-size slide

  122. コメントが少ない

    View full-size slide

  123. コメントが少ない
    レビューをされる相手も
    同じ人間だということを忘れず、
    心地よいコミュニケーション
    ができるといいですね

    View full-size slide

  124. コードスタイルへの指

    View full-size slide

  125. コメントが少ない
    ひたすらつらいだけなので
    lint入れましょう

    View full-size slide

  126. レビューするとき
    気が重い

    View full-size slide

  127. レビューするとき気が重い
    これは最近、個人的に
    悩んでいたことです

    View full-size slide

  128. レビューするとき気が重い
    完璧にレビューしなきゃ!とか
    レビュー漏れでバグが混入したら
    どうしよう…とか

    View full-size slide

  129. レビューするとき気が重い
    でも結局のところ
    自分の力量を超える
    コードレビュー
    はできません

    View full-size slide

  130. レビューするとき気が重い
    今の自分にできる最良のレビュー
    ができればそれでいいのかなと思っています

    View full-size slide

  131. 閑話休題
    -コードレビューについて-

    View full-size slide

  132. 閑話休題
    コードレビューを取り入れれば
    全てが万全の状態になるというわけではない…
    コードレビューにも限界はある
    と思っています

    View full-size slide

  133. 閑話休題
    特にコードの外側、例えば
    仕様やプロダクトの方向性など
    をコードレビューで見るのは
    レビューの範囲を超えてしまうのでつらいだけです

    View full-size slide

  134. 閑話休題
    プロダクト・コードの
    知見共有はペアプロ・モブプロ
    などを行うほうがよいと思います

    View full-size slide

  135. 閑話休題
    この辺の考え方については
    こちらの記事
    でより深く言及されています

    View full-size slide

  136. 閑話休題
    モブプロについては過去に発表した資料
    コミュニケーションから
    始まるアジャイル
    をご覧ください

    View full-size slide

  137. まとめ
    プルリクは決して
    怖いものではありません

    View full-size slide

  138. まとめ
    プルリクを通して気持ちのいい
    コミュニケーションをしましょう

    View full-size slide

  139. まとめ
    ただ、やり方については
    たった一つの正解はないと
    思っていますので

    View full-size slide

  140. まとめ
    形にとらわれず、チームメンバー
    全員が納得できる形に変えていく
    ことも大事かなと

    View full-size slide

  141. まとめ
    プルリクと上手に
    付き合っていくことで
    生産性を高めていきましょう!

    View full-size slide

  142. ご清聴ありがとう
    ございました

    View full-size slide