Excel講座のstageHtml追加とセクション統合

stageHtmlテーブルを4チャプターに追加しようとしたところ、VLOOKUPチャプターでだけテーブルが表示されず手が止まった。コンポーネントのテンプレートを読み進めて、v-if/v-else-ifの排他制御がスライド画像を優先する設計だと気づくまでに数十分かかった。そのあとセクション統合のレビューに移り、ユーザーから「消すな、残せ」とフィードバックをもらって修正方針を変えた。最後に旧eurekapu.comとの比較で移行漏れ8項目を見つけて補完した。

stageHtmlテーブルの追加

対象チャプター

4つのチャプターにHTMLテーブル形式のstageHtmlを追加する作業から始めた。

• ゲシュタルトの法則チャプター（1件）
• Excel NG集チャプター（3件）

Chrome DevToolsでページを開き、テーブルが実際にレンダリングされることを1件ずつ確認しながら進めた。ゲシュタルトの法則とNG集2件は問題なく表示された。

VLOOKUPチャプターで表示されない

3件目まで順調に進んだあと、VLOOKUPチャプターにstageHtmlを追加してブラウザをリロードした。テーブルが出ない。データは入っている。DevToolsのElementsパネルでDOMを見ても、stageHtmlのノードが存在しなかった。

v-if/v-else-if排他制御の発見

コンポーネントのテンプレートを読み直して原因がわかった。stageHtmlとスライド画像の表示はv-if/v-else-ifで排他制御されていて、スライド画像が存在するチャプターではstageHtmlが評価されない。

<template v-if="chapter.slideImage">
  <!-- スライド画像を表示 -->
</template>
<template v-else-if="chapter.stageHtml">
  <!-- stageHtmlテーブルを表示 -->
</template>

VLOOKUPチャプターにはスライド画像が設定されているため、stageHtmlを追加しても描画パスに到達しない。これはバグではなく設計上正しい動作だった。スライド画像がある場合はそちらで十分な情報を提供できているので、追加したstageHtmlを削除した。

学び: 表示されない原因を追うとき、データの有無だけでなくテンプレートの条件分岐を先に確認する方が速い。DOMにノードが存在しない時点でレンダリングパスを疑うべきだった。

1行セクションの統合レビュー

stageHtml作業のあと、講座全体のセクション構成を見直した。テキストが1〜2行しかないセクションが散在していて、スクロールするたびに中身のないセクションヘッダーが目に入る状態だった。

統合対象の特定

以下の基準で6箇所を特定した。

• テキストが1〜2行のみで、前のセクションと文脈が連続している
• セクションを分ける意味が薄い（話題が変わっていない）
• 分離していることで読者がスクロールを強いられる

6箇所すべてを前のセクションに統合し、見出しを削除してパラグラフの一部として組み込んだ。

「シミュレーションの変数はOK」の扱い

統合作業で「シミュレーションの変数はOK」というセクションを削除したところ、ユーザーから「これは重要な情報だから消さないで」とフィードバックが返ってきた。

確かに、変数のシミュレーション結果がOKであるという事実は学習者にとって必要な情報だった。削除ではなく、前のセクション末尾に注意書き（インフォメーションボックス）として残す形に修正した。

振り返り: 短いからといって情報の重要性が低いとは限らない。統合の判断基準に「その情報がなくなったら学習者が困るか」を加える必要があった。ユーザーのフィードバックで気づいてすぐ方針を切り替えられたのはよかった。

旧プロジェクトとの移行漏れ比較

eurekapu.com SPAとの突き合わせ

セクション統合が終わったタイミングで、旧プロジェクト（eurekapu.com SPA版）のExcel講座コンテンツと現行のNuxt4版を突き合わせた。旧版にあって新版にないコンテンツがないか、チャプター単位で比較した。

「その他のNG集」に8項目を追加

比較の結果、旧プロジェクトの「その他のNG集」セクションに含まれていた8項目がNuxt4版に移行されていないことがわかった。

これらの項目は旧版ではリンク付きカードとして表示されていたが、移行先のチャプターがまだ存在しないためリンクは設定できない。リンクなしのテーブル形式で項目名と概要だけを一覧化し、将来チャプターを追加したときにリンクを張れるようにした。

今日の作業フロー

stageHtml追加（4件）
  → 3件成功、VLOOKUPで表示されず
  → v-if/v-else-if排他制御を発見
  → VLOOKUPのstageHtmlを削除

セクション統合レビュー
  → 1〜2行セクション6箇所を特定→統合
  → ユーザーFB: 「重要情報を消すな」
  → 「シミュレーションの変数はOK」を注意書きとして復元

旧プロジェクト比較
  → eurekapu.com SPAと突き合わせ
  → 「その他のNG集」8項目の移行漏れ発見
  → リンクなしテーブルとして追加

学びメモ

• 排他制御の確認を先にやる: テンプレートにv-if/v-else-ifチェーンがあるとき、データを追加しても表示されないケースがある。DOMにノードがない時点で条件分岐を読む
• 短い＝不要ではない: セクションの行数だけで統合を判断すると、学習者に必要な情報まで消してしまう。「この情報がなかったら困るか」を基準に加える
• 移行漏れは定期的に突き合わせる: 旧プロジェクトとの差分は、機能単位で作業するたびに該当範囲を比較するのが現実的。全体を一括で比較しようとすると漏れる