---
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/47ZL8XY6J3.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/53J79L-2026-06-13-112632
---
# Page. 1

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

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


# Page. 2

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

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


# Page. 3

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

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


# Page. 4

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

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


# Page. 5

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

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


# Page. 6

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

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


# Page. 7

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

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


# Page. 8

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

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4JQYZNGR7P.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 / 14


# Page. 10

![Page Image](https://bcdn.docswell.com/page/K74W3G5QE1.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 / 14


# Page. 11

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

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


# Page. 12

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

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


# Page. 13

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

進行タイムテーブル（目安 45分）
経過
分
内容
0:00
5
導入・ゴール共有（S1-2）
0:05
6
ツール概要・なぜ設計（S3-4）
0:11
10
アーキ＆ソースの肝①〜④（S5-9）
0:21
12
ハンズオン（S10）
0:33
6
設計の原則（S11）
0:39
4
まとめ・宿題（S12）
0:43
2
Q&A
※ ハンズオンが押したら S10 の手順③④はデモで巻き取り、S11 を短縮。
うさうさ開発フロア PRO ｜ SHIFT AI 勉強会
13 / 14


# Page. 14

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

想定Q&A（講師用カンペ）
Q. AIが無いと使えない？ A. いいえ。全機能オフライン動作。AIは下書き支援の“任意”。
Q. なぜReact等を使わない？ A. 学習用・配布容易・ゼロ依存が狙い。考え方（M駆動）は同じ。
Q. 対応FRはどう書く？ A. テスト観点に FR-01,02 のように番号を書くと紐づく。
Q. データはどこに保存？ A. すべて端末のブラウザ内（localStorage/メモリ）。外部送信なし。
Q. docx/xlsxはなぜオンライン時のみ？ A. 本物のOOXML生成にライブラリを都度取得するため。
うさうさ開発フロア PRO ｜ SHIFT AI 勉強会
14 / 14