---
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/3EK9LG2VED.jpg?width=480
description: 勉強会_中堅向け“育つ”単一HTMLの設計 戦略・戦術・施策_20260622.pptx by Yukiko
published: June 22, 26
canonical: https://image.docswell.com/s/yukiko_it/KE1Y61-2026-06-22-094721
---
# Page. 1
STUDY SESSION ／ 中堅エンジニア向け
“育つ”単一HTMLの設計
戦略・戦術・施策
10機能・8千行規模を保守可能に保つ設計判断を言語化する
うさうさ研修工房 ／ v2.8 勉強会
# Page. 2
戦略：制約を武器に変える
S1
配布・実行コスト 0
単一HTML＝渡す＝デプロイ
S2
実行環境を一級市民に
window.storage / API中心＋退路
S3
AIは加法的に積む
障害が全体を止めない
# Page. 3
戦術：肥大とエントロピーに勝つ
集中snapshot×単方向描画
抽象化で環境差を封じる
差分管理を捨て整合性を取る
Store 4API／callClaude 一本化
会話の二層持ち
データ駆動拡張
history(API)とview(表示)を分離
増設をデータ追加に落とす
# Page. 4
アーキテクチャ（ 1枚図）
同意ゲート（初回必須・保存・履歴） → buildApp
UI層（①〜⑩）
•
•
•
render系＝データ→描画
snapshotState/applyState
扇子UI・琴の調律
基盤層
•
•
•
Store（artifact>local>memory）
callClaude（+web_search）
attachSpeech（色分け）
# Page. 5
施策：明日から効く具体策
P1
嘘をつかないを systemで担保
査読論文＋参照先＋捏造禁止／⑩は王道・王道以外
P2
機能間を動線でつなぐ
依頼書→④/⑦、AI回答→②/⑥
P3
失敗前提のフォールバック標準化
AI降格・音声無効化・memoryモード
P4
2層テスト＋正直な限界
node --check＋jsdom／音声はデモ代替
# Page. 6
テスト戦略と回帰
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+ ケース
# Page. 7
次の打ち手
•
•
•
•
AI会話をバージョン保存対象へ昇格
出典の構造化（著者/年/DOI→②/⑥へ機械可読）
Storage容量監視＋LRU退避（5MB）
チャンネル/テンプレの外部JSON化（非エンジニア編集）
中堅の腕＝派手な技術選定でなく、エントロピーを抑える設計判断