[{"data":1,"prerenderedAt":388},["ShallowReactive",2],{"content-/excel-stagehtml-section-consolidation":3,"all-pages-for-dir":386,"og-image-/excel-stagehtml-section-consolidation":387},{"id":4,"title":5,"body":6,"category":367,"description":368,"extension":369,"meta":370,"navigation":371,"ogImage":372,"path":373,"project_name":374,"published":375,"publishedAt":376,"seo":377,"stem":378,"tags":379,"todo":384,"unpublished":375,"updatedAt":372,"__hash__":385},"pages/2026-04/2026-04-12/excel-stagehtml-section-consolidation.md","Excel講座のstageHtml追加とセクション統合 -- 排他制御の発見から旧プロジェクト移行漏れ補完まで",{"type":7,"value":8,"toc":350},"minimark",[9,14,18,21,26,30,33,43,46,50,53,55,59,71,174,177,184,186,190,193,196,199,210,213,217,220,223,229,231,234,238,241,245,248,251,303,305,308,316,318,321,346],[10,11,13],"h1",{"id":12},"excel講座のstagehtml追加とセクション統合","Excel講座のstageHtml追加とセクション統合",[15,16,17],"p",{},"stageHtmlテーブルを4チャプターに追加しようとしたところ、VLOOKUPチャプターでだけテーブルが表示されず手が止まった。コンポーネントのテンプレートを読み進めて、v-if/v-else-ifの排他制御がスライド画像を優先する設計だと気づくまでに数十分かかった。そのあとセクション統合のレビューに移り、ユーザーから「消すな、残せ」とフィードバックをもらって修正方針を変えた。最後に旧eurekapu.comとの比較で移行漏れ8項目を見つけて補完した。",[19,20],"hr",{},[22,23,25],"h2",{"id":24},"stagehtmlテーブルの追加","stageHtmlテーブルの追加",[27,28,29],"h3",{"id":29},"対象チャプター",[15,31,32],{},"4つのチャプターにHTMLテーブル形式のstageHtmlを追加する作業から始めた。",[34,35,36,40],"ul",{},[37,38,39],"li",{},"ゲシュタルトの法則チャプター（1件）",[37,41,42],{},"Excel NG集チャプター（3件）",[15,44,45],{},"Chrome DevToolsでページを開き、テーブルが実際にレンダリングされることを1件ずつ確認しながら進めた。ゲシュタルトの法則とNG集2件は問題なく表示された。",[27,47,49],{"id":48},"vlookupチャプターで表示されない","VLOOKUPチャプターで表示されない",[15,51,52],{},"3件目まで順調に進んだあと、VLOOKUPチャプターにstageHtmlを追加してブラウザをリロードした。テーブルが出ない。データは入っている。DevToolsのElementsパネルでDOMを見ても、stageHtmlのノードが存在しなかった。",[19,54],{},[22,56,58],{"id":57},"v-ifv-else-if排他制御の発見","v-if/v-else-if排他制御の発見",[15,60,61,62,66,67,70],{},"コンポーネントのテンプレートを読み直して原因がわかった。stageHtmlとスライド画像の表示は",[63,64,65],"code",{},"v-if","/",[63,68,69],{},"v-else-if","で排他制御されていて、スライド画像が存在するチャプターではstageHtmlが評価されない。",[72,73,78],"pre",{"className":74,"code":75,"language":76,"meta":77,"style":77},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003Ctemplate v-if=\"chapter.slideImage\">\n  \u003C!-- スライド画像を表示 -->\n\u003C/template>\n\u003Ctemplate v-else-if=\"chapter.stageHtml\">\n  \u003C!-- stageHtmlテーブルを表示 -->\n\u003C/template>\n","vue","",[63,79,80,117,124,134,159,165],{"__ignoreMap":77},[81,82,85,89,93,96,99,102,106,109,112,114],"span",{"class":83,"line":84},"line",1,[81,86,88],{"class":87},"shFtX","\u003C",[81,90,92],{"class":91},"sHkkW","template",[81,94,95],{"class":91}," v-if",[81,97,98],{"class":87},"=",[81,100,101],{"class":87},"\"",[81,103,105],{"class":104},"s4oTP","chapter",[81,107,108],{"class":87},".",[81,110,111],{"class":104},"slideImage",[81,113,101],{"class":87},[81,115,116],{"class":87},">\n",[81,118,120],{"class":83,"line":119},2,[81,121,123],{"class":122},"sxvE3","  \u003C!-- スライド画像を表示 -->\n",[81,125,127,130,132],{"class":83,"line":126},3,[81,128,129],{"class":87},"\u003C/",[81,131,92],{"class":91},[81,133,116],{"class":87},[81,135,137,139,141,144,146,148,150,152,155,157],{"class":83,"line":136},4,[81,138,88],{"class":87},[81,140,92],{"class":91},[81,142,143],{"class":91}," v-else-if",[81,145,98],{"class":87},[81,147,101],{"class":87},[81,149,105],{"class":104},[81,151,108],{"class":87},[81,153,154],{"class":104},"stageHtml",[81,156,101],{"class":87},[81,158,116],{"class":87},[81,160,162],{"class":83,"line":161},5,[81,163,164],{"class":122},"  \u003C!-- stageHtmlテーブルを表示 -->\n",[81,166,168,170,172],{"class":83,"line":167},6,[81,169,129],{"class":87},[81,171,92],{"class":91},[81,173,116],{"class":87},[15,175,176],{},"VLOOKUPチャプターにはスライド画像が設定されているため、stageHtmlを追加しても描画パスに到達しない。これはバグではなく設計上正しい動作だった。スライド画像がある場合はそちらで十分な情報を提供できているので、追加したstageHtmlを削除した。",[15,178,179,183],{},[180,181,182],"strong",{},"学び",": 表示されない原因を追うとき、データの有無だけでなくテンプレートの条件分岐を先に確認する方が速い。DOMにノードが存在しない時点でレンダリングパスを疑うべきだった。",[19,185],{},[22,187,189],{"id":188},"_1行セクションの統合レビュー","1行セクションの統合レビュー",[15,191,192],{},"stageHtml作業のあと、講座全体のセクション構成を見直した。テキストが1〜2行しかないセクションが散在していて、スクロールするたびに中身のないセクションヘッダーが目に入る状態だった。",[27,194,195],{"id":195},"統合対象の特定",[15,197,198],{},"以下の基準で6箇所を特定した。",[34,200,201,204,207],{},[37,202,203],{},"テキストが1〜2行のみで、前のセクションと文脈が連続している",[37,205,206],{},"セクションを分ける意味が薄い（話題が変わっていない）",[37,208,209],{},"分離していることで読者がスクロールを強いられる",[15,211,212],{},"6箇所すべてを前のセクションに統合し、見出しを削除してパラグラフの一部として組み込んだ。",[27,214,216],{"id":215},"シミュレーションの変数はokの扱い","「シミュレーションの変数はOK」の扱い",[15,218,219],{},"統合作業で「シミュレーションの変数はOK」というセクションを削除したところ、ユーザーから「これは重要な情報だから消さないで」とフィードバックが返ってきた。",[15,221,222],{},"確かに、変数のシミュレーション結果がOKであるという事実は学習者にとって必要な情報だった。削除ではなく、前のセクション末尾に注意書き（インフォメーションボックス）として残す形に修正した。",[15,224,225,228],{},[180,226,227],{},"振り返り",": 短いからといって情報の重要性が低いとは限らない。統合の判断基準に「その情報がなくなったら学習者が困るか」を加える必要があった。ユーザーのフィードバックで気づいてすぐ方針を切り替えられたのはよかった。",[19,230],{},[22,232,233],{"id":233},"旧プロジェクトとの移行漏れ比較",[27,235,237],{"id":236},"eurekapucom-spaとの突き合わせ","eurekapu.com SPAとの突き合わせ",[15,239,240],{},"セクション統合が終わったタイミングで、旧プロジェクト（eurekapu.com SPA版）のExcel講座コンテンツと現行のNuxt4版を突き合わせた。旧版にあって新版にないコンテンツがないか、チャプター単位で比較した。",[27,242,244],{"id":243},"その他のng集に8項目を追加","「その他のNG集」に8項目を追加",[15,246,247],{},"比較の結果、旧プロジェクトの「その他のNG集」セクションに含まれていた8項目がNuxt4版に移行されていないことがわかった。",[15,249,250],{},"これらの項目は旧版ではリンク付きカードとして表示されていたが、移行先のチャプターがまだ存在しないためリンクは設定できない。リンクなしのテーブル形式で項目名と概要だけを一覧化し、将来チャプターを追加したときにリンクを張れるようにした。",[252,253,254,267],"table",{},[255,256,257],"thead",{},[258,259,260,264],"tr",{},[261,262,263],"th",{},"対応",[261,265,266],{},"内容",[268,269,270,279,287,295],"tbody",{},[258,271,272,276],{},[273,274,275],"td",{},"stageHtml追加",[273,277,278],{},"ゲシュタルトの法則 + NG集3件（うち1件は排他制御で削除）",[258,280,281,284],{},[273,282,283],{},"セクション統合",[273,285,286],{},"1〜2行セクション6箇所を前セクションに統合",[258,288,289,292],{},[273,290,291],{},"注意書き復元",[273,293,294],{},"「シミュレーションの変数はOK」を削除→注意書きとして残す",[258,296,297,300],{},[273,298,299],{},"移行漏れ補完",[273,301,302],{},"旧eurekapu.comから「その他のNG集」8項目をテーブルで追加",[19,304],{},[22,306,307],{"id":307},"今日の作業フロー",[72,309,314],{"className":310,"code":312,"language":313},[311],"language-text","stageHtml追加（4件）\n  → 3件成功、VLOOKUPで表示されず\n  → v-if/v-else-if排他制御を発見\n  → VLOOKUPのstageHtmlを削除\n\nセクション統合レビュー\n  → 1〜2行セクション6箇所を特定→統合\n  → ユーザーFB: 「重要情報を消すな」\n  → 「シミュレーションの変数はOK」を注意書きとして復元\n\n旧プロジェクト比較\n  → eurekapu.com SPAと突き合わせ\n  → 「その他のNG集」8項目の移行漏れ発見\n  → リンクなしテーブルとして追加\n","text",[63,315,312],{"__ignoreMap":77},[19,317],{},[22,319,320],{"id":320},"学びメモ",[34,322,323,334,340],{},[37,324,325,328,329,66,331,333],{},[180,326,327],{},"排他制御の確認を先にやる",": テンプレートに",[63,330,65],{},[63,332,69],{},"チェーンがあるとき、データを追加しても表示されないケースがある。DOMにノードがない時点で条件分岐を読む",[37,335,336,339],{},[180,337,338],{},"短い＝不要ではない",": セクションの行数だけで統合を判断すると、学習者に必要な情報まで消してしまう。「この情報がなかったら困るか」を基準に加える",[37,341,342,345],{},[180,343,344],{},"移行漏れは定期的に突き合わせる",": 旧プロジェクトとの差分は、機能単位で作業するたびに該当範囲を比較するのが現実的。全体を一括で比較しようとすると漏れる",[347,348,349],"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 .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":77,"searchDepth":119,"depth":119,"links":351},[352,356,357,361,365,366],{"id":24,"depth":119,"text":25,"children":353},[354,355],{"id":29,"depth":126,"text":29},{"id":48,"depth":126,"text":49},{"id":57,"depth":119,"text":58},{"id":188,"depth":119,"text":189,"children":358},[359,360],{"id":195,"depth":126,"text":195},{"id":215,"depth":126,"text":216},{"id":233,"depth":119,"text":233,"children":362},[363,364],{"id":236,"depth":126,"text":237},{"id":243,"depth":126,"text":244},{"id":307,"depth":119,"text":307},{"id":320,"depth":119,"text":320},"dev","eurekapu-nuxt4のExcel講座にstageHtmlテーブルを追加する過程でv-if/v-else-if排他制御を発見し、1行セクション統合とeurekapu.comからの移行漏れ補完を行った記録","md",{},true,null,"/excel-stagehtml-section-consolidation","eurekapu-nuxt4",false,"2026-04-12T00:00:00.000Z",{"title":5,"description":368},"2026-04/2026-04-12/excel-stagehtml-section-consolidation",[380,154,283,381,382,383],"Excel講座","v-if排他制御","eurekapu移行","Chrome DevTools","memo","g9b8L9fhEirIpb2MEDymSJDK9lHWs7oRXYY5A0eU7XE",[],"https://log.eurekapu.com/og/blog/excel-stagehtml-section-consolidation.png?v=2026-04-12T00%3A00%3A00.000Z&title=Excel%E8%AC%9B%E5%BA%A7%E3%81%AEstageHtml%E8%BF%BD%E5%8A%A0%E3%81%A8%E3%82%BB%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E7%B5%B1%E5%90%88%20--%20%E6%8E%92%E4%BB%96%E5%88%B6%E5%BE%A1%E3%81%AE%E7%99%BA%E8%A6%8B%E3%81%8B%E3%82%89%E6%97%A7%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E7%A7%BB%E8%A1%8C%E6%BC%8F%E3%82%8C%E8%A3%9C%E5%AE%8C%E3%81%BE%E3%81%A7&author=Kei%20Komatsu&sig=78da2d5e457f0e1a",1782528826649]