伝わるバグ報告 / How to write a better bug report

さくらの夕べ Tech Night #3 Online
https://sakura-tokyo.connpass.com/event/191354/

文字起こし版
https://knowledge.sakura.ad.jp/26627/

Transcript

1. 15,300+ stars⭐
   on GitHub
   ダーシノ / NES.css 作者
   フロントエンドエンジニア@さくらインターネット
   伝わるバグ報告
   

   View Slide

2. 動きません
   使えねぇな！
   アレもコレもソレ
   もおかしい
   

   View Slide

3. ぴ
   え
   ん
   

   View Slide

4. Q. バグ報告をする理由は？
   

   View Slide

5. A. バグを直すため
   

   View Slide

6. バグ報告にはコツがある！
   

   View Slide

7. 伝わるバグ報告
   

   View Slide

8. ⽬次
   1. バグ報告のキホン
   2. バグ報告の書き⽅
   3. プログラマに崇め奉られるバグ報告
   

   View Slide

9. バグ報告のキホン
   

   View Slide

10. バグ報告のキホン
    - 1Issue 1Bug
    - “事実”を伝える
    - バグと要望は分ける
    

    View Slide

11. 1Issue 1Bug
    クローズできないチケット
    すぐ修正できるバグ
    すぐ修正できるバグ
    修正が難しいバグ
    1Issueにバグは1つまで。
    複数を混ぜるとクローズできない

    闇チケットが⽣まれる。
    

    View Slide

12. “事実”を伝える
    使えねぇな！
    動きません
    起きている事実のみを伝える。
    イラッとしても感情を切り離して

    報告する。
    

    View Slide

13. バグと要望は分ける
    ≠
    思い通りに動かない ≠ バグ
    ※エンドユーザーには判断できないため、社内や発注者
    から報告するときに限る
    「こう動くべき」
    という考え
    アプリの仕様
    

    View Slide

14. バグ報告の書き⽅
    

    View Slide

15. バグ報告の書き⽅
    - タイトル
    - 発⽣した事象
    - 再現⽅法
    - 期待する結果
    - 実⾏環境
    

    View Slide

16. タイトル
    - 簡潔に書く
    - バグの内容が把握できる
    - 発⽣した状況がわかる
    

    View Slide

17. 発⽣した事象
    - できるだけ詳しく
    - 共通⾔語を使う
    - ページやボタンはラベルに合わせる
    - エラー内容をそのまま添付する
    

    View Slide

18. 再現⽅法
    - わかる範囲で詳しく書く
    - 発⽣時刻や発⽣頻度
    - 再現しない場合は、その旨を書く
    

    View Slide

19. 期待する結果
    - 本来どう動くべきか書く
    - わかれば、原因も書く
    

    View Slide

20. 実⾏環境
    - OS
    - ブラウザ
    - バージョン
    - 設定内容
    

    View Slide

21. バグ報告の書き⽅
    ○○ページで××するとエラーがでる
    ## 内容
    ○○ページで××ボタンを押すと「Err999:
    xxx」というエラーが表⽰され、＊＊ページに遷
    移しない
    ## 再現⽅法
    1. ログインする
    2. ××ボタンを押して○○ページを開く
    3. [⽇付]に1週間後の⽇付を⼊⼒する
    4. ××ボタンを押す
    5. ダイアログでエラーメッセージが表⽰される
    ## 実⾏環境
    - macOS Catalina 10.15
    - Chrome 86.0.4240.111
    - App xx.yy.zz
    ## 期待する結果
    ××ボタンを押したときに＊＊ページに遷移する
    

    View Slide

22. プログラマに
    崇め奉られる
    バグ報告
    

    View Slide

23. プログラマに崇め奉られるバグ報告
    - 画⾯キャプチャ
    - エラーログ
    - HARファイル
    ホンマ感謝やで
    

    View Slide

24. 画⾯キャプチャ（静⽌画）
    動作をともなわない場合
    ※エラーメッセージなど動かないものに適している
    

    View Slide

25. 画⾯キャプチャ（動画）
    動作をともなう場合
    時系列が関係する場合
    ※筆者は単純で短い場合はgif、複雑で⻑い場合は動画
    ファイルを使っている
    

    View Slide

26. 画⾯キャプチャに便利なツール
    Skitch
    スクショに枠や⽮印、⽂字が書き込めてモザイク処理もできる
    https://evernote.com/intl/jp/products/skitch
    QuickTime Player
    画⾯を録画ができる
    https://support.apple.com/ja_JP/downloads/quicktime
    Kap
    QuickTime Playerでもいいけど、より気楽に動画やgifを作りたいときに便利 ※macOSのみ
    https://getkap.co/
    

    View Slide

27. エラーログ
    開発者ツールのコンソール
    に出⼒されたログ
    ※ Chromeの場合、設定から[その他のツール] > [デ
    ベロッパーツール]
    

    View Slide

28. HARファイル: ⽣成編
    Http ARchiveファイル
    リクエストをjson形式でま
    とめてファイルにしたもの
    デベロッパーツールの[Network]タブで右クリックか
    ら[Save all as HAR with content]で保存
    

    View Slide

29. HARファイル: 表⽰編
    .HARファイルをデベロッ
    パーツールの[Network]タ
    ブにドラッグ&ドロップ
    リクエストやレスポンスの
    内容がそのまま再現される
    .HAR
    

    View Slide

30. おさらい
    1. バグ報告のキホン

    1Issue 1Bug、“事実”を伝える、バグと要望は分ける
    2. バグ報告の書き⽅

    タイトル、発⽣した事象、再現⽅法、期待する結果、実⾏環境
    3. プログラマに崇め奉られるバグ報告

    画⾯キャプチャ、エラーログ、HARファイル
    

    View Slide

31. こんな⼈が発表しました
    ダーシノ
    @bc_rikko
    @BcRikko
    kuroeveryday.blogspot.com
    NES.css
    ファミコン⾵CSSフレームワーク 15,300+stars on GitHub
    https://github.com/nostalgic-css/NES.css
    仮想DOM 実践⼊⾨
    ⾃作フレームワークを作りながら仮想DOMを学ぶ記事、エンジニアHub寄稿
    https://eh-career.com/engineerhub/entry/2020/02/18/103000
    CSSと副業
    OSS活動や副業に関するインタビュー記事、Offers寄稿
    https://offers.jp/media/sidejob/workstyle/a_1769
    

    View Slide