小学校算数のインタラクティブ学習コンテンツを作る
蔵書DB（Turso）に取り込んである算数の参考書を素材に、「子どもに教えられる算数」というインタラクティブ学習コンテンツを作った。トップページにカードを置き、一旦非公開のまま全12章・60セクションを構築。夜には小5の長男との会話がそのままコンテンツの1セクションになった。
構成案からフェーズ実装へ
最初の指示は「この書籍をオリジナルコンテンツに取り込みたい。トップページにカードコンポーネントを作って、章立てごとか、もっと良い編集案があればそれで」というふわっとしたもの。プランモードで蔵書DBの書籍構造と既存のトップページのカードパターンを調査させ、4分野×12章＋全章収録＋教具は厳選という方針に落ち着いた。
計画はCodexにレビューさせ、指摘4点（＋セクション見出しの扱い1点）をすべて反映してから承認。フェーズごとにコミット可能な区切りを設けた:
- Phase A（骨格）: 共通コンポーネント3つ（Section / GuideChapter / Hub）、12章分のページシェル。同型のプレースホルダはbashループで一括生成
- Phase B（計算編）: 教具の純粋ロジック3本→テスト24件pass→Vueコンポーネント3本。第1〜3章の図解と本文
- Phase C〜F: 数の性質編・図形編・割合編など残り9章。教具ロジック計8本、図解約20枚
書籍の本文は使わず、DBからは「教え方の要点」の要旨だけを把握して独自記述で執筆する方針。テストはSSOT整合性と章本文網羅の2本を先に書き、ロジックもテストファーストで進めた。展開図判定の教具では「11種すべてが成立、ひっかけ4種が不成立」をテストで検証している。
途中、樹形図ロジックのテストが1件落ちた。原因は許容誤差が丸め（1/6≒0.17）より厳しかったこと。仕様側を直して全フェーズ完了、テスト50件pass。
表示崩れの修正ループ
完成後にブラウザで眺めていたら、図解が崩れているページを見つけた。スクリーンショットを貼って「これ表示が崩れてるので直して」と投げる→修正→他の図解も全部撮って横展開チェック、というループを回した。
- 円周率の図解: ピンクの数式ボックスが円のキャプション「まわりの長さ＝円周」に重なって文字を隠していた
- 点対称の図解: 180度回転した平行四辺形が回転前と完全に重なってしまい、見せたい「S字」の配置になっていなかった。回転後の座標を明示して修正
合計4枚を直した。スクショを貼るだけで座標レベルの修正まで進むので、目視チェック係に徹すればいい。
小5の長男の説明がコンテンツになった
夜、小5の長男がいま小数の割り算を習っていると聞いて、「計算はできるけど何を表してるのかわからんよなぁ。1÷0.4とか、0.4で割るってどういうこと？」と振ってみた。返ってきた答えに手が止まった。
「それは1の中に0.4が《いくつ入るか》ってことだよ。2.5個入るでしょ？」
教えるつもりが教えてもらった。しかも作ったばかりのコンテンツの第3章（小数計算）の最終セクション「1より小さい数で割ると答えが大きくなる理由」が、まさに同じ筋（2÷0.4=5）を扱っていた。
そこで、長男の説明した「答えが半端になるケース」（1÷0.4=2.5）専用の図解を1枚追加し、本文に発展形として書き足した。途中devサーバーがビルド完了直後にexit 1で死ぬトラブルがあったが、ログを追って復旧。図解を撮影して確認し、コミットまで通した。家庭の会話が当日中にコンテンツへ反映される速度が、自前で教材を作る一番のうまみだと思う。
パンくずの一括追加と一覧性の改善
新ハブページを開いたら、ホームへ戻るパンくずリストが無いことに気づいた。調べると、ピアノロールのページなど他にも入っていないページが残っていた。既存のbuildBreadcrumbs実装と中間セグメント（guide等）の扱いを確認させ、4ページにまとめてBreadcrumbを追加。
合わせて、ハブページが2列レイアウトで一覧性に欠けていたので「もうちょっと工夫できないか」と注文し、レイアウトを改善した。
明日のToDoをmemoに固定
「明日でいいんですけど」と前置きして、積み残しをマークダウンに残させた。保存先は memo/2026-06-12/todo-oshieru-sansu-section-charts.md。
- ヘッダーレベル2のセクションごとに、ドキュメントコミュニケーション＋SVGダイアグラムのスキルで図解を入れる（無理に全部ではなく、入れられるところは必ず）
- 図形系セクションは静的SVGではなくインタラクティブ優先。参考実装として既存の多角形の外角ページと立方体の恒等式ページのパスを memo に明記
- 参考になるOSSのリサーチステップも追記済み
多角形の外角の和のように「触って動かせる」形にできる題材が図形編には多い。静的な図解で済ませず、既存のインタラクティブページと同じイメージで楽しくする方向に倒す。
分割コミットで締める
昼のセッションでは /commit で82ファイル・7,836行をステージし、並行セッションの別作業（tokibo等）が混ざった index.vue はoshieru-sansu分のハンクだけ（8行＋1行）を抜き出してステージした。その後「その他も意味がある単位で」と頼んで計10コミットに分割。最後に全ユニットテストを回し、17,207件すべてpassでクリーンに着地した。
夕方のセッションでも、memo追記やパンくず修正を含む59ファイルを5コミットに分割してプッシュ。機能単位で履歴が切れているので、後から「あの日何をやったか」がコミットログだけで追える。
学び
- 蔵書DBの書籍は本文転載ではなく「要旨の把握→独自記述」で教材化する。著作権面でも品質面でもこの順序が正しい
- スクショを貼って指摘→修正→横展開チェックのループは、図解の品質保証として手数が少ない。人間は画面の違和感を拾う係に徹する
- 子どもとの会話は教材の素材になる。「1の中に0.4がいくつ入るか」のような腹落ちする説明は、その日のうちにコンテンツへ入れてしまう
- 並行セッションでファイルが交錯するときは、ハンク単位のステージングで作業を分離できる