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

STUDY SESSION ／ 中堅エンジニア向け “育つ”単一HTMLの設計 戦略・戦術・施策 10機能・8千行規模を保守可能に保つ設計判断を言語化する うさうさ研修工房 ／ v2.8 勉強会

戦略：制約を武器に変える S1 配布・実行コスト 0 単一HTML＝渡す＝デプロイ S2 実行環境を一級市民に window.storage / API中心＋退路 S3 AIは加法的に積む 障害が全体を止めない

戦術：肥大とエントロピーに勝つ 集中snapshot×単方向描画 抽象化で環境差を封じる 差分管理を捨て整合性を取る Store 4API／callClaude 一本化 会話の二層持ち データ駆動拡張 history(API)とview(表示)を分離 増設をデータ追加に落とす

アーキテクチャ（ 1枚図） 同意ゲート（初回必須・保存・履歴） → buildApp UI層（①〜⑩） • • • render系＝データ→描画 snapshotState/applyState 扇子UI・琴の調律 基盤層 • • • Store（artifact>local>memory） callClaude（+web_search） attachSpeech（色分け）

施策：明日から効く具体策 P1 嘘をつかないを systemで担保 査読論文＋参照先＋捏造禁止／⑩は王道・王道以外 P2 機能間を動線でつなぐ 依頼書→④/⑦、AI回答→②/⑥ P3 失敗前提のフォールバック標準化 AI降格・音声無効化・memoryモード P4 2層テスト＋正直な限界 node --check＋jsdom／音声はデモ代替

テスト戦略と回帰 2層検証 • • • • 静的：node --check 動的：jsdom（fetch/print/click stub） API引数までassert 音声はデモで代替検証 回帰（各版・全緑） v2.1:39 / v2.2:32 / v2.3:30 v2.4:33 / v2.5:29+9 / v2.6:35 v2.7:32 / v2.8:30 合計 240+ ケース

次の打ち手 • • • • AI会話をバージョン保存対象へ昇格 出典の構造化（著者/年/DOI→②/⑥へ機械可読） Storage容量監視＋LRU退避（5MB） チャンネル/テンプレの外部JSON化（非エンジニア編集） 中堅の腕＝派手な技術選定でなく、エントロピーを抑える設計判断