[{"data":1,"prerenderedAt":385},["ShallowReactive",2],{"content-/2026-04-30-consolidated-worksheet-html-prototype":3,"all-pages-for-dir":383,"og-image-/2026-04-30-consolidated-worksheet-html-prototype":384},{"id":4,"title":5,"body":6,"category":365,"description":366,"extension":367,"meta":368,"navigation":324,"path":369,"project_name":370,"published":371,"publishedAt":372,"seo":373,"stem":374,"tags":375,"todo":381,"updatedAt":381,"__hash__":382},"pages/2026-04/2026-04-30/consolidated-worksheet-html-prototype.md","連結精算表のExcel風HTMLプロトタイプを試作する",{"type":7,"value":8,"toc":352},"minimark",[9,13,18,26,29,45,48,52,55,75,78,82,85,91,98,101,112,115,118,121,132,139,142,145,164,229,232,235,238,241,245,248,253,260,267,285,288,291,298,301,304,310,313,348],[10,11,12],"p",{},"朝、ゲシュタルトの法則ページのGIF置換から手をつけたら、連結会計のプロトタイプ作成まで一気に転がっていった。途中で何度も方針を捨てては作り直した一日だった。",[14,15,17],"h2",{"id":16},"scrollarticle-にexcel風スタイルを足す","ScrollArticle にExcel風スタイルを足す",[10,19,20,21,25],{},"「SVGの右側に置いてあるExcelの図、あれをHTMLでそのまま再現してほしい」というユーザー指示が起点だった。",[22,23,24],"code",{},"cfws-excel-to-html"," スキルの xlsx_to_html.py を読み直し、既存パターンを ScrollArticle.vue に持ち込む。",[10,27,28],{},"まずは近接(Proximity)の例を1つだけテーブル化してブラウザで開いた。Yu Gothic UI と細い罫線、薄い背景色で並んだ画面を見たユーザーが「むちゃくちゃいいじゃないですか」と返してきたあと、矢継ぎ早にルール追加が飛んでくる。",[30,31,32,36,39,42],"ul",{},[33,34,35],"li",{},"A列スペーサー(列幅10px、データはB列から開始)",[33,37,38],{},"1行目もスペーサー(印刷時のタイトル領域を再現)",[33,40,41],{},"列ヘッダー(A/B/C...)の縦線だけ残し、データセルの縦罫線は全消去",[33,43,44],{},"増減列の右に1列スペーサー(F列)を挿入",[10,46,47],{},"「印刷時に見えるようにシートのタイトル行を空けてある」という運用ルールが、HTMLテーブル側にも移植されていく。指示通りに反映するたび、画面が「Excelで作ったやつをスクショしました」みたいな見た目に寄っていく。",[14,49,51],{"id":50},"ゲシュタルト6法則を6個ぜんぶhtmlテーブル化","ゲシュタルト6法則を6個ぜんぶHTMLテーブル化",[10,53,54],{},"近接が固まったあと、残り5つも一気に書いた。",[30,56,57,60,63,66,69,72],{},[33,58,59],{},"近接 → PLの空白行/インデントで階層を表現",[33,61,62],{},"類似 → 貸借対照表でグレー濃淡(GL1/GL2/GL3)の階層",[33,64,65],{},"接続 → 表示｜集計｜入力の3シート横並び",[33,67,68],{},"囲み → 3指標グループの背景色テーブル",[33,70,71],{},"閉合 → 罫線最小限のPL",[33,73,74],{},"連続性 → 桁が違う金額の右揃え",[10,76,77],{},"途中で「四半期色分けはアンチパターン(色で意味のない区切りを表現している)」と気づき、類似の例を貸借対照表のグレー階層に置き換えた。色を使う前に「何を伝えたいか」を先に決めるべきという当たり前の話を、自分で書いたサンプルから学び直した形だった。",[14,79,81],{"id":80},"連結精算表のプロトタイプシートタブ案を捨てる","連結精算表のプロトタイプ:シートタブ案を捨てる",[10,83,84],{},"午前中の仕上がりに乗って、ユーザーが「Excel風のまま連結精算表を作ってほしい」と言ってきた。最初は素直にシートタブ + 数字クリックで該当仕訳シートにジャンプ、という構造で組み上げた。Chrome DevTools でプレビューを見せた直後にユーザーから却下が飛んできた。",[86,87,88],"blockquote",{},[10,89,90],{},"ブラウザバックが効かないから、シートをクリックしないと連結ワークシートに戻れない",[10,92,93,94,97],{},"たしかに ",[22,95,96],{},"\u003Ca href>"," ではなくJSでシート切り替えしているので、戻るボタンが履歴に残らない。仕様としては破綻していた。Esc キーで閉じるオーバーレイモーダル方式に作り直す。シートタブを撤廃し、メイン領域には連結ワークシートだけを常時表示。数字をクリックするとモーダルが中央に出て、Esc で閉じる。ブラウザ履歴を汚さず、Excelで言うところの「ハイパーリンクで仕訳シートを別ウィンドウで開く」感覚に寄った。",[10,99,100],{},"ここからモーダル側の作り込みに入る。",[30,102,103,106,109],{},[33,104,105],{},"連結修正仕訳を1つの仕訳ブロックではなく、3列に分解(個別仕訳ごとに独立表示)",[33,107,108],{},"「取引の前提」「実質的な影響」を本文ではなくラベルピルとしてタイトル化",[33,110,111],{},"取引の前提タイトルを13.5px → 16px に拡大、行間も1.8に",[10,113,114],{},"「タイトルなのに本文に混ざっていると毎回読まされる」という指摘が、ラベル分離の決め手になった。レイアウトと内容の役割を分けるという話で、Excelの「行の役割」と地続きの考え方だ。",[14,116,117],{"id":117},"設例3つを網羅した拡張版に発展させる",[10,119,120],{},"書籍のスクショを9枚まとめて貼り付けて「これを1つのHTMLで網羅してほしい」とユーザーが投げてきた。設例I-2-1〜I-2-3を切替タブで持ちつつ、各設例ごとに前提条件・連結精算表・仕訳オーバーレイを揃えた拡張版に発展させる。",[10,122,123,124,127,128,131],{},"ここで補助科目あり版の連結精算表を新規追加した。書籍の連結精算表だけでは「どの売掛金がどう消えるのか」が見えにくい。",[22,125,126],{},"売掛金_外部向け"," ",[22,129,130],{},"売掛金_内部向け"," のアンダースコア記法でA社・P社の補助科目を分けて記載すると、内部向けのレコードが連結修正でゼロになる流れが視覚的に追えるようになった。実務でこの粒度で精算表を書くことはないと思うが、教材としては腑に落ちる。",[10,133,134,135,138],{},"合計行(",[22,136,137],{},"(売掛金 合計)"," のイタリック行)はユーザー指示で全削除した。「最終的には外部向けしか残らないんだから、合計を見せても意味がない」という判断で、行を詰めて見通しを良くした。",[14,140,141],{"id":141},"セルクリックでモーダル内をオレンジハイライト",[10,143,144],{},"ここから先はWebならではのUI実装に踏み込んだ。",[10,146,147,148,151,152,155,156,159,160,163],{},"連結精算表のセルをクリックすると仕訳モーダルが開くまではすでに動いている。「モーダル側の対応する科目を、さらにオレンジでハイライトしてほしい」という追加要望が来た。",[22,149,150],{},"\u003Cspan class=\"xref\">"," に ",[22,153,154],{},"data-highlight=\"売掛金:200\""," のような属性を持たせ、JSで ",[22,157,158],{},"openOverlay"," 時にモーダル内の該当セルへ ",[22,161,162],{},".highlight"," クラスを付与する仕組みに変えた。",[165,166,171],"pre",{"className":167,"code":168,"language":169,"meta":170,"style":170},"language-html shiki shiki-themes vitesse-light vitesse-light","\u003Cspan class=\"xref\" data-highlight=\"売掛金:200\">200\u003C/span>\n","html","",[22,172,173],{"__ignoreMap":170},[174,175,178,182,185,189,192,196,200,202,205,207,209,212,214,217,221,224,226],"span",{"class":176,"line":177},"line",1,[174,179,181],{"class":180},"shFtX","\u003C",[174,183,174],{"class":184},"sHkkW",[174,186,188],{"class":187},"s4oTP"," class",[174,190,191],{"class":180},"=",[174,193,195],{"class":194},"sMJiu","\"",[174,197,199],{"class":198},"sdGka","xref",[174,201,195],{"class":194},[174,203,204],{"class":187}," data-highlight",[174,206,191],{"class":180},[174,208,195],{"class":194},[174,210,211],{"class":198},"売掛金:200",[174,213,195],{"class":194},[174,215,216],{"class":180},">",[174,218,220],{"class":219},"sG7-3","200",[174,222,223],{"class":180},"\u003C/",[174,225,174],{"class":184},[174,227,228],{"class":180},">\n",[10,230,231],{},"クリックして確認した。売掛金200のセルからモーダルを開くと、貸方の「売掛金」と金額「200」だけがオレンジに光る。買掛金1,000でも借方側がきちんと光った。Excelの数式トレース矢印より直感的で、しかもブラウザだから右から左にスクロールしながら見比べられる。",[14,233,234],{"id":234},"三分法のインデント階層",[10,236,237],{},"「売上原価(仕入高)」と書いてあった行を、ユーザー指示で三分法に展開した。期首商品 / 仕入 / 期末商品 / 売上原価の4行に分け、上3つは売上原価のサブ階層なのでインデントを入れる。",[10,239,240],{},"書き換え時、仕訳プール側の「仕入」セルまで意図せずインデントされてしまったので、そこは戻した。同じ文字列でも文脈で見た目が変わるという、テンプレート化前の手書きHTMLにありがちな落とし穴を踏んだ形になる。",[14,242,244],{"id":243},"ハードコード問題と全部computeに統一すべき指摘","ハードコード問題と「全部Computeに統一すべき」指摘",[10,246,247],{},"仕上げにユーザーから本質的な指摘が飛んできた。",[86,249,250],{},[10,251,252],{},"数字、全部ハードコーディングしてますよね？これ全部Computedで返してほしい",[10,254,255,256,259],{},"その通りだった。連結精算表の数字も仕訳の金額もぜんぶ ",[22,257,258],{},"\u003Ctd>200\u003C/td>"," でベタ書き。設例間で同じ売掛金200が3〜4箇所に散っていて、書き換えのたびに整合性が崩れる温床になっていた。",[10,261,262,263,266],{},"「改善計画は別セッションでやる」という判断にして、",[22,264,265],{},"/lessons"," に「連結会計」のリンクを追加し、Vue化の計画書を書いた。Codex GPT-5.5に投げて致命的指摘がなくなるまで再帰レビューする。",[30,268,269,276,279,282],{},[33,270,271,272,275],{},"1回目 → 致命点3件(ハイライトの仕様揺れ、ルーティング記述の食い違い、",[22,273,274],{},"derivePostings"," の説明不足)",[33,277,278],{},"2回目 → 途中で停止、フォアグラウンド再実行",[33,280,281],{},"3回目 → 致命点2件(ハイライト記述の統一、Section 5.3の「両方ハードコード」表現削除)",[33,283,284],{},"4回目 → 致命点なし",[10,286,287],{},"軽微な指摘は無視して、4回目で抜けた。",[14,289,290],{"id":290},"ドキュメント化と追記",[10,292,293,294,297],{},"「これと同じ出力が別セッションでもできるように、作り方をマークダウンに残しておいて」という依頼で ",[22,295,296],{},"consolidated-worksheet-howto.md"," を書いた。最初は1,000行ちょいで書き上げたが、最後に見直すとセッション後半の重要要素(補助科目あり版、インデント階層、ハイライト連動、仕入三分法、Vue化計画)がそっくり抜け落ちていた。書きながら拡張していく作業の常で、ドキュメント側の更新が追いつかない。後半要素を追記して、コミットして閉じた。",[14,299,300],{"id":300},"振り返り",[10,302,303],{},"形容詞で言えば「いいプロトタイプができた」で済む話だが、動詞で書くと、シートタブを捨て、合計行を捨て、ハードコードを捨てる予定を立てた一日になる。捨てた回数だけ、画面の役割が研ぎ澄まされていった。",[10,305,306,307,309],{},"Vue化計画書はCodexで4周回したので、別セッションで実装に入れる状態になっている。次のセッションで ",[22,308,274],{}," を書きながら、ハードコードの数字を一掃していく。",[14,311,312],{"id":312},"明日以降に持ち越し",[30,314,317,330,340],{"className":315},[316],"contains-task-list",[33,318,321,326,327,329],{"className":319},[320],"task-list-item",[322,323],"input",{"disabled":324,"type":325},true,"checkbox"," Vue化計画書(別セッションで作成済み)に従って ",[22,328,274],{}," を実装する",[33,331,333,335,336,339],{"className":332},[320],[322,334],{"disabled":324,"type":325}," 連結精算表の数字をすべて ",[22,337,338],{},"computed"," 経由に置き換え、設例間の整合性を1ファイルで担保する",[33,341,343,127,345,347],{"className":342},[320],[322,344],{"disabled":324,"type":325},[22,346,296],{}," のスクショを最新版で撮り直す",[349,350,351],"style",{},"html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}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":170,"searchDepth":353,"depth":353,"links":354},2,[355,356,357,358,359,360,361,362,363,364],{"id":16,"depth":353,"text":17},{"id":50,"depth":353,"text":51},{"id":80,"depth":353,"text":81},{"id":117,"depth":353,"text":117},{"id":141,"depth":353,"text":141},{"id":234,"depth":353,"text":234},{"id":243,"depth":353,"text":244},{"id":290,"depth":353,"text":290},{"id":300,"depth":353,"text":300},{"id":312,"depth":353,"text":312},"dev","ScrollArticleにExcel風スタイルを敷き、ゲシュタルト6法則の活用例を全部HTMLテーブル化。連結精算表のプロトタイプはシートタブ案を捨てオーバーレイモーダルへ転換し、補助科目あり版とハイライト連動まで踏み込んだ一日の記録。","md",{},"/2026-04-30-consolidated-worksheet-html-prototype","eurekapu-nuxt4",false,"2026-04-30T00:00:00.000Z",{"title":5,"description":366},"2026-04/2026-04-30/consolidated-worksheet-html-prototype",[376,377,378,379,380],"Excel風レイアウト","連結会計","プロトタイピング","Codexレビュー","HTML",null,"kRCsUSlGbQB0bnHKwurK8m1j_OkwnHJJw0s7MqAnQv4",[],"https://log.eurekapu.com/favicon.svg",1777617050383]