Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ぴ え ん

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

A. バグを直すため

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

伝わるバグ報告

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

バグ報告のキホン

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

バグ報告の書き⽅

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

画⾯キャプチャに便利なツール 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/

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

おさらい 1. バグ報告のキホン
 1Issue 1Bug、“事実”を伝える、バグと要望は分ける 2. バグ報告の書き⽅
 タイトル、発⽣した事象、再現⽅法、期待する結果、実⾏環境 3. プログラマに崇め奉られるバグ報告
 画⾯キャプチャ、エラーログ、HARファイル

Slide 31

Slide 31 text

こんな⼈が発表しました ダーシノ @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