今月、Zennで拙著『Chrome拡張機能で学ぶ「エンジニアの思考法」—— YouTubeタイマー「制作クエスト」』を公開しました。
この記事では、公開したばかりのこの本を話題のAIツール「NotebookLM」に読み込ませてみた結果をシェアします。結論から言うと、著者の私自身が驚くほど的確に要点を捉えたインフォグラフィックが生成されました。今回は、特に素晴らしい出来栄えだった2枚の図解をご紹介します。
AIは著者の意図をどう視覚化したか
まず、最初に生成された1枚目のインフォグラフィックをご覧ください。
著者だからこそ言えることですが、本書の核となるメッセージと技術的な課題解決のプロセスが、非常にうまく1枚の図に描けています。
本書は、Chromeウェブストアで公開されている拡張機能「Watchtime Badge」を題材に、YouTubeタイマーをゼロから作る「制作クエスト」です。ただコードを書くだけではなく、数々の困難を乗り越えてプロダクトに仕上げていくストーリーを描いています。
図解の特筆すべき点は、私の書いた構成とよく対応しているところです。
- エンジニアの思考法（コアテーマ）の抽出： 図にある「1. Define(意志), 2. Decompose(分解), 3. Build(構築)」という3本柱は、本書の根底に流れるテーマそのものです。「なんとなく」を卒業し、自らの意志で課題を定義し、小さく分解して構築していくという、全編を通した制作ストーリーが視覚化されています。
- 技術的課題の解決： 図の中ほどにある「Delta Time for Precision（精度のための差分時間）」は、「05. なぜ時間はズレるのか？ ——
setIntervalの限界とDelta Time」の解説をうまく表現しています。 - APIの活用： 「Focus vs. Audible Logic」や「The Heartbeat for Survival」といった表現で、「07. よそ見は許さない」や「08. 不死鳥の如く」で解説した複雑な仕様（スリープ検知やService Workerの寿命対策）が分かりやすく図解されています。
参考までに、読み込ませた本書の目次はこちらです。
- はじめに：「なんとなく動く」を卒業して、仕組みから作る
- 動くタイマーを3分で作る —— Manifest V3とBadge表示
- 成果を形にする —— Popupでの履歴表示とCSVダウンロード
- 脱・ハードコード —— Options画面で監視サイトを自由化する
- なぜ時間はズレるのか？ ——
setIntervalの限界とDelta Time - 睡眠中の8時間が「労働」に化けるのを防ぐ —— スリープ検知と異常値の除外
- よそ見は許さない —— 厳密なフォーカス判定とAudible
- 不死鳥の如く —— Service Workerの寿命とAlarms API
- 世界へ飛び立つ —— 国際化（i18n）とパッケージング
- あとがき：コードを覚える必要はない
- 本書で使用している Chrome API 一覧
図解を生成したプロンプト設定
これらの図を生成するため、NotebookLMでは以下の設定で Generate を実行しました。
- Choose Language:
English - Choose Orientation:
Landscape（横長） - Level of Detail:
Standard
ここでポイントとなるのは、あえて言語を English（英語） に設定した点です。技術的な図解においては、英語で出力させたほうがテキストの収まりが良く、レイアウト全体がまとまりやすい傾向があるため、この設定を採用しました。
そして生成されたもう1枚の図解がこちらです。
1枚目が開発のプロセスを「旅程（クエスト）」として動的に描いているのに対し、この2枚目は本書の知識をカテゴリーごとに整理した「見取り図」のような構成になっています。 左側には思考のフレームワーク、右側にはシステム制約の解決策やAPIが静的に配置されており、同じプロンプトから「プロセス」と「構造」という全く異なる切り口の図解が生成される点にも驚かされます。
おわりに：エンジニアが本来集中すべきこと
もう、人間が図解に時間をかける必要はない。
NotebookLMが生成したこれらの画像を見て、心からそう思わされた瞬間でした。
AIがこれほど的確にコンテキストを理解し、複雑な技術概念を美しい図解に落とし込んでくれる時代です。私たちエンジニアは、資料作りや図解のレイアウト調整を手放し、「解決すべき課題の定義」や「本質的なシステム設計」といった、よりコアな知的作業に集中するべきなのです。