---
title: 【受講生用】SHIFT_AI勉強会_うさうさ開発フロアPRO_ソースコード読解.pptx
tags: 
author: [smile_yukiko_it](https://image.docswell.com/user/smile_yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/PJR98NKY79.jpg?width=480
description: 【受講生用】SHIFT_AI勉強会_うさうさ開発フロアPRO_ソースコード読解.pptx by smile_yukiko_it
published: June 13, 26
canonical: https://image.docswell.com/s/smile_yukiko_it/Z8NW99-2026-06-13-112453
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/PJR98NKY79.jpg)

【受講生用】
SHIFT AI 勉強会
単一HTMLで“設計書ジェネレーター”を読み
解く
— うさうさ開発フロア PRO のソースコードから学ぶ（v2.0.0 PRO）
講師：うさうさ先生 🐰🦺 面白きこともなき世を面白く


# Page. 2

![Page Image](https://bcdn.docswell.com/page/PEXQ8NL4JX.jpg)

今日のゴールと流れ
ゴール
“単一HTMLツール”の設計の型を、ソースから読み取れるようになる
題材
埋めるだけで要件定義書＋詳細設計書ができるジェネレーター
持ち帰り
自分のツールでも再現できる勘所（モデル駆動・書き出し・AI連携）
うさうさ開発フロア PRO ｜ SHIFT AI 勉強会
2 / 12


# Page. 3

![Page Image](https://bcdn.docswell.com/page/3EK9KNLPED.jpg)

このツールは何？
埋めるだけで「設計書」ができる
•
左フォームに入力 → 右に文書が即組み上がる
•
要件定義書 兼 詳細設計書（PART I〜III）
•
HTML 1枚・ゼロ依存・オフライン動作
•
29種のプリセット／書き出し9形式
•
AIは“任意”。無くても全機能動く
うさうさ開発フロア PRO ｜ SHIFT AI 勉強会
入力 → 設計書
“書く心理的ハードル”を
下げるための道具
3 / 12


# Page. 4

![Page Image](https://bcdn.docswell.com/page/L73WZV3475.jpg)

なぜ要件定義・設計？ 🍜 で考える
要件定義 = 注文票
基本設計 = 店の動線
詳細設計 = レシピ
何を・どれくらい・いつまでに欲しいか
厨房・カウンターをどう配置するか
誰が作っても同じ味になる手順
※このたとえは正確ではありません（入口の理解用）
注文票（要件）が曖昧だと、厨房（実装）が優秀でも違う料理が出てきます。
うさうさ開発フロア PRO ｜ SHIFT AI 勉強会
4 / 12


# Page. 5

![Page Image](https://bcdn.docswell.com/page/87DKR845JG.jpg)

全体アーキテクチャ：モデル駆動
入力で更新
入力フォーム
再描画
モデル M（状態1つ）
プレビュー
書き出し各形式
•
•
•
素のJavaScript・ライブラリ非依存（ビルドレス）
状態は「モデルM」1つに集約＝唯一の真実
イベント委譲で入力を受け、M更新→再描画
うさうさ開発フロア PRO ｜ SHIFT AI 勉強会
5 / 12


# Page. 6

![Page Image](https://bcdn.docswell.com/page/VJPKW8MDE8.jpg)

ソースの肝① モデル駆動レンダリング
// 入力イベントを #form 直下で委譲受信
onInput(e){ M[key] = e.target.value; renderDoc(); }
// モデルから文書・トレース・各形式を生成
toMarkdown(M); computeTrace(M); genDocx(M);
•
画面操作と書き出しが、同じ M を読むだけ＝ズレない
•
再描画は renderForm / renderDoc に一本化
うさうさ開発フロア PRO ｜ SHIFT AI 勉強会
6 / 12


# Page. 7

![Page Image](https://bcdn.docswell.com/page/2EVV8N9GEQ.jpg)

ソースの肝② トレーサビリティ
帯の色で“気づける”
FR ↔ テストの紐付けを判定
✓ 6件中6件カバー（緑）
computeTrace() が返す：
•
total（FR総数）
•
covered（紐付けあり）
•
uncovered（漏れ）
•
unknownRefs（存在しない参照）
うさうさ開発フロア PRO ｜ SHIFT AI 勉強会
△ 未カバー / 不正参照あり（黄）
レビューで一番見落とす“要件とテストのズレ”を、書き
ながら潰せる
7 / 12


# Page. 8

![Page Image](https://bcdn.docswell.com/page/57GL5K4DEL.jpg)

ソースの肝③ 採番ロジック
renumberFR(): 旧FR番号 → 新連番 をマップ化し、
テスト観点の「対応FR」も置換（未知の参照は保持）
revNext(): 末尾の数値を+1（v1.0→v1.1, v2.9→v2.10）
自動 / 手動をボタンで切替
振り直しでテスト参照も追従
追加で次番号が入る。手でも直せる
紐付けが壊れない＝トレーサビリティ維持
うさうさ開発フロア PRO ｜ SHIFT AI 勉強会
8 / 12


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4EQYZNGXJP.jpg)

ソースの肝④ 多形式書き出し＆AI連携
9形式に書き出し
AIは任意・送信先を限定
•
md / txt / csv（RFC4180・BOM）
•
送信先は api.anthropic.com のみ
•
html / 本物のdocx / xlsx
•
モデル claude-sonnet-4-6
•
JSON（schema usausa.reqdesign/v1）
•
鍵は端末のみ・出力に含めない
•
AI再現プロンプト・印刷/PDF
•
未設定でも全機能オフライン動作
うさうさ開発フロア PRO ｜ SHIFT AI 勉強会
9 / 12


# Page. 10

![Page Image](https://bcdn.docswell.com/page/KJ4W3G5271.jpg)

ハンズオン：さわってみよう
// ブラウザの開発者ツール（ Console）で
const S = window.__USAUSA_DEVFLOOR__;
S.applyPreset("artifact"); S.toMarkdown(); S.computeTrace();
1
2
3
4
プリセットを選ぶ
FRをGWTで埋める
対応FRでトレース帯を緑に
docx/AIプロンプトで書き出す
うさうさ開発フロア PRO ｜ SHIFT AI 勉強会
10 / 12


# Page. 11

![Page Image](https://bcdn.docswell.com/page/LE1Y1DWK7G.jpg)

設計のこだわり（再現のヒント）
ゼロ依存・オフライン
事実と所感を分ける
配布容易・監査容易。docx/xlsxのみ都度取得
※不正確ラベル・役職名・捏造statなし
版数は5箇所で統一
AIは任意・鍵は端末のみ
刻印漏れを防ぐ（内部/タイトル/バッジ/サブ
/edition）
無くても動く。送信先を限定
うさうさ開発フロア PRO ｜ SHIFT AI 勉強会
11 / 12


# Page. 12

![Page Image](https://bcdn.docswell.com/page/GEWG8Y6PJ2.jpg)

まとめ ＆ 次の一歩
•
状態は“モデル1つ”に集約する＝設計の背骨
•
画面・書き出し・AIは、同じモデルを読むだけ
•
要件とテストの紐付けを、書きながら可視化
•
次の一歩：自分の小さなツールで“M駆動”を試す
面白きこともなき世を面白く 🐰🦺 ｜ うさうさ先生