伝わるバグ報告 / 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 作者 フロントエンドエンジニア@さくらインターネット 伝わるバグ報告
2. 動きません 使えねぇな！ アレもコレもソレ もおかしい
3. ぴ え ん
4. Q. バグ報告をする理由は？
5. A. バグを直すため
6. バグ報告にはコツがある！
7. 伝わるバグ報告
8. ⽬次 1. バグ報告のキホン 2. バグ報告の書き⽅ 3. プログラマに崇め奉られるバグ報告
9. バグ報告のキホン
10. バグ報告のキホン - 1Issue 1Bug - “事実”を伝える - バグと要望は分ける
11. 1Issue 1Bug クローズできないチケット すぐ修正できるバグ すぐ修正できるバグ 修正が難しいバグ 1Issueにバグは1つまで。 複数を混ぜるとクローズできない
 闇チケットが⽣まれる。
12. “事実”を伝える 使えねぇな！ 動きません 起きている事実のみを伝える。 イラッとしても感情を切り離して
 報告する。
13. バグと要望は分ける ≠ 思い通りに動かない ≠ バグ ※エンドユーザーには判断できないため、社内や発注者 から報告するときに限る 「こう動くべき」 という考え アプリの仕様
14. バグ報告の書き⽅
15. バグ報告の書き⽅ - タイトル - 発⽣した事象 - 再現⽅法 - 期待する結果 - 実⾏環境
16. タイトル - 簡潔に書く - バグの内容が把握できる - 発⽣した状況がわかる
17. 発⽣した事象 - できるだけ詳しく - 共通⾔語を使う - ページやボタンはラベルに合わせる - エラー内容をそのまま添付する
18. 再現⽅法 - わかる範囲で詳しく書く - 発⽣時刻や発⽣頻度 - 再現しない場合は、その旨を書く
19. 期待する結果 - 本来どう動くべきか書く - わかれば、原因も書く
20. 実⾏環境 - OS - ブラウザ - バージョン - 設定内容
21. バグ報告の書き⽅ ◦◦ページで××するとエラーがでる ## 内容 ◦◦ページで××ボタンを押すと「Err999: xxx」というエラーが表⽰され、＊＊ページに遷 移しない ## 再現⽅法 1. ログインする 2. ××ボタンを押して◦◦ページを開く 3. [⽇付]に1週間後の⽇付を⼊⼒する 4. ××ボタンを押す 5. ダイアログでエラーメッセージが表⽰される ## 実⾏環境 - macOS Catalina 10.15 - Chrome 86.0.4240.111 - App xx.yy.zz ## 期待する結果 ××ボタンを押したときに＊＊ページに遷移する
22. プログラマに 崇め奉られる バグ報告
23. プログラマに崇め奉られるバグ報告 - 画⾯キャプチャ - エラーログ - HARファイル ホンマ感謝やで
24. 画⾯キャプチャ（静⽌画） 動作をともなわない場合 ※エラーメッセージなど動かないものに適している
25. 画⾯キャプチャ（動画） 動作をともなう場合 時系列が関係する場合 ※筆者は単純で短い場合はgif、複雑で⻑い場合は動画 ファイルを使っている
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/
27. エラーログ 開発者ツールのコンソール に出⼒されたログ ※ Chromeの場合、設定から[その他のツール] > [デ ベロッパーツール]
28. HARファイル: ⽣成編 Http ARchiveファイル リクエストをjson形式でま とめてファイルにしたもの デベロッパーツールの[Network]タブで右クリックか ら[Save all as HAR with content]で保存
29. HARファイル: 表⽰編 .HARファイルをデベロッ パーツールの[Network]タ ブにドラッグ&ドロップ リクエストやレスポンスの 内容がそのまま再現される .HAR
30. おさらい 1. バグ報告のキホン
 1Issue 1Bug、“事実”を伝える、バグと要望は分ける 2. バグ報告の書き⽅
 タイトル、発⽣した事象、再現⽅法、期待する結果、実⾏環境 3. プログラマに崇め奉られるバグ報告
 画⾯キャプチャ、エラーログ、HARファイル
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