---
title: 勉強会_AIでジェネレーター_中堅向け_石黒友季子_20260524
tags:  #ai  
author: [smile_yukiko_it](https://www.docswell.com/user/smile_yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/8JDKG5K5EG.jpg?width=480
description: 勉強会_AIでジェネレーター_中堅向け_石黒友季子_20260524 by smile_yukiko_it
published: May 24, 26
canonical: https://www.docswell.com/s/smile_yukiko_it/KY8MM7-2026-05-24-094356
---
# Page. 1

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

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


# Page. 2

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

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


# Page. 3

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

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


# Page. 4

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

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


# Page. 5

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

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


# Page. 6

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

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


# Page. 7

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

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


# Page. 8

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

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


# Page. 9

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

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


# Page. 10

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

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


# Page. 11

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

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


# Page. 12

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

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


# Page. 13

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

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


# Page. 14

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

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


# Page. 15

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

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


# Page. 16

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

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