簿記クイズにBS/PLリアルタイム表示を実装

クイズで仕訳を解いているとき、「この仕訳でBSがどう動くのか」を頭の中だけで追うのは難しい。回答するたびにBS/PLが目の前で変化する機能を作れば、仕訳と財務諸表のつながりが体で掴めるはずだ。その発想から、クイズ画面にBS/PLのリアルタイム表示を組み込んだ。

勘定科目マッピング -- 92科目を5分類に振り分ける

まず、クイズに登場する勘定科目をBS/PLのどの区分に配置するかを定義した。全92科目を資産・負債・純資産・収益・費用の5分類にマッピングしている。

// 科目マッピングの構造（抜粋）
const accountCategoryMap: Record<string, BsPlCategory> = {
  '現金': 'asset',
  '売掛金': 'asset',
  '買掛金': 'liability',
  '資本金': 'equity',
  '売上': 'revenue',
  '仕入': 'expense',
  // ... 計92科目
}

マッピングが抜けている科目があると、仕訳を反映したときにBS/PLの貸借が合わなくなる。科目の追加漏れを検知するために、マッピングにない科目が来たらコンソールに警告を出すようにした。

2つの表示モード -- 累積と単体

クイズはセクション単位で進む。セクション内の問題を順に解いていくと、前の仕訳の影響が積み重なる。これを反映するために2つのモードを用意した。

• 累積モード: セクション内で回答済みの仕訳を全て積み上げた状態を表示する。「ここまで解いた結果、BSはこうなっている」が見える
• 単体モード: 直前に回答した1問だけの影響を表示する。「この仕訳だけでBSがどう動いたか」に集中できる

切り替えUIはラジオカード型にした。テキストラベルだけのトグルだと押せる範囲が小さくてスマホで操作しづらいため、カード全体をタップ領域にしている。

初期値の設計

BSを表示するには、何らかの初期残高が必要になる。全科目が0だとBSが空欄で始まり、最初の仕訳の影響が見えにくい。

初期値として以下を設定した。

ただし「会社設立」セクションだけは例外で、初期値を全て0にしている。会社設立の仕訳は「何もないところから資本金が生まれる」のがポイントなので、初期残高が入っていると学習の意味が薄れる。

純資産の構造表示

純資産セクションは単純な科目リストではなく、階層構造で表示している。

純資産の部
├── 資本金
└── 利益剰余金
    ├── 利益準備金
    ├── 繰越利益剰余金
    └── 当期純利益

当期純利益はPLの収益合計から費用合計を差し引いて算出し、BSの純資産に自動で反映する。PLとBSが連動していることを視覚的に伝えるための設計だ。

ハイライト機能 -- 変動した科目を青背景で表示

仕訳を回答したとき、どの科目が動いたのかを一目で識別できるように、変動した科目の行を青背景でハイライトする機能を入れた。

netIncomeChangedフラグ

当期純利益はPLの集計結果なので、直接仕訳で動くわけではない。しかしPL科目が動けば当期純利益も変わる。この間接的な変動を伝えるために netIncomeChanged フラグを追加した。収益か費用のいずれかにimpactがあった場合にこのフラグが立ち、当期純利益の行もハイライトされる。

ハイライト条件のバグ修正

最初の実装では「残高が0でない、かつchangedフラグがtrue」をハイライト条件にしていた。しかしこれだと、仕訳の結果ちょうど残高が0に戻ったケースでハイライトされない。例えば残高1,000の売掛金を全額回収すると、売掛金は0になるがchangedはtrueだ。修正後は changed === true だけを条件にした。

equity科目のimpact合算バグ

BS/PLの計算ロジックで、equity（純資産）科目のimpact合算が漏れていた。具体的には、仕訳のimpactを各カテゴリに振り分けるとき、equityカテゴリの加算処理が抜けていて、資本金や繰越利益剰余金への仕訳が反映されなかった。テストデータに純資産科目を動かす仕訳が含まれていなかったため、発覚が遅れた。

不正解時にもBS/PLへ仕訳を反映

当初は正解時のみ仕訳をBS/PLに反映していた。しかし不正解のときこそ「正しい仕訳だとBSはこう動く」を見せる方が学習効果が高い。不正解時にも正解の仕訳を使ってBS/PLを更新するように修正した。

レスポンシブ対応と配置

PC横並び / スマホ縦積み

BSとPLをPC画面では横並び、スマホ画面では縦積みで表示する。Tailwind CSSの md:grid-cols-2 でブレークポイントを切り替えている。

回答ボタンの下に常時表示

BS/PLの表示位置を何パターンか試した。最終的に、回答ボタンの直下に常時表示する形に落ち着いた。問題文を読み、回答し、その直下でBSの変化を確認する。視線が上下に一直線で動くので、目が迷わない。

振り返り

92科目のマッピングを書き上げたとき、エディタのスクロールバーが小さくなっていくのを眺めながら「これ本当に全部合っているのか」と不安になった。結局、equityの合算漏れは科目マッピングではなくimpact計算側の問題だったが、テストデータに純資産科目の仕訳を入れていなかったのが発覚を遅らせた。テストデータは「よくあるパターン」だけでなく「全カテゴリに最低1件ずつ」を意識して作る必要がある。

ハイライト条件の「残高0ならハイライトしない」は、実装時には合理的に思えた。しかし実際にクイズを解いてみると、売掛金を全額回収した瞬間にハイライトが消えて「あれ、反映されてない？」と手が止まった。自分で使ってみて初めて気づくバグは、ユニットテストでは拾いにくい。