勉強会_新人向け“育つ”単一HTMLの設計 戦略・戦術・施策_20260622.pptx

STUDY SESSION ／ 新人エンジニア向け 現場あんしん工房 v2.8 やさしく学ぶ設計とコード 1ファイルのHTMLで“揉めない現場”を支える道具箱を、一緒に読み解こう うさうさ研修工房 ／ v2.8 勉強会

今日のゴール 1 何を作るかが分かる 2 要件定義〜テストの流れ 3 AIと音声の基本 失敗前提で守る 壊れにくい書き方 データ→描画の考え方 4 品質の守り方 node --check ＋ jsdom

このツールは何？（ラーメン店でたとえる 🍜） PoC＝小さく作って確かめる案件。お客さまと“後で揉めない”ためのコミュニケーションを助ける 道具箱です。 注文を受ける （依頼） → 味を確かめる （ゴール） → 作る順番 （進め方） → 味見 （テスト） → この味で合ってる？ （確認）

10個のタブ（機能の地図） ① ② ③ ④ ⑤ フェーズ＋危険サイン 指示受けログ 和風いいかえ 確認メモ AI壁打ち（梅） ⑥ ⑦ ⑧ ⑨ ⑩ タスク・報連相 初日テンプレ 梅の間 うさうさの間 依頼書の間（桜）

壊れにくい書き方：データ →描画 やること • • • • データを持つ（例：tasks） データを変える renderで描き直す 描いた後にイベントを付け直す renderBoard(){ board.innerHTML = COLS.map(...).join(''); wireBoard(); }

AIと音声は “失敗前提 ”で守る 音声 AI • • • • api.anthropic.com に問い合わせ textブロックだけ取り出す 嘘の出典を作らせない（systemで指示） 失敗はtry/catchで降格 • • • 確定＝濃い墨／途中＝薄字で色分け 非対応はボタン無効化＋テキスト誘導 自動停止タイマーでハング対策

品質の守り方（テスト） node --check jsdom JSの文法エラーを検出 ブラウザ無しで操作を再現 AIはモック 30 / 30 pass 固定応答でロジック検証 v2.8は全項目成功 正直に：実マイクの音声は自動テスト不可 → デモ機能で見え方を確認

持ち帰る 4つ • • • • データ→描画を徹底すると壊れにくい 画面に出す文字は必ず esc() 環境差は抽象化で隠す（Store） 外部依存（AI・音声）は失敗前提で守る