【講師用】SHIFT_AI勉強会_うさうさ開発フロアPRO_ソースコード読解.pptx

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

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

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

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

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

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

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

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

ソースの肝④ 多形式書き出し＆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

ハンズオン：さわってみよう // ブラウザの開発者ツール（ 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

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

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

進行タイムテーブル（目安 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

想定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