勉強会_AIでジェネレーター_中堅向け_石黒友季子_20260524

勉強会 / 中堅向け AIを相棒に、ツール群を 束ねて設計する ～ 単発ツールを「壊れにくく」統合し、AIで保守し続ける ～ 対象：単機能ツールは作れる、設計・保守の型を持ちたい中堅エンジニア 面白きこともなき世を面白く 石黒友季子

ORIENTATION 今日のゴールと前提 ゴール 前提（できている想定） 素のJS/HTMLで小さな道具は作れる • 複数ツールを1つに統合する設計を描ける AIに依頼してコードを得た経験がある • 壊れやすい所を“不変条件”に変えられる • AIにテストを層で回させられる 『分・形・完・格』は既知 ※未習なら新人編を先に。

PROBLEM あるある：単発ツールが増えて散らかる バラバラに配布 重複コード 保守が個人依存 どれが最新か分からない 似た処理が各ツールに散る 作った人しか直せない 「便利な道具が増えるほど散らかる」。これを設計で解く回です。

GOAL ゴール像：複数ツールを1つに束ねる 外殻（本棚）＝目次・切替・共通機能 ツールA ツールB ツールC 配布は1ファイル。共通機能は外殻に集約。各ツールは独立を保つ。 … N個

ARCHITECTURE 原則：iframe/srcdoc で“文書ごと”隔離 統合で必ず起きる干渉を、境界そのもので断つ CSS汚染 名前衝突 状態リーク スタイルが混ざる 同名関数がぶつかる 入力が漏れ出す 各ツールを iframe の srcdoc に丸ごと入れる → 文書が別＝window が別。 スタイル・名前空間・状態が境界の内側で閉じる。

CONVENTION 共通ユーティリティ層で“同じ書き味”に 全ツールで同じ名前・同じ責務の小関数を持つ v(id) … 入力を取得（trim付き） lines(id) … 入力を1行ずつ配列化（空行除く） esc(s) … 画面表示前のエスケープ setOut() … 出力欄へ結果を流し込む 30個あっても“1個分の知識”で読める。AIに頼むときも『この規約で』と渡せる。

AI ① 大きなタスクは“分解して”投げる 丸投げ 分解して投げる 「ツール30個を統合して」 ①外殻の骨組み →②1ツール埋め込み →③切替 → → 巨大すぎて検証も修正も困難 ④検証 各段で動作を確認しながら積む

AI ② 壊れを“不変条件”で防ぐ iframe = switchMode = タブ = 目次 「ツールを1個足したら、この5つの集合が一致するか」をAIに毎回チェックさせる 人もAIも漏らす。だが「集合の差分」なら機械的に検出できる＝壊れを設計で防ぐ。 = リサイズ

EXTEND ツール追加の“5点セット” ① 目次に項目追加 ② 切替にトグル追加 ③ タブ定義追加 ④ リサイズ配列に追加 ⑤ iframe本体を挿入 1セットで更新 → 直後に⑧の不変条件チェック。AIに手順ごと渡すと安全。

DATA データ境界を設計する（送信しない） 入力 加工(esc/整形) この外に出さない （外殻は通信ゼロ） 出力(readonly) 保存(ファイル) 外部送信は『明示的に足した時だけ』。既定で送らない設計が、安心して配れる前提。

TEST AIに“層で”テストを回させる ①単体 ②結合 ③ホワイト ④ブラック ⑤実描画 ⑥E2E ⑦監査 構文・部品 整合(不変条件) 内部ロジック 外から操作 ブラウザ 通し操作 依存・送信 AIに『この7工程で検証し、ログを出して、エラーは直して』と頼むと、検証が再現できる。

HONESTY 正直に切り分ける（中堅の責任） AIが『NG』と言った／『直した』と言った 鵜呑みにせず、原因を自分で切り分ける。 （NGがテストコード側の問題、ということも実際にある） AIの出力を最終確認するのは人間。中堅の価値はここに出る。

演習（30分） 既存2ツールを統合する設計を描く 1 統合する2ツールを選ぶ 5分 2 外殻の責務を書き出す（目次/切替/共通） 10分 3 5点セットで追加手順を書く 10分 4 不変条件チェック項目を1つ書く 5分

WORKSHEET 不変条件チェックリスト（自作） 自分の統合ツールで「追加時に必ず一致すべき集合」を書き出そう。 集合 ____________ が一致する（差分0） 集合 ____________ が一致する（差分0） 集合 ____________ が一致する（差分0） 集合 ____________ が一致する（差分0） 集合 ____________ が一致する（差分0）

REVIEW 後輩に渡すときのレビュー観点 独立しているか 各ツールが他に依存していないか 規約に沿うか 共通関数の命名・責務が揃っているか 送信境界は明示か 外部送信の有無が分かるか

中堅としての肝 「AIに任せる所」と「人が確かめる所」を 設計で分ける。 お疲れさまでした。面白きこともなき世を面白く