良いバグ報告の書き方と GitHub Issues テンプレート（即修正される5要素）
開発効率 チーム開発 デバッグ GitHub QA
開発者やQAチームが「調査不要で即修正に着手できる」高品質なバグ報告（Bug Report / Issue）の書き方と GitHub Issues 用テンプレートです。
1. オンライン Bug Report テンプレート生成ツール
必須項目を埋めるだけで、コピペ可能な Markdown 形式のバグ報告文を生成できます。
🐞 この場でバグ報告を作成する
自動取得（ブラウザから見た情報）
※ブラウザのプライバシー保護により、実機スペックと異なる場合があります（GPUはANGLE経由の仮想名等）
必須
ハードウェア
画面
ネットワーク
言語
手動補完（実機スペック）
※ゲームはブラウザと別環境で動くため、実機の情報がバグ特定に重要です
バグ内容
生成ボタンを押すとここに表示されます
2. 高品質なバグ報告に必要な 5 大要素
| 要素 | 記述例 / ポイント |
|---|---|
| ① 概要 (Summary) | [決済画面] クーポンコード入力時に 500 エラーが発生して購入処理が中断する (画面と現象を1行で) |
| ② 再現手順 (Steps to Reproduce) | 1. /cart に商品を1点追加2. レジに進み、クーポン 'TEST2026' を入力3. 適用ボタンをクリック (番号順の箇条書き) |
| ③ 期待する動作 (Expected) | 「クーポンが適用されました」のメッセージが表示され、合計金額が20%割引されること |
| ④ 実際の動作 (Actual) | 画面上に 'システムエラーが発生しました' と表示され、ブラウザコンソールに 500 Internal Error |
| ⑤ 環境情報 (Environment) | OS: macOS Sonoma 14.5 / ブラウザ: Chrome 125.0 / ユーザー種別: 無料会員 |
3. GitHub / Jira で使えるコピペ用 Markdown テンプレート
.github/ISSUE_TEMPLATE/bug_report.md に配置して運用できる標準テンプレートです。
## 🐛 バグの概要
<!-- 何が起きているかを1〜2文で簡潔に記述してください -->
## 🔄 再現手順
1. `...` にアクセス
2. `...` をクリック
3. `...` を入力
## 🎯 期待される挙動
<!-- 本来どう動くべきだったかを記述してください -->
## ❌ 実際の挙動
<!-- エラー画面のスクショやコンソールエラー文を添付してください -->
## 💻 発生環境
- **OS:** macOS / Windows / iOS / Android
- **ブラウザ:** Chrome / Safari / Firefox (バージョン)
- **環境:** Staging / Production
## ログ / スクリーンショット
```console
// DevTools の Console / Network エラーログがあればここに貼付
---
## 4. 開発者の調査時間を9割減らす添付テクニック
- **コンソールエラーログのコピペ:** F12 (DevTools) を開き、`Console` タブの赤字エラー文（スタックトレース）をそのまま貼り付ける。
- **Network タブの HTTP ステータス:** 401, 403, 404, 500 などのレスポンスコードを添える。
- **動画 / GIF の活用:** コマンド操作やアニメーション崩れは ScreenToGif や Loom 等の短時間キャプチャが文章より100倍伝わります。