[{"data":1,"prerenderedAt":299},["ShallowReactive",2],{"content-/interactive-beppyo-design":3,"all-pages-for-dir":297,"og-image-/interactive-beppyo-design":298},{"id":4,"title":5,"body":6,"category":275,"description":276,"extension":277,"meta":278,"navigation":238,"path":279,"project_name":280,"published":281,"publishedAt":282,"seo":283,"stem":284,"tags":285,"todo":294,"unpublished":281,"updatedAt":295,"__hash__":296},"pages/2026-04/2026-04-22/interactive-beppyo-design.md","仕訳チェックボックスで別表四・五(一)が連動するインタラクティブアプリの設計",{"type":7,"value":8,"toc":260},"minimark",[9,13,17,20,25,28,51,54,58,61,66,69,75,78,82,85,88,91,95,103,108,111,114,164,167,171,178,181,184,187,198,206,209,213,223,226,253,256],[10,11,5],"h1",{"id":12},"仕訳チェックボックスで別表四五一が連動するインタラクティブアプリの設計",[14,15,16],"p",{},"参考書の解説コンテンツに「触れる別表」を載せたい。仕訳のチェックボックスをON/OFFすると、別表四と別表五(一)のSVGがリアルタイムで数字を組み替える。読者が「この仕訳を入れると別表のどこが動くのか」を自分の手で確かめられるアプリだ。",[14,18,19],{},"今日はこの設計をCodex（GPT-5.4）に4回レビューさせながら詰めた。実装は次のセッションに持ち越したが、計画書はほぼ固まった。",[21,22,24],"h2",{"id":23},"テストケース-法人税の中間納付と期末決算","テストケース: 法人税の中間納付と期末決算",[14,26,27],{},"題材は参考書の「損金経理パターン」。以下の仕訳をチェックボックスにする。",[29,30,31,39,45],"ol",{},[32,33,34,38],"li",{},[35,36,37],"strong",{},"中間納付の仕訳"," -- 法人税・住民税・事業税をそれぞれ「法人税等」で損金経理",[32,40,41,44],{},[35,42,43],{},"期末決算の仕訳"," -- 未払法人税等の計上（納税充当金への繰入）",[32,46,47,50],{},[35,48,49],{},"翌期首の洗替仕訳"," -- 繰越損益金の期末残高に影響",[14,52,53],{},"全チェックOFFが「何も仕訳を切っていない状態」、全チェックONが「教科書通りの完成形」。途中のON/OFFの組み合わせで別表の数字が連動して変わる。",[21,55,57],{"id":56},"codexレビュー4回の反復","Codexレビュー4回の反復",[14,59,60],{},"計画書を書いてはCodexに投げ、指摘を受けて直す。この反復を4回繰り返した。",[62,63,65],"h3",{"id":64},"第1回-洗替え方式の見落とし","第1回: 洗替え方式の見落とし",[14,67,68],{},"最初の計画書では「全チェックOFFなら別表五(一)の繰越損益金は期首と期末が同じ」と書いていた。Codexがすぐ突いてきた。",[70,71,72],"blockquote",{},[14,73,74],{},"全チェックOFFでも当期純利益が存在する限り、繰越損益金の期末は当期純利益分だけ増える。洗替え方式なので期首残高に加算される。",[14,76,77],{},"P/Lの当期純利益が別表五(一)に流れ込むルートを見落としていた。チェックボックスのON/OFFにかかわらず、繰越損益金の「増③」欄には当期純利益が常に入る。これを計画書に反映した。",[62,79,81],{"id":80},"第2回-中間納付の両建てロジック","第2回: 中間納付の両建てロジック",[14,83,84],{},"参考書のch7.vueに実装済みの損金経理パターンを改めてCodexに読ませた。ここで中間納付の処理が確認できた。",[14,86,87],{},"中間分の未納法人税等は別表五(一)で「増③」と「減②」に両建てされる。期首に前期未払分が残っているとき、中間納付でその一部を取り崩す動き。この両建ては直感に反するが、「発生」と「消滅」を両方記録することで期末残高が正しく出る仕組みだ。",[14,89,90],{},"計画書に「中間納付チェックON時の別表五(一)の挙動」として、この両建てパターンを明記した。",[62,92,94],{"id":93},"第3回-会計上の利益と課税所得の分離","第3回: 会計上の利益と課税所得の分離",[14,96,97,98,102],{},"ここが最大の修正だった。計画書では ",[99,100,101],"code",{},"preTaxProfit = 10,000"," を会計と税務の両方で使い回していた。Codexが矛盾を検出した。",[70,104,105],{},[14,106,107],{},"ch7の当期利益7,280に法人税等3,170を足すと10,450。preTaxProfitの10,000と合わない。",[14,109,110],{},"原因は会計上の税引前利益（10,450）と税務上の課税所得（10,000）を混同していたこと。損金経理した法人税等が損金不算入で加算されるため、両者はずれる。",[14,112,113],{},"計画書を修正して2つの変数に分離した。",[115,116,121],"pre",{"className":117,"code":118,"language":119,"meta":120,"style":120},"language-typescript shiki shiki-themes vitesse-light vitesse-light","const accountingPreTaxProfit = 10_450  // P/L上の税引前当期純利益\nconst taxableIncome = 10_000           // 別表四で算出する課税所得\n","typescript","",[99,122,123,148],{"__ignoreMap":120},[124,125,128,132,136,140,144],"span",{"class":126,"line":127},"line",1,[124,129,131],{"class":130},"stQ0i","const ",[124,133,135],{"class":134},"s4oTP","accountingPreTaxProfit",[124,137,139],{"class":138},"shFtX"," =",[124,141,143],{"class":142},"sM54T"," 10_450",[124,145,147],{"class":146},"sxvE3","  // P/L上の税引前当期純利益\n",[124,149,151,153,156,158,161],{"class":126,"line":150},2,[124,152,131],{"class":130},[124,154,155],{"class":134},"taxableIncome",[124,157,139],{"class":138},[124,159,160],{"class":142}," 10_000",[124,162,163],{"class":146},"           // 別表四で算出する課税所得\n",[14,165,166],{},"この分離によって、P/L側の数字（税引前利益 - 法人税等 = 当期純利益）と別表四側の数字（当期利益 + 加算 - 減算 = 所得金額）が両方とも整合するようになった。",[62,168,170],{"id":169},"第4回-事業税の繰越式修正","第4回: 事業税の繰越式修正",[14,172,173,174,177],{},"最後のレビューで ",[99,175,176],{},"priorJigyozei","（前期事業税）の繰越ロジックに指摘が入った。前期末の未払事業税が当期の損金算入額として別表四の減算欄に入るが、このとき別表五(一)の残高も連動して減る。計画書の数式で符号が逆転していた箇所を修正した。",[14,179,180],{},"細かい指摘だが、ここを間違えると全チェックON時の期末残高がずれる。最後に全パターンの数値を手計算で検算して、計画書を確定した。",[21,182,183],{"id":183},"設計のポイント",[62,185,186],{"id":186},"リアクティブ計算の構造",[14,188,189,190,193,194,197],{},"チェックボックスの状態を ",[99,191,192],{},"Ref\u003Cboolean>"," で持ち、",[99,195,196],{},"computed"," で別表の全セルを算出する。依存関係は一方向で、仕訳 → P/L → 別表四 → 別表五(一) の順に流れる。",[115,199,204],{"className":200,"code":202,"language":203},[201],"language-text","checkbox[] → computeAdjustments() → computeBeppyo4() → computeBeppyo5()\n","text",[99,205,202],{"__ignoreMap":120},[14,207,208],{},"純粋関数で計算ロジックを組み、Vueのリアクティビティに副作用を閉じ込める。テストは純粋関数だけを対象にすれば済む。",[62,210,212],{"id":211},"svgの動的レンダリング","SVGの動的レンダリング",[14,214,215,216,219,220,222],{},"別表のSVGはVueテンプレートで直接描画する。",[99,217,218],{},"\u003Ctext>"," 要素に ",[99,221,196],{}," の値をバインドすれば、チェックボックスのON/OFFで数字が即座に書き変わる。CSSトランジションで数字の変化にフェードをかけると「動いている」感覚が出る。",[21,224,225],{"id":225},"次のセッションでやること",[227,228,231,241,247],"ul",{"className":229},[230],"contains-task-list",[32,232,235,240],{"className":233},[234],"task-list-item",[236,237],"input",{"disabled":238,"type":239},true,"checkbox"," 計画書に基づいてVueコンポーネントを実装する",[32,242,244,246],{"className":243},[234],[236,245],{"disabled":238,"type":239}," 全チェックOFF / 中間のみON / 全ONの3パターンで数値を検算する",[32,248,250,252],{"className":249},[234],[236,251],{"disabled":238,"type":239}," SVGのレイアウトとアニメーションを調整する",[14,254,255],{},"計画書は固まった。Codex 4回のレビューで潰した矛盾は、実装段階で踏む地雷を先に踏んだことになる。明日は手を動かす番だ。",[257,258,259],"style",{},"html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":120,"searchDepth":150,"depth":150,"links":261},[262,263,270,274],{"id":23,"depth":150,"text":24},{"id":56,"depth":150,"text":57,"children":264},[265,267,268,269],{"id":64,"depth":266,"text":65},3,{"id":80,"depth":266,"text":81},{"id":93,"depth":266,"text":94},{"id":169,"depth":266,"text":170},{"id":183,"depth":150,"text":183,"children":271},[272,273],{"id":186,"depth":266,"text":186},{"id":211,"depth":266,"text":212},{"id":225,"depth":150,"text":225},"dev","法人税の中間納付と期末決算を題材に、仕訳のON/OFFでSVG別表が即座に変わるインタラクティブアプリを設計。Codexレビュー4回の反復で計画書を詰めた記録","md",{},"/interactive-beppyo-design","eurekapu-nuxt4",false,"2026-04-22T00:00:00.000Z",{"title":5,"description":276},"2026-04/2026-04-22/interactive-beppyo-design",[286,287,288,289,290,291,292,293],"別表四","別表五","インタラクティブ","Vue","SVG","Codex","法人税","設計","active",null,"l2NyGNa7T3g1ahmWDSrm66ApRHca0jlYvkTvhGOIohg",[],"https://log.eurekapu.com/og/blog/interactive-beppyo-design.png?v=2026-04-22T00%3A00%3A00.000Z&title=%E4%BB%95%E8%A8%B3%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%A7%E5%88%A5%E8%A1%A8%E5%9B%9B%E3%83%BB%E4%BA%94(%E4%B8%80)%E3%81%8C%E9%80%A3%E5%8B%95%E3%81%99%E3%82%8B%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E8%A8%AD%E8%A8%88&author=Kei%20Komatsu&sig=2a37778ecca858fb",1780786054339]