[{"data":1,"prerenderedAt":414},["ShallowReactive",2],{"content-/coding-principles-and-book-qa":3,"related-/coding-principles-and-book-qa":367,"all-pages-for-dir":412,"og-image-/coding-principles-and-book-qa":413},{"id":4,"title":5,"body":6,"category":347,"description":348,"extension":349,"meta":350,"navigation":351,"path":352,"project_name":353,"published":354,"publishedAt":355,"seo":356,"stem":357,"tags":358,"todo":364,"unpublished":354,"updatedAt":365,"__hash__":366},"pages/2026-06/2026-06-11/coding-principles-and-book-qa.md","蔵書DBの技術書を自分用に全編リライト——Miller Column学習コンテンツとQ&A図解化をClaude Codeで作った日",{"type":7,"value":8,"toc":333},"minimark",[9,14,18,23,26,39,50,54,57,64,71,75,78,81,84,95,98,102,105,112,119,122,125,128,143,146,150,153,159,163,169,189,201,204,207,286,293,296,327,330],[10,11,13],"h1",{"id":12},"蔵書dbの技術書を自分用に全編リライトするmiller-columnコンテンツとqa図解化","蔵書DBの技術書を自分用に全編リライトする——Miller ColumnコンテンツとQ&A図解化",[15,16,17],"p",{},"蔵書DB（Turso）に取り込んだ本を「検索して引く」だけでなく、「自分向けに書き直して読む」段階に進めた日。設計を扱った技術書の全編リライトコンテンツと、Q&A形式の投資実務書のまとめ直しコンテンツを、計画→Codexレビュー→別セッション実装の流れで2本立て続けに作った。",[19,20,22],"h2",{"id":21},"発端-dbの中のコードは画像だった","発端: DBの中のコードは画像だった",[15,24,25],{},"きっかけは「あの設計の本、取り込んだんでしたっけ？」という確認だった。Turso DBを調べてもらうと102チャンクで登録済み。ならばと、出版社が配布している公式サンプルコードのZIPをダウンロードして展開・整理してもらった。",[15,27,28,29,33,34,38],{},"ここで想定外の事実がわかる。DB内の本文チャンクを開くと、コードリストの部分には「リスト1.1 …」のような説明文と ",[30,31,32],"code",{},"\u003Cimg>"," タグだけが残っていた。OCRがコードブロックを図画像（PNG）として切り出していたため、",[35,36,37],"strong",{},"DBに入っているコードは検索もコピーもできない","。つまり今回ダウンロードしたサンプルコードが、コードの唯一の「正」のソースになる。リライト計画にはむしろ好都合だった。",[15,40,41,42,45,46,49],{},"ちなみにZIPの展開時、コピー先が ",[30,43,44],{},"src/data/code"," にずれて配置されるミスもあったが、リポジトリルートの ",[30,47,48],{},"data/code"," に移動させて整理を完了した。蔵書まわりは「取り込んで終わり」ではなく、こうした素材の置き場所の整備が地味に効いてくる。",[19,51,53],{"id":52},"リライトコンテンツの計画既存パターンに乗せる","リライトコンテンツの計画——既存パターンに乗せる",[15,55,56],{},"「中身を一個一個、自分向けに全部リライトしてほしい」というのが目的。表示形式は迷わなかった。mdx-playgroundには既にUIデザイン原則をMiller Columnレイアウト（左: 章、中央: トピック、右: 詳細）で見せるパターンがある。設計本の内容はGood/Bad対比が軸なので、この形にそのまま乗る。",[15,58,59,60,63],{},"そこで、Chrome DevToolsで既存ページの構造を確認させたうえで、mdx-playground向けの計画書を書いてもらい、Codexレビューにかけた。指摘4点（データモデルの出典表現、Shiki依存、検証手順、リライト方針）を反映して「致命的な指摘なし」まで通す。計画書は ",[30,61,62],{},"memo/2026-06-11/coding-principles-plan.md"," に保存した。",[15,65,66,67,70],{},"ここで一つ判断をした。",[35,68,69],{},"計画セッションと実装セッションを分ける","。計画づくりでコンテキストを使い切ったセッションに実装まで背負わせず、計画書をディスクに固定してから、mdx-playground側の新しいセッションで「計画書を読んで実行して」と一行だけ渡す。長いパイプラインはフェーズで区切るほうが安定する。",[19,72,74],{"id":73},"実装-13章62トピックを並列生成","実装: 13章62トピックを並列生成",[15,76,77],{},"実装セッションでは、まず骨組み（型定義・レジストリ・ページ2枚・prerenderルート）を作らせ、サンプルとして1章だけ生成して表示を確認した。Miller Columns、✕ Bad / ✓ Good の対比、Shikiのハイライト、note補足、参考文献表記。骨組みの段階で計画どおり描画されているのをスクリーンショットで見てから、残り12章の生成エージェントを並列で走らせた。",[15,79,80],{},"ここからは完了通知を待つ時間になる。「ch6完了（6トピック・7対比セット、題材は経費精算・消費税区分・源泉徴収・与信ランクなど会計ドメイン、型チェックpass）」「ch2・ch11完了（累計3/13章）」「ch3完了（4/13章）」……数分おきに通知が届き、進捗カウンタが13に向かって増えていく。コード例は書籍の転載ではなく、自分のドメインであるPythonの会計題材に全部置き換えさせている。リライトというより「自分の業務の文脈で原則を語り直させる」作業で、これが書籍コンテンツを手元に置く意味だと思っている。",[15,82,83],{},"全13章が揃ったところで検証フェーズ。章レジストリ経由で全章データを読み込む整合性テストを走らせ、構文・型の破綻がないことを確認する。途中、別ファイルで18件のテスト失敗が出てヒヤッとしたが、自分の変更とは無関係の既存失敗だと切り分けられた。ブラウザではハイドレーションエラーなし、左カラムでの章切り替えも問題なし。28ファイル・6001行追加でコミットした。13章62トピックの学習コンテンツが、計画書を渡してから半日かからず立ち上がった。",[15,85,86,87,90,91,94],{},"仕上げに公開範囲の整理。「これってインデックスからどうやってアクセスできますか」と聞くと、計画書の方針どおりトップナビからはリンクしておらず、アクセスはURL直打ちのみだという。それだと自分が使いづらい。トップページがNuxtLinkカードのハードコード構成であることを確認したうえで、「とりあえず非公開のやつ、消費税のやつと同じ扱いで」と指示した。既存の消費税パターン解説と同じ ",[30,88,89],{},"v-if=\"isDev\""," のdev限定カードがトップページに追加され、",[35,92,93],{},"dev環境でだけカードが見え、本番ビルドには出ない","状態になった。書籍由来の非公開コンテンツの置き場所として、この扱いが定着してきた。",[15,96,97],{},"途中、devサーバーがログ上のエラーなしに3回落ちる事象があった（exit 0xFFFFFFFF）。原因は掴めていないが、issueに記録だけ残して再起動し、先に進んだ。原因究明に時間を溶かすより、再現したときに辿れる記録を残しておくほうが今日は正しい。",[19,99,101],{"id":100},"_2本目-qa形式の投資実務書をまとめ直す","2本目: Q&A形式の投資実務書をまとめ直す",[15,103,104],{},"同じ日、蔵書のQ&A形式の投資実務書についても「Qに対する答えを1つのコンテンツとしてまとめ直してほしい」と頼んだ。既に作ってあった投資実務の統合解説コンテンツに加える形で、個別Q&Aとして読めるようにする。",[15,106,107,108,111],{},"ここでもまず計画書。本のQ&Aは80問あるはずだが、Q番号に欠番がないかをDBで確認させてから計画を書かせ、Codexレビューにかけた。指摘は「DBパスの表記が曖昧」の1件で、絶対パスに修正して完了。そして今回も",[35,109,110],{},"セッションを切り替えた","。計画セッションは蔵書DBの調査と計画書執筆でコンテキストが重くなっている。「セッション切り替えたいんで、切り替えたセッション先でのプロンプトを出して」と頼み、計画書のパスと前提を詰め込んだ復帰プロンプトを受け取って、新セッションに貼り付けるだけで実装が始まる体制にした。",[15,113,114,115,118],{},"実装セッションでは、まずDBから87チャンクを確認し、章別に底本を一時ディレクトリへダンプ。そこからサブエージェント4並列で執筆させ、最終的に全77問が揃った（欠番を除いた実数）。章レジストリ＋77問＋純粋関数を ",[30,116,117],{},"qaData.ts"," に結合し、SSR HTMLで77問・13章が出力されていることを数えて確認。執筆エージェントが報告してきた底本側のOCR乱れも、計画書に実装記録として残させた。",[15,120,121],{},"検証では小さな引っかかりが2つ。デバッグポート9222の応答が空に見えてポートの状態を確認し直す場面と、全テストスイートでog-meta-tagsテストが14件失敗する場面があった。後者は今回の変更が原因か既存の失敗かを切り分けさせ、シロと確認。デバッグ用に立てたtempプロファイルのChromeの残骸もきちんと片付けさせた。残骸の9222リスナーは後日のMCP接続を壊す前科があるので、ここは省略しない。まずは1ページの長い読み物として完成した。",[19,123,124],{"id":124},"カード分割と矢印キー移動",[15,126,127],{},"できあがった1ページを眺めて、注文を出した。「カードコンポーネントを章ごとに分けて、キーボードの矢印キーで左右に移動できるようにして」。長い1ページより、章で区切られていたほうが読む単位がはっきりする。",[15,129,130,131,134,135,138,139,142],{},"ページ構成は ",[30,132,133],{},"qa.vue"," 1枚から ",[30,136,137],{},"qa/index.vue","（章カード一覧のハブ）＋ ",[30,140,141],{},"qa/[chapter].vue","（章ページ）に組み替えられ、純粋関数も前後章の解決やパス生成に拡張された。←→キーで章を行き来できる。動作確認では、ログイン済みのChromeにデバッグ接続してキー送信まで実際に試させた。テストも章ナビゲーション対応に拡張して24件全パス。あわせて回答文の簡潔化と改行整理、各回答への「現在の見解」の付記も反映された。",[15,144,145],{},"コミットは「ステージングコミットして」の一声で、統合解説一式とQ&A機能の2つに機能単位で分けて記録された。44ファイルが1コミットに収まるあたり、1日の出力としてはかなりの量になっている。",[19,147,149],{"id":148},"文字の壁にsvg図解を入れる","文字の壁にSVG図解を入れる",[15,151,152],{},"章ページを開いてスクロールしていると、指が止まった。Qの答えと解説が文字の塊で延々と続き、読む気が削がれていく。そこで頼んだ。「Aの解説にSVGの図を追加してほしい。基本的にはすべてのQごとに1個チャートがあったほうが嬉しい」。",[15,154,155,158],{},[30,156,157],{},"svg-diagram"," スキルのルールを読ませた13のエージェントが、章ごとに分担して全77問に1枚ずつ図を描いた。フロー、対比、ツリー。グレー8段階の濃淡にマゼンタの強調という、スキルで決めてあるトーンに全部揃っている。章ごとに図の枚数が問数と一致するかを機械チェックさせ、表示も目視で確認した。開いてみると、文字の壁の合間に図が挟まり、ページを送る手が軽くなった。思わず「あー、いいですね。とてもわかりやすいですね」と声に出た。",[19,160,162],{"id":161},"スキル改善-図解は手段であって目的ではない","スキル改善: 図解は手段であって目的ではない",[15,164,165,166,168],{},"図の出来が良かったので、ふと聞いてみた。「これ、ドキュメントコミュニケーションのスキルって使ってるんですか？」。答えは「使っていない。ただし ",[30,167,157],{}," スキルの中に図解メッセージング設計原則として、そのエッセンスが組み込まれている」。",[15,170,171,172,174,175,177,178,181,182,184,185,188],{},"ここで手を打っておくことにした。図解はドキュメント・コミュニケーションの手段であって目的ではない。",[30,173,157],{}," だけを参照して図を描く場面でも、「図は手段」「1図1メッセージ」「3秒で主旨・20秒で構造が伝わるか」という論点が効いてほしい。選択肢は2つあった。",[30,176,157],{}," から ",[30,179,180],{},"doc-communication"," を参照させる方式と、エッセンスだけを ",[30,183,157],{}," に統合してスキルを少し長くする方式。参照方式は読み込み忘れのリスクが残るので、",[35,186,187],{},"エッセンス統合方式","を選んだ。明示的に2つのスキルを指定しなくても、図解が入る作業なら自動的に設計原則が乗る。",[15,190,191,192,194,195,197,198,200],{},"実作業としては、",[30,193,180],{}," の図表設計リファレンスを確認させたうえで、図解に効く論点を ",[30,196,157],{}," に書き込み、末尾に配置の規則性と出典・両スキルの役割分担のセクションを追加。",[30,199,180],{}," 側にも相互参照を1行入れて整合させた。",[15,202,203],{},"コンテンツを作っていて図の出来に満足した、で終わらせず、その場でスキルに焼き込む。次に図を描かせるときは、何も言わなくても同じ水準が出る。",[19,205,206],{"id":206},"今日できたもの",[208,209,210,226],"table",{},[211,212,213],"thead",{},[214,215,216,220,223],"tr",{},[217,218,219],"th",{},"成果物",[217,221,222],{},"規模",[217,224,225],{},"状態",[227,228,229,241,252,262,273],"tbody",{},[214,230,231,235,238],{},[232,233,234],"td",{},"設計原則のリライトコンテンツ（Miller Column）",[232,236,237],{},"13章62トピック・28ファイル6001行",[232,239,240],{},"コミット済み・dev限定",[214,242,243,246,249],{},[232,244,245],{},"トップページのdev限定カード",[232,247,248],{},"1カード追加",[232,250,251],{},"コミット済み・本番ビルド非対象",[214,253,254,257,260],{},[232,255,256],{},"Q&Aコンテンツ（章別カード＋矢印キー移動）",[232,258,259],{},"77問・13章・テスト24件pass",[232,261,240],{},[214,263,264,267,270],{},[232,265,266],{},"全Q&AへのSVG図解",[232,268,269],{},"77枚（1問1図）",[232,271,272],{},"枚数の機械チェック・目視確認済み",[214,274,275,280,283],{},[232,276,277,279],{},[30,278,157],{}," スキル改善",[232,281,282],{},"doc-communicationエッセンス統合＋相互参照",[232,284,285],{},"完了",[15,287,288,289,292],{},"どちらのコンテンツも ",[30,290,291],{},"pnpm generate"," は走らせていない。dev確認とユニットテストまでで止め、リリースはまた別の判断にする。",[19,294,295],{"id":295},"今日の学び",[297,298,299,306,309,312,315,321,324],"ul",{},[300,301,302,305],"li",{},[35,303,304],{},"計画と実装でセッションを分ける","と長いパイプラインが安定する。計画書をディスクに固定し、復帰プロンプトを書かせてから切り替えるのが手数最小だった。今日は2本とも同じ型で回した",[300,307,308],{},"計画は必ずCodexレビューを通してから実装に渡す。今日の指摘は「レプリカ未同期のままだと素材が欠ける」「DBパス表記が曖昧」など、実装後に踏むと痛い種類のものばかりだった",[300,310,311],{},"DBに取り込んだ書籍のコードブロックはOCRで図画像になっており、テキスト検索もコピーもできない。公式サンプルコードなど別の「正」のソースを確保する",[300,313,314],{},"書籍リライトのコード例は転載ではなく自分の業務ドメイン（会計）の題材に置き換えさせる。著作権の配慮と理解の定着が同時に取れる",[300,316,317,318,320],{},"書籍由来のコンテンツは ",[30,319,89],{}," のdev限定カードでトップに置くと、非公開のままアクセス導線を確保できる",[300,322,323],{},"解説コンテンツは1問1図を目安に図解を入れると読み進む速度が変わる。出来が良かったらその場でスキルへ昇格させ、次回以降の既定値にする",[300,325,326],{},"スキル間の依存は「参照」より「エッセンス統合」。単独で呼ばれたときに原則が抜け落ちる事故を構造的に防げる",[19,328,329],{"id":329},"おわりに",[15,331,332],{},"蔵書DBは作った当初「日本語で質問すると本棚が答える」道具だった。今日からはもう一段先、「本棚の本を自分の文脈で書き直して読む」道具になった。設計の原則を自分の会計題材で読み、Q&Aを図解付きの章カードでめくる。本を裁断してスキャンした時点では想像していなかった読み方が、計画書とサブエージェントの並列で1日に2本できあがった。次は読みながら気づいたことをコンテンツ側に書き戻す導線を考えたい。",{"title":334,"searchDepth":335,"depth":335,"links":336},"",2,[337,338,339,340,341,342,343,344,345,346],{"id":21,"depth":335,"text":22},{"id":52,"depth":335,"text":53},{"id":73,"depth":335,"text":74},{"id":100,"depth":335,"text":101},{"id":124,"depth":335,"text":124},{"id":148,"depth":335,"text":149},{"id":161,"depth":335,"text":162},{"id":206,"depth":335,"text":206},{"id":295,"depth":335,"text":295},{"id":329,"depth":335,"text":329},"dev","蔵書DBに取り込んだ設計系技術書を自分向けにリライトする計画を立て、別セッションで13章62トピックを並列生成。Q&A形式の投資実務書77問もカード分割・矢印キー移動・SVG図解付きで作り直した記録。","md",{},true,"/coding-principles-and-book-qa","mdx-playground",false,"2026-06-11T00:00:00.000Z",{"title":5,"description":348},"2026-06/2026-06-11/coding-principles-and-book-qa",[359,360,361,362,363],"Claude Code","蔵書DB","学習コンテンツ","SVG図解","スキル改善","memo",null,"41lOpsxTOJVtJxWuC-S3jbTv-ubhB6jmtwhKQOurpGk",[368,377,386,395,404],{"title":369,"description":370,"path":371,"tags":372,"publishedAt":376,"updatedAt":365},"一問一答をスライド形式UIに——矢印キーで77問を送る学習コンテンツ改善の記録","不動産投資の一問一答に画面いっぱいのスライドUIを追加し、レイアウト調整を重ねた記録。クイズの「×が○に化ける」表示バグ修正、ガイドへのSVG図解44点追加、音楽ゲームのメロディ改善も。","/qa-slide-ui-improvements",[361,373,374,362,375],"UI改善","Vue","クイズ","2026-06-12T00:00:00.000Z",{"title":378,"description":379,"path":380,"tags":381,"publishedAt":376,"updatedAt":365},"2026年6月12日の開発日記 - 書籍取り込みのバッチ化と登記簿コンテンツ全章展開","書籍OCR取り込みを/import-batchでバッチ化して複数セッション並列運用に移行。登記簿コンテンツを全8章に展開し、不動産投資シミュレーションWebアプリの実装も開始した一日。","/2026-06-12-diary",[382,383,384,385,361],"日記","書籍OCR","登記簿","不動産投資",{"title":387,"description":388,"path":389,"tags":390,"publishedAt":355,"updatedAt":365},"簿記学習ノートの演習を自作問題集ベースに再設計し、クラウド会計風の帳簿アプリを実装した日","自動生成した70問を捨てて検証済みの自作仕訳問題集に演習を置き換えた記録。長大ページの分割、学習方法ページの不整合解消、紙の帳簿前提の出題への違和感から仕訳帳・総勘定元帳・補助元帳をテーブルで再現する帳簿アプリも新規実装した。","/bookkeeping-notes-practice-redesign",[391,392,393,359,394],"簿記","教材設計","Nuxt","開発日記",{"title":396,"description":397,"path":398,"tags":399,"publishedAt":355,"updatedAt":365},"自作Chrome拡張の一括セキュリティレビューとGit履歴からの機密データ除去","クラウド会計ソフトA連携の自作Chrome拡張を対象に、脆弱性・バグの一括コードレビューと修正を実施。途中で顧客名入りファイルがGit履歴に残っていることが発覚し、履歴書き換えで除去するまでの記録。","/chrome-extension-security-review",[400,401,402,359,403],"Chrome拡張","セキュリティレビュー","Git履歴書き換え","機密情報管理",{"title":405,"description":406,"path":407,"tags":408,"publishedAt":355,"updatedAt":365},"スクショ1枚からSynthesia風ピアノロールWebアプリを作ってもらった日——88鍵Canvas＋Web Audio合成＋運指表示","「ピアノアプリ作ってもらいたいんですけど」と画像1枚を見せたところから、Synthesia風ピアノロール /piano-roll が完成するまでの記録。再生時計が止まる謎、devサーバーの古いコード配信、公開化で見つかったOGメタタグ不足14件の一括修正まで。","/piano-roll-web-app",[409,410,411,359,393],"ピアノロール","Web Audio","Canvas",[],"https://log.eurekapu.com/og/blog/coding-principles-and-book-qa.png?v=2026-06-11T00%3A00%3A00.000Z&title=%E8%94%B5%E6%9B%B8DB%E3%81%AE%E6%8A%80%E8%A1%93%E6%9B%B8%E3%82%92%E8%87%AA%E5%88%86%E7%94%A8%E3%81%AB%E5%85%A8%E7%B7%A8%E3%83%AA%E3%83%A9%E3%82%A4%E3%83%88%E2%80%94%E2%80%94Miller%20Column%E5%AD%A6%E7%BF%92%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%A8Q%26A%E5%9B%B3%E8%A7%A3%E5%8C%96%E3%82%92Claude%20Code%E3%81%A7%E4%BD%9C%E3%81%A3%E3%81%9F%E6%97%A5&author=Kei%20Komatsu&sig=b66baf9aa45bf06c",1781333880449]