レッスンリンクが間違ったページを向いていた

朝イチで気づいた。簿記3級ノートの入口ページに貼っていたリンクが、「勉強法全体像」ページではなく「現金・小口現金」のページを指していた。

topics.ts でリンク先を定義していて、そこのパスが /lessons/bookkeeping-3kyu-notes/cash-and-petty-cash になっていた。正しくは /lessons/bookkeeping-3kyu-notes/study-method。1行の修正だが、イントロダクションとして読者が最初に飛ぶ場所なので影響は大きい。

No6のお金アイコンがずれていた

アニメーションテストページ（/dev/journal-push-animation-test）でNo01からNo22程度のシナリオを一覧できる。スクリーンショットで確認したところ、No6（利息）のお金アイコンのX座標がNo1（株式）の配置と合っていなかった。

旧プロジェクト（別リポジトリ）のSVGはVueファイルにインラインで埋め込まれている。独立したSVGファイルは存在しないことをこのタイミングで確認した。Illustratorでエクスポートした素材をそのままコンポーネント内に書いている構造だ。

修正はX座標の数値を揃えるだけ。No1の値を参照してNo6に上書きした。画面で並べると整列した。

学習法ページを書き直した

/lessons/bookkeeping-3kyu-notes/study-method のリライトに時間をかけた。

旧バージョンは「従来型の暗記型 vs 理解型」という対比構造で組んでいた。暗記型を批判して理解型の優位性を説く流れだ。読んでいて引っかかりがあった。「理解型で学べ」という主張自体は正しいとしても、対比で価値を説明するのは薄い。相手を下げて自分を上げる構造になる。

書き直しで取った方針はシンプルにした。2つのメッセージに絞る。

• 論点をパズルのピースのように丁重に積み上げる
• それでもアウトプットの合計時間の方が多くなる

「インプット4割・アウトプット6割」という数字はよく聞く。ただこれを最初から守ろうとすると、理解が追いつかないままアウトプットを繰り返す消耗戦になる。4:6は目標値ではなく、丁寧に積み上げると自然にそうなるという結果だと冒頭に書いた。

本記事が学習で苦労しがちな人向けであることも明示した。試験に受かりたいだけの人には別のルートがある、という断り書きを入れた。

SVGのフェーズ図も手を入れた。旧バージョンは「暗記型」行と「理解型」行を並べた対比レイアウトだった。対比行を削除して、1本のフェーズ進行図だけに絞った。図がシンプルになって読みやすくなった。

不要セクションを複数削除した。削ったほうが骨格が見える。

複式簿記入門にタブコンポーネントを追加した

/lessons/bookkeeping-3kyu-notes/intro-double-entry に手を入れた。

このページは複式簿記の考え方を説明する入口だ。ここまで「概念の説明」だけで終わっていた。6つの連続する取引（土地購入・出資・借入・売却・利息支払い等）を実際に追えるインタラクティブな要素を追加した。

タブで横断表示するコンポーネントを新たに実装した。タブの上に取引リストを番号付きで並べた。1〜6の取引を一覧で視認してからタブを切り替えられる構成にした。

実装中にHydration mismatchが発生した。開発サーバーがSSRとCSRで異なるDOMツリーを生成している状態だ。コンソールに警告が積み上がった。コードを修正する前に、まず開発サーバーを再起動した。再起動後に警告が消えた。状態が壊れていただけで、コード自体には問題がなかった。

[Vue warn]: Hydration node mismatch:
  - Server rendered: ...
  - Client: ...

このエラーが出たときに最初にやることは再起動、という確認になった。

今日わかったこと

学習法の説明で対比構造は使わない方が書きやすい。「暗記型vs理解型」のように相手を批判しないと自分の立場を説明できない書き方は、主張が相手に依存している。削ったら文章が短くなって内容が濃くなった。

Hydration mismatchは再起動で消えることがある。コードを疑う前に再起動を挟む。