L45：UI検収（QA）設計（テストケース表／バグレポート／差戻し基準）＋版管理メモ（v+0.1）（TRAINING ONLY／流用禁止）

【重要：本レッスンは訓練専用】

• このレッスンで作る「テストケース」「検収チェック」「バグレポート」「差戻し基準」「修正メモ」等は訓練専用です。通常業務でそのまま使用することは禁止します（コピペ流用禁止）。
• 実サイト更新・実公開・実リポジトリ反映は禁止：本番環境/実CMS/実タグ/実URLには触れません（ローカル・ダミーのみ）。
• 実データ・個人情報・未公開情報は禁止（実案件名、実ページID、実在の条件/取引先/素材などは書かない）。
• 本番で必要になった場合は、訓練成果物を流用せず、情報を取り直し、別途レビュー/承認を経て新規作成してください。

L43〜L44で作った「UI要件（状態/例外/アクセシビリティ）」と「実装（state/render/event/guard）」を、検収（QA）で再現可能な形に落とします。
ポイントは「なんとなく動く」ではなく、テストケースで“期待結果”が固定され、バグ報告が再現手順＋根拠（ログ/状態）で書けることです。

このページの使い方

1レッスン＝1LP（1ページ）です。上から順に当日の時間割に沿って進めてください。
各項目の冒頭に EC事業部／文房具カフェ事業部・準備室 の実施時間を併記しています。
※本レッスンはダミーのみで行います（実データ・個人情報・未公開情報は入力しない）。

このレッスンの狙い（到達状態）

• UI検収を「感想」ではなく、テストケース（手順＋期待結果）として書ける
• 状態（idle/loading/success/empty/error/timeout/canceled 等）ごとに、検収観点を漏れなく列挙できる
• バグ報告を、再現手順／期待結果／実際結果／根拠（ログ/状態/条件）で書ける
• 差戻しを「曖昧な指摘」ではなく、どこ／どう／完了条件で出せる
• 修正時に回帰（戻りバグ）を防ぐため、修正に紐づく回帰テストを追加できる

受講ルール（共通）

• 実データ禁止：実URL、実ページID、実アカウント、実顧客情報、未公開企画などは禁止
• 訓練成果物の流用禁止：訓練で作ったQA表・バグ票・差戻し基準を通常業務へコピペしない
• 通常業務をしない：訓練日は講義・演習・レビュー・理解度確認に専念する
• 命令系統の具体化をしない：役割は「作成担当」「レビュー担当」「承認担当」など抽象ロール
• 相互レビュー2件以上：前日までの他者成果物に2件以上コメント（本ページの観点を使用）

今日の目標（できた範囲でOK）

受講者のレベル差があるため、強制の提出物は設けません。今日の目標を選び、できた範囲を「今日進めたこと」に記録してください。

1. （A）TRN-QA45 検収Specヘッダ（v0.1）：対象/UI要件/状態/再現条件/完了条件
2. （B）テストケース表（v0.1）：最低6本（余裕があれば12本）
3. （C）バグレポート（v0.1）：最低1件（わざと壊して作ってもOK）
4. （D）品質ゲート（OK/差戻し/要相談）：差戻し基準を具体化
5. （E）版管理メモ（v+0.1）：修正内容＋回帰テスト追加＋ログ抜粋

結論：検収は「再現できること」が価値

検収で一番困るパターン

• 「動かないです」しか書いてなく、再現できない
• 期待結果がなく、何が正しいのか分からない
• 状態が増えたのに、検収観点が増えず、抜け漏れで事故る
• 修正したら別のところが壊れたのに、回帰テストがない

今日の最小ルール（この4点だけは揃える）

1. 再現手順（どの条件で、どの操作を何回）
2. 期待結果（状態/表示/ボタン/メッセージ/ログ）
3. 実際結果（何がどう違う）
4. 根拠（ログ抜粋・状態・requestId・条件 など）

標準テンプレ（TRAINING ONLY）

A) TRN-QA45 検収Specヘッダ（v0.1）

【TRN-QA45 検収Specヘッダ（v0.1：訓練専用・流用禁止）】
Spec-ID：TRN-QA45
版：v0.1
状態：DRAFT / REVIEW / FINAL（訓練内）

対象（ダミー）：

* 例：TRN-JS44（非同期UI）／TRN-JS43（状態UI）など

目的（1行）：

* 例：UI検収をテストケース化し、再現・差戻し・回帰防止ができるようにする

範囲（やる/やらない）：

* やる：テストケース表／バグレポート／差戻し基準／修正メモ（v+0.1）
* やらない：実サイト検収、実公開、実データでの動作保証

参照（訓練内の入力）：

* UI要件（状態/例外/A11y）
* 実装（state/render/event/guard）
* ログ（あれば）

状態（enum：使うものに○）：

* idle / loading / success / empty / error / timeout / canceled

再現条件（固定：ランダム禁止推奨）：

* success：
* empty：
* error：
* timeout：
* canceled：

完了条件（採点可能）：

* テストケースが最低6本あり、期待結果が具体
* バグ報告が1件以上あり、再現手順＋期待/実際＋根拠が揃う
* 差戻し基準が曖昧語なし（どこ/どう/完了条件）
* 修正に回帰テストが紐づく（最低1本追加）

B) テストケース表（v0.1：最小）

※「状態遷移表」や「UI要件」から、テストに落とします。

C) バグレポート（v0.1：訓練用）

【TRN-QA45 バグレポート（v0.1：訓練専用・流用禁止）】
Bug-ID：
対象（Spec-ID/画面名：ダミー）：
版（v0.x）：
発生日：
担当（抽象）：

1. 概要（1行）：

*

2. 重要度（ダミー）：

* S1（致命）/ S2（高）/ S3（中）/ S4（低）

3. 再現条件（固定）：

* （例：カテゴリ=empty、failSwitch=OFF、slowSwitch=ON）

4. 再現手順（番号で）：

1)
2)
3)

5. 期待結果（状態/表示/操作）：

* 期待する状態：
* 期待する表示：
* 期待する操作（押せる/押せない）：

6. 実際結果：

* 実際の状態：
* 実際の表示：
* 実際の操作：

7. 根拠（ログ/状態/スクショの代替）：

* ログ抜粋（3〜8行）：
* 状態（from→to）：
* requestId（あれば）：

8. 一次切り分け（仮説：推測はOKだが断定禁止）：

* 仮説：
* 要確認：

9. 差戻し指示（どこ/どう/完了条件）：

* どこ：
* どう直す：
* 完了条件（このテストがOKになる）：

10. 回帰テスト（追加するTC）：

* 追加TC-ID：
* 期待結果：

D) 版管理メモ（v+0.1：差分が追える形）

【TRN-QA45 版管理メモ（v+0.1：訓練用）】
対象（Spec-ID）：
旧版 → 新版：
変更理由（1行）：

## 変更内容（差分：箇条書き）：

*
*

## 影響範囲（どの状態/導線に影響？）：

## 追加した回帰テスト（TC-ID）：

## 期待結果：

確認ログ抜粋（任意：3〜8行）：
-

品質ゲート（OK/差戻し/要相談：v1.0）

ダミー課題（どれか1つでOK）

QA-45A（易）：状態ごとの最低テスト6本（success/empty/error）

対象（ダミー）：
- TRN-JS43 または同等の状態UI（同期でもOK）

要求：

* テストケース最低6本（基本フロー＋empty＋error＋操作制御）
* 期待結果を「状態/表示/操作」で書く
* バグ票は任意（作れたら1件）

QA-45B（中）：非同期＋競合/キャンセルを含む（L44相当）

対象（ダミー）：
- TRN-JS44（擬似API＋requestId＋cancel＋retry＋ログ）

要求：

* テストケース最低12本（状態＋競合＋二重実行＋復帰）
* バグ票を最低1件（わざと壊して作ってもOK）
* 修正メモ（v+0.1）で回帰テストを最低1本追加

QA-45C（難）：アクセシビリティ観点（最小）を組み込む

対象（ダミー）：
- TRN-JS44 または同等

要求：

* キーボード操作（Tab/Enter）の観点をテストケースに入れる
* 状態通知（aria-live等の想定）が「期待結果」に含まれる
* 失敗時フォーカス誘導（retryへ等）を検収する

ChatGPTに投げるプロンプト（コピペ用）

1) 状態遷移表／UI要件からテストケース表を作る

【L45 プロンプト①：テストケース表（訓練用）】

前提（安全）：

* 教育訓練用ダミー。実データ・実URLは禁止。
* 成果物は流用禁止。検収は訓練対象のみ。

入力：

* UI要件（状態/例外/操作制御/A11y）
* 状態遷移表（あれば）
* 実装メモ（state/render/event/guard）

出力形式（必須）：

* テストケース表（TC-ID/観点/前提/手順/期待結果/観測ポイント/結果/メモ）
* 最低6本（可能なら12本）
* 期待結果は「状態/表示/操作」で具体化（曖昧語禁止）

2) バグ報告を“再現可能”な形に整形する（ログ込み）

【L45 プロンプト②：バグレポート（訓練用）】

入力：

* 不具合の説明（自分のメモでOK）
* 再現条件
* ログ抜粋（3〜8行：あれば）
* 該当TC-ID

出力：

* TRN-QA45 バグレポート（v0.1）をテンプレどおりに埋める
* 差戻し指示（どこ/どう/完了条件）を必ず書く
* 回帰テスト（追加TC）を1本提案する

3) 修正方針（最小差分）＋回帰テスト追加案を作る

【L45 プロンプト③：修正方針（訓練用）】

前提：

* 推測で直さない。観測（ログ/状態/再現）に基づく。
* “最小差分”で直し、直したら回帰テストを追加する。

入力：

* バグレポート（v0.1）
* 該当コード（抜粋：訓練用）

出力：

* 修正方針（何を/なぜ/どう）
* 修正後の回帰テスト（TC追加案）
* 版管理メモ（v+0.1）の下書き

相互レビュー観点（L45専用）

• 訓練専用の担保：流用禁止が明記され、実在情報が混入していないか
• テストの再現性：前提/手順/期待結果が具体で、第三者が同じ結果に到達できるか
• 状態の網羅：UI要件の状態（error/timeout/canceled等）が抜けていないか
• 観測ポイント：ログ/DOM/状態など、根拠が取れるように書かれているか
• 差戻しの具体性：どこ/どう/完了条件があり、曖昧語がないか
• 回帰テスト：修正に対して、再発防止のテストが追加されているか

レビューコメントテンプレ（コピペ用）

【L45 相互レビューコメント】
対象（TRN-QA45）：
版：

1. 良い点（1つ）：

*

2. テストケースは再現できる？（前提/手順/期待結果が具体）

* OK / 要改善
  改善案（1つ）：
*

3. 状態の抜けはない？（error/timeout/canceled/empty 等）

* OK / 要改善
  不足TC（1つ）：
*

4. バグ報告は根拠がある？（ログ/状態/条件）

* OK / 要改善
  不足（1つ）：
*

5. 差戻しは具体？（どこ/どう/完了条件）

* OK / 要改善
  曖昧な指示（1つ）：
*

6. 回帰テストは紐づいてる？

* OK / 要改善
  追加提案（1つ）：
  -

本日の流れ（タイムライン）

目次（クリックで移動）

1. 出席・当日選択カリキュラムの内容確認
2. 時間差相互評価（2件以上コメント）
3. 休憩
4. 自分への受領レビュー確認・改善方針メモ
5. L45 レクチャー本編（講師説明・質疑込み）
6. 昼休憩
7. 個人演習①：テストケース表を作る
8. 休憩
9. 個人演習②：バグ票→差戻し→修正メモ（v+0.1）
10. 休憩
11. 復習：共有できる形に整形（できた範囲でOK）
12. 質問・コメント・感想の提出（指定スレッド）

1) 出席・当日選択カリキュラムの内容確認

【実施時間】

この時間にやること

1. 今日の目標（A〜E）を選ぶ（できた範囲でOK）
2. 対象（QA-45A/B/C）を1つ選ぶ
3. 注意点を1行で書く（例：期待結果を曖昧にしない／根拠を残す／流用禁止）

セルフ棚卸し（コピペ用）

【L45 セルフ棚卸し】
1) 今日の対象（ダミー）：
- QA-45A / QA-45B / QA-45C

2. 自分が弱い点（1つ）：

* （例：期待結果の具体化／状態の網羅／根拠の残し方／差戻しの具体性）

3. 今日の目標（1行）：

* 

2) 時間差相互評価（前日までの他者成果物に2件以上コメント）

【実施時間】

この時間にやること

• 前日までの他者成果物を2件選び、L45レビュー観点でコメントする
• 「直せそうか」より、再現できるか／期待結果が具体か／根拠があるかを見る

3) 休憩

【実施時間】

休憩：学習作業なし

4) 自分への受領レビュー確認・改善方針メモ（講師レビュー含む）

【実施時間】

改善方針メモ（コピペ用）

【L45 改善方針メモ】
受領した指摘の要点（最大3つ）：
1)
2)
3)

## 直す理由（期待結果が曖昧／状態抜け／根拠不足／差戻しが抽象 等）：

直し方（どこを改善する？）：

* テストケース（期待結果/観測ポイント）：
* バグレポート（再現/根拠/完了条件）：
* 差戻し基準（曖昧語排除）：
* 回帰テスト（追加）：

今日の最優先ルール（1行）：

* 

5) 当日選択カリキュラム実施：L45レクチャー本編（講師説明・質疑込み）

【実施時間】

ここからが「読む／聞く」パート

検収は「気づける人が偉い」ではなく、再現・期待結果・根拠が揃って誰でも回せることが目的です。
午後は、テストケース表→バグ票→差戻し→修正メモ（v+0.1）まで、訓練用ダミーで回します。

6) 昼休憩

【実施時間】

昼休憩：学習作業なし

7) 個人演習①：テストケース表を作る

【実施時間】

演習①のやり方（必須）

1. TRN-QA45 検収Specヘッダ（v0.1）を埋める（再現条件まで固定）
2. テストケース表を作る（最低6本、可能なら12本）
3. 各TCに「観測ポイント（ログ/DOM/状態）」を入れ、根拠が取れるようにする

提出用フォーマット（演習①：コピペ用／できた範囲でOK）

【L45 演習① 提出（できた範囲でOK）】
Spec-ID：TRN-QA45
対象（ダミー）：

## (1) 検収Specヘッダ（v0.1）：

(2) テストケース表（v0.1）：

* 

8) 休憩

【実施時間】

休憩：学習作業なし

9) 個人演習②：バグ票→差戻し→修正メモ（v+0.1）

【実施時間】

演習②のやり方（必須）

1. テストケースを実行し、NGが出たらバグレポート（v0.1）を1件作る
2. 差戻し指示（どこ/どう/完了条件）を書く
3. 修正（訓練用）をしたら、版管理メモ（v+0.1）を書き、回帰テストを1本追加する

提出用フォーマット（演習②：コピペ用／できた範囲でOK）

【L45 演習② 提出（できた範囲でOK）】
Spec-ID：TRN-QA45

## (1) バグレポート（v0.1：1件以上）：

## (2) 差戻し指示（どこ/どう/完了条件）：

## (3) 版管理メモ（v+0.1）：

(4) 追加した回帰テスト（TC-ID）：

* 

10) 休憩

【実施時間】

休憩：学習作業なし

11) 復習：共有できる形に整形（できた範囲でOK）

【実施時間】

最終チェック（コピペ用）

【L45 最終チェック】
- 訓練専用（流用禁止）が明記されている
- 実データ/実URL/実公開が混入していない
- テストケースに前提/手順/期待結果/観測ポイントがある
- 状態（error/timeout/canceled/empty等）の抜けがない
- バグ票に再現/期待/実際/根拠がある
- 差戻しが具体（どこ/どう/完了条件）
- 修正に回帰テストが紐づいている（最低1本追加）

12) 講師への質問・コメント・感想の提出（指定スレッド）

【実施時間】

提出先（参考）

EC事業部・文房具カフェ事業部：ChatWork の指定スレッド／準備室：Slack の指定スレッド

提出テンプレ（コピペ用）

【L45 提出（本人レポート）】

1. 今日の学習内容（要約：3行）

*
*
*

2. 今日進めたこと（TRAINING ONLY：流用禁止）

* 対象（QA-45A/B/C）：
* 検収Specヘッダ：
* テストケース表（本数）：
* バグレポート（件数）：
* 差戻し基準（気づき）：
* 版管理メモ（v+0.1）：
* 追加回帰テスト：

3. 一番工夫した点（1つ）
   -（例：期待結果を状態/表示/操作に分けた／根拠ログを必ず残した／差戻しを完了条件付きにした 等）
   理由：

*

4. 次に改善したい点（1つ）

*

## 理由：

5. 質問（最低1つ）

* 

ページ先頭へ戻る