蔵書DBから財務DD学習コンテンツを自作する——解説とクイズをローカル限定で組み上げた記録

財務デューデリジェンス（財務DD）を体系的に学び直したくて、自分の蔵書データベースを素材にした学習コンテンツを作った。前日にTurso DB（book-knowledge-base）へ追加しておいた財務DDの専門書2冊から本文を取り出し、「財務DDとは何か」から始まる解説と38問のクイズに組み上げる。クラウドにはデプロイせず、ローカルの dev サーバーでだけ見られる自分専用の教材だ。

まず蔵書DBの中身を確認する

最初にやったのは、Turso DBのレプリカが入っているディレクトリから、前日に追加した財務DD関連の専門書2冊の情報を取り出してもらうことだった。Tursoスキル経由で問い合わせると、2冊とも説明・目次・チャンク数つきで登録済みであることが確認できた。SQLは自分では書かない。「昨日追加した財務DDの書籍を調べて」と日本語で頼めば、裏でDBを叩いて結果をまとめてくれる。

ローカル限定コンテンツとして設計する

mdx-playground のトップページには「テスト・デモ」という枠があり、ここに消費税経理処理パターンのカードのような、デプロイ対象外のローカル限定コンテンツを並べている。今回もこの枠にカードを1枚追加する方針にした。

参考にしたのは、別プロジェクトで作っていた解説＋クイズ形式のコンテンツ構成。「財務DDとは何か」という入口から始めて、書籍の論点を解説とクイズで往復する読み物コースを目指した。

計画書を書かせてCodexにレビューさせたところ、初回で致命的指摘を1件受けて計画を修正し、再レビューで承認をもらってから着手した。途中、Codexの設定ファイルで service_tier の値が現バージョンで無効というエラーが出て、issueを記録しつつ設定行を削除して回避する一幕もあった。

実装：チャンク取得からカード追加まで

実装はこの順で進めてもらった。

• Turso の chunks テーブルから両書籍の本文を論点別に取得
• クイズ38問の quizData.ts を生成（検証パス済み）
• 再利用可能なクイズカードコンポーネントを作成
• 解説本体（zaimu-dd系コンポーネント）を作成
• nuxt.config.ts の除外設定でデプロイ対象から外す
• トップページのテスト・デモ枠にカードを追加
• Vitest の整合性テストを作成

ここで一つ詰まった。3ページとも200が返るのに、トップページの新しいカードだけHTMLに出てこない。隣のカードは表示されているのに、だ。ファイルにはコードが入っているのにサーバーが古いモジュールを配信し続けていて、touch でHMRを強制しても直らない。原因はブラウザキャッシュではなく、Viteの SSRモジュールが古いまま残っていたことだった。issueを記録して dev サーバーを再起動したら、カードが現れた。

「これ表示って確認してくれてますか？」

実装完了の報告を受けたあと、ふと聞いてみた。「ごめん、これ表示って確認してくれてますか？」

返ってきた答えは白状だった。これまでの確認は curl でHTMLの中身を見ただけで、ブラウザでの見た目は一度も確認していなかったという。そこからChromeを起動させ、スクリーンショットで実際の表示を確認させた。あわせて解説を5章に分割し、ハブページを章カード5枚構成に作り替え、右側にスクロール追従の目次を付けてもらった。クイズの動作もブラウザ上でクリックして確かめ、最後にデバッグ用Chromeの後片付けとテスト再実行まで済ませた。

curlの200と「画面に出ている」は別物だ、という当たり前のことを改めて体に刻んだ。

「解説が少なすぎますね」

章分割が終わった画面を眺めて、今度は別の違和感を拾った。章カードを開いても、解説本文が数行で終わってしまう。クイズの問題数に対して読み物が薄すぎる。「解説がもっと増えてもいいと思う」と伝えた。

ここからの増強は並列で走らせた。各章の解説本文は、書籍ソースの全文に基づいて章ごとに5並列のエージェントで書き直し。あわせてSVG図解スキルをロードして、書籍の重要図解をSVGに起こすエージェントを3並列で起動した。

結果、解説は5章合計で約700字から約3.3万字へ増えた。47倍だ。書籍のキラーチャート6点もSVGとして各章に埋め込まれ、ブラウザのスクリーンショットで図の見た目まで確認してから完了報告を受けた。

なお、ソースが専門書である以上、ここで作った解説・クイズはあくまで私的な学習用だ。だからこそクラウドにはデプロイせず、ローカル限定の枠に置いている。

矢印キーで章を行き来できるようにする

3.3万字を読むとなると、章間の移動がマウス頼みでは煩わしい。最後に、左右の矢印キーで前後の章へ移動できるキーボードショートカットを追加してもらった。

既存のクイズコンテンツにキーボード操作の前例があったので、まずそれを確認させてから実装。ページャーの近くにショートカットのヒント表示も添えた。ブラウザで実際に矢印キーを押して動作確認させたところ、キーを連打すると遷移が競合する問題が見つかり、これも解消してもらった。解説側・クイズ側の両方で←→が効くことを確認し、ハブは解説5枚＋クイズ5枚の対称構成に落ち着いた。

今日の学び

• curl のステータスコードは表示確認ではない。「確認しました」の中身を問い直したら、ブラウザでの確認が一度もされていなかった。以後、表示系の変更はスクリーンショットまで求める
• dev サーバーの SSRモジュールは古いまま居座ることがある。touch でのHMR強制が効かないときは、キャッシュを疑う前にサーバー再起動
• 蔵書DBは「読む」だけでなく「教材を生成する」素材になる。書籍2冊 → 解説5章3.3万字＋クイズ38問＋SVG図6点、という変換が1日で回った
• 画面の違和感を拾うのは人間の仕事。解説の薄さも、カードが出ていないことも、画面を見て初めて気づいた。実行はAIに任せても、目で見る係は降りられない