---
title: 勉強会_新人向け“育つ”単一HTMLの設計 戦略・戦術・施策_20260622.pptx
tags:
author: [Yukiko](https://image.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/DEY49PWNJM.jpg?width=480
description: 勉強会_新人向け“育つ”単一HTMLの設計 戦略・戦術・施策_20260622.pptx by Yukiko
published: June 22, 26
canonical: https://image.docswell.com/s/yukiko_it/5MQ646-2026-06-22-094647
---
# Page. 1
STUDY SESSION ／ 新人エンジニア向け
現場あんしん工房 v2.8
やさしく学ぶ設計とコード
1ファイルのHTMLで“揉めない現場”を支える道具箱を、一緒に読み解こう
うさうさ研修工房 ／ v2.8 勉強会
# Page. 2
今日のゴール
1
何を作るかが分かる
2
要件定義〜テストの流れ
3
AIと音声の基本
失敗前提で守る
壊れにくい書き方
データ→描画の考え方
4
品質の守り方
node --check ＋ jsdom
# Page. 3
このツールは何？（ラーメン店でたとえる 🍜）
PoC＝小さく作って確かめる案件。お客さまと“後で揉めない”ためのコミュニケーションを助ける
道具箱です。
注文を受ける
（依頼）
→
味を確かめる
（ゴール）
→
作る順番
（進め方）
→
味見
（テスト）
→
この味で合ってる？
（確認）
# Page. 4
10個のタブ（機能の地図）
①
②
③
④
⑤
フェーズ＋危険サイン
指示受けログ
和風いいかえ
確認メモ
AI壁打ち（梅）
⑥
⑦
⑧
⑨
⑩
タスク・報連相
初日テンプレ
梅の間
うさうさの間
依頼書の間（桜）
# Page. 5
壊れにくい書き方：データ →描画
やること
•
•
•
•
データを持つ（例：tasks）
データを変える
renderで描き直す
描いた後にイベントを付け直す
renderBoard(){
board.innerHTML =
COLS.map(...).join('');
wireBoard();
}
# Page. 6
AIと音声は “失敗前提 ”で守る
音声
AI
•
•
•
•
api.anthropic.com に問い合わせ
textブロックだけ取り出す
嘘の出典を作らせない（systemで指示）
失敗はtry/catchで降格
•
•
•
確定＝濃い墨／途中＝薄字で色分け
非対応はボタン無効化＋テキスト誘導
自動停止タイマーでハング対策
# Page. 7
品質の守り方（テスト）
node --check
jsdom
JSの文法エラーを検出
ブラウザ無しで操作を再現
AIはモック
30 / 30 pass
固定応答でロジック検証
v2.8は全項目成功
正直に：実マイクの音声は自動テスト不可 → デモ機能で見え方を確認
# Page. 8
持ち帰る 4つ
•
•
•
•
データ→描画を徹底すると壊れにくい
画面に出す文字は必ず esc()
環境差は抽象化で隠す（Store）
外部依存（AI・音声）は失敗前提で守る