L38：JS基礎（UIパターン）＋UI要件定義テンプレ（動き・状態・例外・アクセシビリティ）（TRAINING ONLY／流用禁止）

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

• このレッスンで作る「UI要件」「コード」「チェックリスト」「レビューコメント」等は訓練専用です。通常業務でそのまま使用することは禁止します。
• 就業中に本番用を作る場合は、訓練成果物をコピペして使わず、必要情報を取り直し、別途の検収（レビュー/承認）を経て作成してください。
• 実データ・個人情報・未公開情報は扱いません（ダミーのみ）。
• 本レッスンは実サイト改修・実投稿・実登録ではありません（仕様化と練習のみ）。

本レッスンでは、JavaScriptを「書ける」ことよりも、UIを“仕様（状態＋イベント＋例外＋アクセシビリティ）”として定義し、再現可能な最小実装に落とす練習をします。
ポイントは、UIの失敗の多くが「コード」ではなく要件の欠損（状態が決まってない／例外がない／操作が曖昧）で起きる、という前提に立つことです。

このページの使い方

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

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

• UIを状態（State）とイベント（Event）で説明できる
• UI要件をテンプレ（動き・状態・例外・アクセシビリティ）で書ける
• 基本UIパターン（Accordion / Modal / Tabs 等）を、最小のJSで再現できる（訓練用のダミーで）
• 仕様不足・例外不足を品質ゲート（差戻し）で止められる
• 訓練と通常業務が混ざらないよう、Handoff Memo（本番で新規作成すべき論点）を書ける

受講ルール（共通）

• 実データ禁止：顧客情報、注文情報、住所、連絡先、契約条件、未公開企画の具体、取引先名などは入力しない
• 訓練成果物の流用禁止：訓練で作った仕様・コード・テンプレ・チェックリストを、そのまま通常業務で使わない
• 通常業務をしない：訓練日は講義・演習・レビュー・理解度確認に専念する
• 命令系統の具体化をしない：役割は「実務担当」「レビュー担当」「承認担当」など抽象ロールで表現する
• 相互レビュー2件以上：前日までの他者成果物に2件以上コメント（本ページのレビュー観点を使用）

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

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

1. （A）UI要件テンプレ（v0.1）：動き/状態/例外/アクセシビリティまで埋める
2. （B）状態遷移表（v0.1）：最低1コンポーネント（Accordion/Modal/Tabsのどれか）
3. （C）最小JS実装（v0.1）：ダミーHTMLに対し、基本動作が再現できる
4. （D）品質ゲート（差戻し基準）：OK/差戻し/要相談の判定が迷わない
5. （E）Handoff Memo（v1.0）：本番で新規作成すべき論点（流用しないためのメモ）

JSの結論：UIは「状態＋イベント＋例外」で設計する

よくある失敗（コード以前の問題）

• 「押したら開く」しか決めてない → 閉じ方/複数開き/初期状態が未定義
• 例外がない → 要素が見つからない/IDが重複/操作不能で事故る
• アクセシビリティ未定義 → キーボード操作/フォーカスが破綻
• 本番要件が混入 → 訓練成果物の流用につながる

JSで押さえる最小セット（今日の範囲）

• DOM取得：document.querySelector / querySelectorAll
• イベント：addEventListener（click / keydown / toggle 等）
• 状態：open属性、aria-expanded、hidden、classList など
• 例外：要素がないなら「何もしない」/ 仕様不足なら「差戻し」

UIパターン（基本5つ：まずはここ）

UI要件定義テンプレ（v1.0：訓練専用）

コードを書く前に、最低限これを埋めます（動き・状態・例外・アクセシビリティが抜けると、後で全てが破綻します）。

【UI要件テンプレ（v1.0：TRAINING ONLY）】
UI-ID：
コンポーネント名（Accordion/Modal/Tabs 等）：
目的（1〜2行）：
適用範囲（やる/やらない）：
対象ページ（ダミー）：
利用者（想定：一般/社内/管理者 など ※ダミー）：

前提（禁止・安全）：
- 実データ/個人情報/未公開情報は扱わない
- 訓練成果物は流用禁止（本番は別途作成/検収）
- 外部ライブラリ/CDNは使わない（訓練は最小JSで）

要件（MUST）：
- 例）開閉ができる
- 例）初期状態が定義されている
- 例）閉じ方が最低2つ（ボタン/Escape 等）※Modalのとき
- 例）例外（要素欠損/重複）が定義されている
- 例）キーボード操作が成立する（最低限）

非要件（MUST NOT）：
- 実運用に接続するID/URL/実在ページ情報の埋め込み
- 解析タグ/計測コードの本番仕様
- 個人情報や未公開情報の入力

状態（State）：
- S0：初期（例：すべて閉じる／最初だけ開く 等）
- S1：開（open）
- S2：閉（closed）
- S3：無効（disabled）※必要なら
- S4：エラー（error）※必要なら

イベント（Event）：
- E1：クリック
- E2：Enter/Space
- E3：Escape（必要なら）
- E4：外側クリック（必要なら、許可/禁止を明記）

状態遷移（最小でOK）：
- S0 + E1 → S1（開く）
- S1 + E1 → S2（閉じる）
- S1 + E3 → S2（閉じる）※Modalなど
- 例外：対象要素が見つからない → 何もしない＋記録（差戻し対象）

アクセシビリティ（最低限）：
- キーボード操作：できる/できない（できないなら理由）
- フォーカス：開閉後どこに置くか（例：トリガーへ戻す）
- 読み上げ：見出し/ラベルが分かる（例：summary文言のルール）

検証（QAシナリオ：最低3つ）：
1)
2)
3)

品質ゲート（OK/差戻し/要相談）：
- OK：
- 差戻し：
- 要相談（停止）：

ダミー課題（1つ選べばOK）

TRN-UI38A（易）：FAQアコーディオン（単一open）

• 目的：FAQを折りたたみ、読みやすくする
• 仕様：常に「1つだけ」開ける（新しく開くと他は閉じる）
• 例外：要素が存在しない/0件 → 何もしない（記録）

TRN-UI38B（中）：注意モーダル（閉じ方2つ）

• 目的：「要相談（停止）」の注意を明示する（ダミー）
• 仕様：開く/閉じる、Escapeで閉じる、背景クリックは「禁止/許可」を明記
• 例外：閉じボタン欠損 → 差戻し

TRN-UI38C（中）：タブ切替（初期タブ固定）

• 目的：ページ内情報を「概要/仕様/FAQ」に切り替える（ダミー）
• 仕様：初期は概要、クリックで切替、切替後に見出しが読める

サンプル（訓練用）：Accordion（<details> + 最小JSで単一open）

※LMS上で実行する前提ではなく、ローカルのダミーHTMLで動作確認する想定です。

HTML（ダミー）

<section data-ui="accordion" aria-label="FAQ（ダミー）">
  <h2>FAQ（ダミー）</h2>

JS（単一open：最小）

<script>
(() => {
  "use strict";

// 例外：対象がなければ何もしない（＝壊さない）
const root = document.querySelector('[data-ui="accordion"]');
if (!root) return;

const items = Array.from(root.querySelectorAll('[data-acc-item]'));
if (items.length === 0) return;

// 仕様：常に1つだけ開く（開いたら他は閉じる）
items.forEach((d) => {
d.addEventListener("toggle", () => {
if (!d.open) return;
items.forEach((other) => {
if (other !== d) other.open = false;
});
});
});
})();

この実装で「やってないこと」（非要件の明確化）

• タブ移動・矢印キー操作の最適化（必要なら要件に追加）
• 開閉ログ送信（本番計測は訓練でやらない）
• デザイン（CSS）最適化（本レッスンは挙動と要件が主）

検証（QA）チェックリスト（最低セット）

• 初期状態は要件どおり（全部閉じる／最初だけ開く 等）
• クリックで意図した状態遷移になる（開く/閉じる/単一open）
• 例外：対象要素が0件でもエラーにならない（何もしない）
• 文言が断定/確約になっていない（ダミーでも同じ）
• キーボード操作が破綻しない（<details> は最低限担保）
• 仕様にない動作を勝手に足していない（推測での追加禁止）
• 外部ライブラリ/CDNに依存していない
• 実在情報（URL/ID/店舗/顧客/注文）が混入していない

品質ゲート（差戻し基準：v1.0）

例外表（v1.0：訓練用）

記録テンプレ（v1.0：項目定義のみ）

【L38 記録テンプレ（v1.0：TRAINING ONLY）】
記録ID：
日付：
UI-ID：
コンポーネント：
版：v0.1 / v0.2 ...
状態：DRAFT / REVIEW / FINAL（訓練内の状態）
作業者（抽象）：
レビュー担当（抽象）：

やったこと（要点）：

* UI要件テンプレ：作成/更新
* 状態遷移表：作成/更新
* 最小実装：作成/更新
* 検証：実施（シナリオ数）

判定（OK/差戻し/要相談）：
差戻し理由（どこ/どう/完了条件）：
要相談（停止）理由：

次アクション：

* 

Handoff Memo（本番で新規作成する論点：v1.0）

訓練成果物を流用しないために、本番で改めて作るものを明文化します（このメモ自体は訓練用）。

【L38 Handoff Memo（v1.0：本番で新規作成）】
対象（本番の対象はここでは書かない／抽象で）：
- 例：ECの商品ページUI／カフェ告知ページUI など（抽象）

本番で取り直す情報：

* 実ページ構造（最新のHTML）
* 実要件（関係者合意）
* 実アクセシビリティ要件（対象/ガイド）
* 実検収観点（承認者/期限/基準）

本番で再設計すべき点：

* 状態の確定（単一open/複数open等）
* エラー/例外の扱い（要素欠損/多言語等）
* 計測（必要なら社内方針で）

リスク：

* 訓練成果物の流用（コピペ）をしない
* 実URL/実ID/実データを訓練側に持ち込まない

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

1) UI要件（状態＋イベント＋例外＋A11y）を埋める

【L38 プロンプト①：UI要件（v0.1）】

前提（安全）：

* 教育訓練用のダミー。実データ・個人情報・未公開情報・実URL・実ページ構造は扱わない。
* 訓練成果物は流用禁止。本番で使う場合は別途作成/検収。

入力（選んだダミー課題）：

* TRN-UI38A / TRN-UI38B / TRN-UI38C のどれか

出力形式（必須）：

* UI要件テンプレ（v0.1）を埋める
* 状態（State）とイベント（Event）と状態遷移（最小）を明記
* 例外（最低2つ）と、要相談（停止）条件を入れる

2) 最小実装（HTML/JS）を作る（訓練用のダミー）

【L38 プロンプト②：最小実装（v0.1）】

前提：

* 外部ライブラリなし（Vanilla JS）。
* 仕様にない動作を勝手に追加しない（推測禁止）。
* 例外：対象要素がない場合は何もしない。

入力：

* UI要件テンプレ（v0.1）

出力形式：

1. HTML（ダミー）
2. JS（最小）
3. QAシナリオ（最低3つ）

3) 自己レビュー（差戻し観点で）

【L38 プロンプト③：自己レビュー（差戻し）】

入力：

* UI要件テンプレ（v0.1）
* HTML/JS（v0.1）

出力：

* 差戻しポイントTop5（どこ/どう/完了条件で）
* 例外不足Top3
* A11y不足Top3
* v0.2で直す変更点（差分）

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

• 訓練専用の担保：流用禁止が明記され、実在情報が混入していないか
• 要件の完成度：状態/イベント/例外/A11yが最低限揃っているか
• 推測での追加がない：仕様にない挙動を勝手に足していないか
• 例外が運用できる：欠損時の動きが決まっているか（壊さない/止める）
• 品質ゲート：OK/差戻し/要相談が迷わないか

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

【L38 相互レビューコメント】
対象（UI要件 / 状態遷移 / 実装 / QA / Handoff Memo）：
版：

1. 良い点（1つ）：

*

2. 要件（状態/イベント/例外/A11y）は揃ってる？

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

3. 仕様外の追加（推測）はない？

* OK / 要改善
  怪しい点（1つ）：
*

4. 品質ゲート（差戻し基準）は明確？

* OK / 要改善
  曖昧な基準（1つ）：
*

5. 次の一手（v+0.1で直すなら）：

* 

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

目次（クリックで移動）

1. 出席・当日選択カリキュラムの内容確認
2. 時間差相互評価（2件以上コメント）
3. 休憩
4. 自分への受領レビュー確認・改善方針メモ
5. L38 レクチャー本編（講師説明・質疑込み）
6. 昼休憩
7. 個人演習①：UI要件（状態＋イベント＋例外＋A11y）
8. 休憩
9. 個人演習②：最小実装＋QA＋品質ゲート＋Handoff Memo
10. 休憩
11. 復習：共有できる形に整形（できた範囲でOK）
12. 質問・コメント・感想の提出（指定スレッド）

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

【実施時間】

この時間にやること

1. 今日の目標（A〜E）を選ぶ（できた範囲でOK）
2. ダミー課題（TRN-UI38A/B/C）を1つ選ぶ
3. 自分の注意点を1行で書く（例：状態を必ず決める／推測で足さない／例外を先に書く）

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

【L38 セルフ棚卸し】
1) 今日選ぶダミー課題：
- TRN-UI38A / TRN-UI38B / TRN-UI38C

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

* （例：状態定義／例外／A11y／検証の抜け）

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

* 

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

【実施時間】

この時間にやること

• 前日までの他者成果物を2件選び、L38レビュー観点でコメントする
• 「コードが動くか」より、要件（状態/例外/A11y）が揃っているかを見る

3) 休憩

【実施時間】

休憩：学習作業なし

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

【実施時間】

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

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

## 直す理由（状態未定義／例外不足／A11y不足／推測で追加 等）：

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

* UI要件テンプレ：
* 状態遷移：
* 最小実装：
* QA：
* 品質ゲート：
* Handoff Memo：

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

* 

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

【実施時間】

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

午後は、選んだダミー課題で「要件→最小実装→検証→差戻し」まで回します。
目的は“実装”ではなく、仕様の欠損を減らす設計力を身につけることです。

6) 昼休憩

【実施時間】

昼休憩：学習作業なし

7) 個人演習①：UI要件（状態＋イベント＋例外＋A11y）

【実施時間】

演習①のやり方（必須）

1. 選んだ課題（TRN-UI38A/B/C）でUI要件テンプレ（v0.1）を埋める
2. 状態（State）とイベント（Event）と状態遷移（最小）を書く
3. 例外を最低2つ、要相談（停止）を1つ以上入れる

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

【L38 演習① 提出（できた範囲でOK）】
ダミー課題：
UI-ID：

## (1) UI要件テンプレ（v0.1）：

(2) 状態遷移（最小）：

* 

8) 休憩

【実施時間】

休憩：学習作業なし

9) 個人演習②：最小実装＋QA＋品質ゲート＋Handoff Memo

【実施時間】

演習②のやり方（必須）

1. 要件に従って最小実装（v0.1）を書く（外部ライブラリなし）
2. QAシナリオ最低3つで検証する（ダミー）
3. 品質ゲートで自己判定し、差戻しならv0.2に直す
4. 最後にHandoff Memo（本番で新規作成する論点）を書く

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

【L38 演習② 提出（できた範囲でOK）】
UI-ID：

## (1) 最小実装（HTML/JS：v0.1）：

(2) QAシナリオ＋結果（最低3つ）：
1)
2)
3)

(3) 品質ゲート判定（OK/差戻し/要相談）：

* 根拠：

(4) Handoff Memo（v1.0）：

* 

10) 休憩

【実施時間】

休憩：学習作業なし

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

【実施時間】

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

【L38 最終チェック】
- 訓練専用（流用禁止）が明記されている
- UI要件テンプレに 状態/イベント/例外/A11y がある
- 仕様外の追加（推測）がない
- 例外時に壊れない（対象なしなら何もしない等）
- QAシナリオが最低3つある
- 実データ/個人情報/実在URLが混入していない

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

【実施時間】

提出先（参考）

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

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

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

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

*
*
*

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

* 選んだ課題（TRN-UI38A/B/C）：
* UI要件テンプレ：作成/更新（v0.1→v0.2 など）：
* 状態遷移：作成/更新：
* 最小実装（HTML/JS）：作成/更新：
* QA：実施（シナリオ数）：
* 品質ゲート判定（OK/差戻し/要相談）：
* Handoff Memo：作成/更新：

3. 一番工夫した点（1つ）
   -（例：状態を先に固定した／例外を先に書いた／仕様外の推測を止めた 等）
   理由：

*

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

*

## 理由：

5. 質問（最低1つ）

* 

ページ先頭へ戻る