[{"data":1,"prerenderedAt":2350},["ShallowReactive",2],{"content-/coding-standards-viewer-approach-comparison":3,"all-pages-for-dir":2328,"related-/coding-standards-viewer-approach-comparison":2329,"og-image-/coding-standards-viewer-approach-comparison":2349},{"id":4,"title":5,"body":6,"category":2314,"concepts":2314,"description":2315,"extension":2316,"meta":2317,"navigation":438,"ogImage":2314,"path":2318,"project_name":2314,"published":2319,"publishedAt":2320,"seo":2321,"source":2314,"stem":2322,"tags":2323,"todo":2314,"unpublished":2319,"updatedAt":2314,"__hash__":2327},"pages/2025-11/2025-11-18/coding-standards-viewer-approach-comparison.md","コーディング規約ビューア実装アプローチの比較",{"type":7,"value":8,"toc":2291},"minimark",[9,12,16,20,51,55,59,127,133,138,237,240,279,282,286,290,306,309,323,326,337,340,533,537,540,548,551,557,564,1615,1618,1651,1654,1668,1671,1678,1681,1839,1844,1855,1862,1865,1871,1891,1894,1914,1918,1922,2077,2081,2275,2278,2284,2287],[10,11,5],"h1",{"id":5},[13,14,15],"h2",{"id":15},"現状の実装",[17,18,19],"h3",{"id":19},"構成",[21,22,23,35,43],"ul",{},[24,25,26,30,31],"li",{},[27,28,29],"strong",{},"一覧ページ",": ",[32,33,34],"code",{},"/coding-standards/index.vue",[24,36,37,30,40],{},[27,38,39],{},"ビューアページ",[32,41,42],{},"/coding-standards/viewer.vue",[24,44,45,30,48],{},[27,46,47],{},"データソース",[32,49,50],{},"/public/data/coding-standards.json",[17,52,54],{"id":53},"現在のナビゲーション方式ハッシュベース","現在のナビゲーション方式（ハッシュベース）",[56,57,58],"p",{},"一覧ページからビューアページへのリンク:",[60,61,66],"pre",{"className":62,"code":63,"language":64,"meta":65,"style":65},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003CNuxtLink :to=\"`/coding-standards/viewer#${getRuleId(rule)}`\">\n","vue","",[32,67,68],{"__ignoreMap":65},[69,70,73,77,81,84,88,91,94,98,102,105,108,111,114,117,120,122,124],"span",{"class":71,"line":72},"line",1,[69,74,76],{"class":75},"shFtX","\u003C",[69,78,80],{"class":79},"sHkkW","NuxtLink",[69,82,83],{"class":75}," :",[69,85,87],{"class":86},"senZ8","to",[69,89,90],{"class":75},"=",[69,92,93],{"class":75},"\"",[69,95,97],{"class":96},"sMJiu","`",[69,99,101],{"class":100},"sdGka","/coding-standards/viewer#",[69,103,104],{"class":79},"${",[69,106,107],{"class":86},"getRuleId",[69,109,110],{"class":75},"(",[69,112,113],{"class":100},"rule",[69,115,116],{"class":75},")",[69,118,119],{"class":79},"}",[69,121,97],{"class":96},[69,123,93],{"class":75},[69,125,126],{"class":75},">\n",[56,128,129,130],{},"URL例: ",[32,131,132],{},"http://localhost:3000/coding-standards/viewer#rule-4-3",[134,135,137],"h4",{"id":136},"実装の流れ-viewervue325-353","実装の流れ (viewer.vue:325-353)",[139,140,141,148,151],"ol",{},[24,142,143,144,147],{},"ページロード時、",[32,145,146],{},"window.location.hash"," をチェック",[24,149,150],{},"ハッシュがあれば該当要素にスクロール",[24,152,153,156,157,160,161],{},[27,154,155],{},"500ms後にハッシュをURLから削除"," (",[32,158,159],{},"history.replaceState",")\n",[60,162,166],{"className":163,"code":164,"language":165,"meta":65,"style":65},"language-javascript shiki shiki-themes vitesse-light vitesse-light","setTimeout(() => {\n  history.replaceState(null, '', window.location.pathname);\n}, 500);\n","javascript",[32,167,168,182,225],{"__ignoreMap":65},[69,169,170,173,176,179],{"class":71,"line":72},[69,171,172],{"class":86},"setTimeout",[69,174,175],{"class":75},"(()",[69,177,178],{"class":75}," =>",[69,180,181],{"class":75}," {\n",[69,183,185,189,192,195,197,201,204,207,209,212,214,217,219,222],{"class":71,"line":184},2,[69,186,188],{"class":187},"s4oTP","  history",[69,190,191],{"class":75},".",[69,193,194],{"class":86},"replaceState",[69,196,110],{"class":75},[69,198,200],{"class":199},"stQ0i","null",[69,202,203],{"class":75},",",[69,205,206],{"class":96}," ''",[69,208,203],{"class":75},[69,210,211],{"class":187}," window",[69,213,191],{"class":75},[69,215,216],{"class":187},"location",[69,218,191],{"class":75},[69,220,221],{"class":187},"pathname",[69,223,224],{"class":75},");\n",[69,226,228,231,235],{"class":71,"line":227},3,[69,229,230],{"class":75},"},",[69,232,234],{"class":233},"sM54T"," 500",[69,236,224],{"class":75},[17,238,239],{"id":239},"現在の課題",[139,241,242,259,269],{},[24,243,244,247],{},[27,245,246],{},"URLの一貫性の問題",[21,248,249,256],{},[24,250,251,252,255],{},"ハッシュを削除すると ",[32,253,254],{},"/coding-standards/viewer"," に戻る",[24,257,258],{},"削除後は特定ルールへのディープリンクが失われる",[24,260,261,264],{},[27,262,263],{},"ブラウザ履歴の問題",[21,265,266],{},[24,267,268],{},"ハッシュ削除により、戻るボタンの動作が直感的でない可能性",[24,270,271,274],{},[27,272,273],{},"共有の問題",[21,275,276],{},[24,277,278],{},"スクロール後のURLを共有しても、特定のルールを指せない",[13,280,281],{"id":281},"アプローチ比較",[17,283,285],{"id":284},"アプローチ1-ハッシュベース現在の実装を改善","アプローチ1: ハッシュベース（現在の実装を改善）",[134,287,289],{"id":288},"変更案-ハッシュを削除しない","変更案: ハッシュを削除しない",[60,291,293],{"className":163,"code":292,"language":165,"meta":65,"style":65},"// viewer.vue の line 345-347 を削除または条件付きに変更\n// ハッシュを保持することで、URLの一貫性を維持\n",[32,294,295,301],{"__ignoreMap":65},[69,296,297],{"class":71,"line":72},[69,298,300],{"class":299},"sxvE3","// viewer.vue の line 345-347 を削除または条件付きに変更\n",[69,302,303],{"class":71,"line":184},[69,304,305],{"class":299},"// ハッシュを保持することで、URLの一貫性を維持\n",[134,307,308],{"id":308},"メリット",[21,310,311,314,317,320],{},[24,312,313],{},"✅ 現在のスクロールベースのUX体験を維持",[24,315,316],{},"✅ すべてのルールが1ページに存在（完全なコンテキスト）",[24,318,319],{},"✅ 連続的な学習体験",[24,321,322],{},"✅ コード変更が最小限",[134,324,325],{"id":325},"デメリット",[21,327,328,331,334],{},[24,329,330],{},"❌ ハッシュとスクロール位置の同期管理が必要である",[24,332,333],{},"❌ ページ遷移なしのため、ブラウザ履歴が増えない",[24,335,336],{},"❌ 各ルールが独立したページでない",[134,338,339],{"id":339},"実装の改善点",[60,341,343],{"className":163,"code":342,"language":165,"meta":65,"style":65},"// ユーザーが手動スクロールしたときのみハッシュを更新\nwatch(activeIndex, (newIndex) => {\n  const ruleId = getRuleId(steps.value[newIndex]);\n  const newHash = `#${ruleId}`;\n\n  // 現在のハッシュと異なる場合のみ更新\n  if (window.location.hash !== newHash) {\n    history.replaceState(null, '', `${window.location.pathname}${newHash}`);\n  }\n});\n",[32,344,345,350,373,405,433,440,446,475,521,527],{"__ignoreMap":65},[69,346,347],{"class":71,"line":72},[69,348,349],{"class":299},"// ユーザーが手動スクロールしたときのみハッシュを更新\n",[69,351,352,355,357,360,362,364,367,369,371],{"class":71,"line":184},[69,353,354],{"class":86},"watch",[69,356,110],{"class":75},[69,358,359],{"class":187},"activeIndex",[69,361,203],{"class":75},[69,363,156],{"class":75},[69,365,366],{"class":187},"newIndex",[69,368,116],{"class":75},[69,370,178],{"class":75},[69,372,181],{"class":75},[69,374,375,378,381,384,387,389,392,394,397,400,402],{"class":71,"line":227},[69,376,377],{"class":199},"  const",[69,379,380],{"class":187}," ruleId",[69,382,383],{"class":75}," =",[69,385,386],{"class":86}," getRuleId",[69,388,110],{"class":75},[69,390,391],{"class":187},"steps",[69,393,191],{"class":75},[69,395,396],{"class":187},"value",[69,398,399],{"class":75},"[",[69,401,366],{"class":187},[69,403,404],{"class":75},"]);\n",[69,406,408,410,413,415,418,421,423,426,428,430],{"class":71,"line":407},4,[69,409,377],{"class":199},[69,411,412],{"class":187}," newHash",[69,414,383],{"class":75},[69,416,417],{"class":96}," `",[69,419,420],{"class":100},"#",[69,422,104],{"class":79},[69,424,425],{"class":100},"ruleId",[69,427,119],{"class":79},[69,429,97],{"class":96},[69,431,432],{"class":75},";\n",[69,434,436],{"class":71,"line":435},5,[69,437,439],{"emptyLinePlaceholder":438},true,"\n",[69,441,443],{"class":71,"line":442},6,[69,444,445],{"class":299},"  // 現在のハッシュと異なる場合のみ更新\n",[69,447,449,452,454,457,459,461,463,466,469,471,473],{"class":71,"line":448},7,[69,450,451],{"class":79},"  if",[69,453,156],{"class":75},[69,455,456],{"class":187},"window",[69,458,191],{"class":75},[69,460,216],{"class":187},[69,462,191],{"class":75},[69,464,465],{"class":187},"hash",[69,467,468],{"class":199}," !==",[69,470,412],{"class":187},[69,472,116],{"class":75},[69,474,181],{"class":75},[69,476,478,481,483,485,487,489,491,493,495,497,499,501,503,505,507,509,512,515,517,519],{"class":71,"line":477},8,[69,479,480],{"class":187},"    history",[69,482,191],{"class":75},[69,484,194],{"class":86},[69,486,110],{"class":75},[69,488,200],{"class":199},[69,490,203],{"class":75},[69,492,206],{"class":96},[69,494,203],{"class":75},[69,496,417],{"class":96},[69,498,104],{"class":79},[69,500,456],{"class":100},[69,502,191],{"class":75},[69,504,216],{"class":100},[69,506,191],{"class":75},[69,508,221],{"class":100},[69,510,511],{"class":79},"}${",[69,513,514],{"class":100},"newHash",[69,516,119],{"class":79},[69,518,97],{"class":96},[69,520,224],{"class":75},[69,522,524],{"class":71,"line":523},9,[69,525,526],{"class":75},"  }\n",[69,528,530],{"class":71,"line":529},10,[69,531,532],{"class":75},"});\n",[17,534,536],{"id":535},"アプローチ2-動的ルーティング","アプローチ2: 動的ルーティング",[134,538,539],{"id":539},"構成案",[60,541,546],{"className":542,"code":544,"language":545},[543],"language-text","/coding-standards/viewer/           # すべてのルール一覧（オプション）\n/coding-standards/viewer/rule-1-1   # 特定ルール\n/coding-standards/viewer/rule-4-3   # 特定ルール\n","text",[32,547,544],{"__ignoreMap":65},[134,549,550],{"id":550},"ファイル構成",[60,552,555],{"className":553,"code":554,"language":545},[543],"pages/\n  coding-standards/\n    index.vue                    # 一覧ページ\n    viewer/\n      index.vue                  # すべてのルール（オプション）\n      [ruleId].vue               # 個別ルールページ\n",[32,556,554],{"__ignoreMap":65},[134,558,560,561,116],{"id":559},"実装イメージ-viewerruleidvue","実装イメージ (",[32,562,563],{},"viewer/[ruleId].vue",[60,565,567],{"className":62,"code":566,"language":64,"meta":65,"style":65},"\u003Cscript setup>\nconst route = useRoute();\nconst ruleId = route.params.ruleId;\n\nconst { data: allRules } = await useFetch('/data/coding-standards.json');\nconst currentIndex = computed(() =>\n  allRules.value.findIndex(r => getRuleId(r) === ruleId)\n);\nconst currentRule = computed(() => allRules.value[currentIndex.value]);\n\nconst prevRule = computed(() => {\n  const prevIndex = currentIndex.value - 1;\n  return prevIndex >= 0 ? allRules.value[prevIndex] : null;\n});\n\nconst nextRule = computed(() => {\n  const nextIndex = currentIndex.value + 1;\n  return nextIndex \u003C allRules.value.length ? allRules.value[nextIndex] : null;\n});\n\nfunction goToNextStep() {\n  if (nextRule.value) {\n    navigateTo(`/coding-standards/viewer/${getRuleId(nextRule.value)}`);\n  }\n}\n\nfunction goToPrevStep() {\n  if (prevRule.value) {\n    navigateTo(`/coding-standards/viewer/${getRuleId(prevRule.value)}`);\n  }\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"rule-viewer\">\n    \u003C!-- 現在のルールのみ表示 -->\n    \u003Cdiv class=\"rule-content\">\n      \u003Ch2>{{ currentRule.title }}\u003C/h2>\n      \u003Cp v-html=\"formatDescription(currentRule.description)\">\u003C/p>\n\n      \u003Cdiv class=\"code-examples\">\n        \u003Cdiv class=\"bad-example\">\n          \u003Cdiv class=\"code-label bad\">❌ Bad\u003C/div>\n          \u003Cpre>\u003Ccode class=\"language-javascript\">{{ currentRule.badCode }}\u003C/code>\u003C/pre>\n        \u003C/div>\n\n        \u003Cdiv class=\"good-example\">\n          \u003Cdiv class=\"code-label good\">✅ Good\u003C/div>\n          \u003Cpre>\u003Ccode class=\"language-javascript\">{{ currentRule.goodCode }}\u003C/code>\u003C/pre>\n        \u003C/div>\n      \u003C/div>\n    \u003C/div>\n\n    \u003C!-- ナビゲーション -->\n    \u003Cdiv class=\"nav-buttons\">\n      \u003Cbutton @click=\"goToPrevStep\" :disabled=\"!prevRule\">← 前へ\u003C/button>\n      \u003Cspan>{{ currentIndex + 1 }} / {{ allRules.length }}\u003C/span>\n      \u003Cbutton @click=\"goToNextStep\" :disabled=\"!nextRule\">次へ →\u003C/button>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",[32,568,569,581,597,618,622,661,678,714,718,750,754,772,796,834,839,844,862,885,928,933,938,952,970,1003,1008,1014,1019,1031,1049,1080,1085,1090,1100,1105,1115,1138,1144,1165,1186,1212,1217,1237,1258,1288,1326,1336,1341,1361,1390,1426,1435,1445,1455,1460,1466,1486,1529,1547,1587,1596,1606],{"__ignoreMap":65},[69,570,571,573,576,579],{"class":71,"line":72},[69,572,76],{"class":75},[69,574,575],{"class":79},"script",[69,577,578],{"class":187}," setup",[69,580,126],{"class":75},[69,582,583,586,589,591,594],{"class":71,"line":184},[69,584,585],{"class":199},"const",[69,587,588],{"class":187}," route",[69,590,383],{"class":75},[69,592,593],{"class":86}," useRoute",[69,595,596],{"class":75},"();\n",[69,598,599,601,603,605,607,609,612,614,616],{"class":71,"line":227},[69,600,585],{"class":199},[69,602,380],{"class":187},[69,604,383],{"class":75},[69,606,588],{"class":187},[69,608,191],{"class":75},[69,610,611],{"class":187},"params",[69,613,191],{"class":75},[69,615,425],{"class":187},[69,617,432],{"class":75},[69,619,620],{"class":71,"line":407},[69,621,439],{"emptyLinePlaceholder":438},[69,623,624,626,629,632,635,638,641,643,646,649,651,654,657,659],{"class":71,"line":435},[69,625,585],{"class":199},[69,627,628],{"class":75}," {",[69,630,631],{"class":187}," data",[69,633,634],{"class":75},":",[69,636,637],{"class":187}," allRules",[69,639,640],{"class":75}," }",[69,642,383],{"class":75},[69,644,645],{"class":79}," await",[69,647,648],{"class":86}," useFetch",[69,650,110],{"class":75},[69,652,653],{"class":96},"'",[69,655,656],{"class":100},"/data/coding-standards.json",[69,658,653],{"class":96},[69,660,224],{"class":75},[69,662,663,665,668,670,673,675],{"class":71,"line":442},[69,664,585],{"class":199},[69,666,667],{"class":187}," currentIndex",[69,669,383],{"class":75},[69,671,672],{"class":86}," computed",[69,674,175],{"class":75},[69,676,677],{"class":75}," =>\n",[69,679,680,683,685,687,689,692,694,697,699,701,703,705,707,710,712],{"class":71,"line":448},[69,681,682],{"class":187},"  allRules",[69,684,191],{"class":75},[69,686,396],{"class":187},[69,688,191],{"class":75},[69,690,691],{"class":86},"findIndex",[69,693,110],{"class":75},[69,695,696],{"class":187},"r",[69,698,178],{"class":75},[69,700,386],{"class":86},[69,702,110],{"class":75},[69,704,696],{"class":187},[69,706,116],{"class":75},[69,708,709],{"class":199}," ===",[69,711,380],{"class":187},[69,713,160],{"class":75},[69,715,716],{"class":71,"line":477},[69,717,224],{"class":75},[69,719,720,722,725,727,729,731,733,735,737,739,741,744,746,748],{"class":71,"line":523},[69,721,585],{"class":199},[69,723,724],{"class":187}," currentRule",[69,726,383],{"class":75},[69,728,672],{"class":86},[69,730,175],{"class":75},[69,732,178],{"class":75},[69,734,637],{"class":187},[69,736,191],{"class":75},[69,738,396],{"class":187},[69,740,399],{"class":75},[69,742,743],{"class":187},"currentIndex",[69,745,191],{"class":75},[69,747,396],{"class":187},[69,749,404],{"class":75},[69,751,752],{"class":71,"line":529},[69,753,439],{"emptyLinePlaceholder":438},[69,755,757,759,762,764,766,768,770],{"class":71,"line":756},11,[69,758,585],{"class":199},[69,760,761],{"class":187}," prevRule",[69,763,383],{"class":75},[69,765,672],{"class":86},[69,767,175],{"class":75},[69,769,178],{"class":75},[69,771,181],{"class":75},[69,773,775,777,780,782,784,786,788,791,794],{"class":71,"line":774},12,[69,776,377],{"class":199},[69,778,779],{"class":187}," prevIndex",[69,781,383],{"class":75},[69,783,667],{"class":187},[69,785,191],{"class":75},[69,787,396],{"class":187},[69,789,790],{"class":199}," -",[69,792,793],{"class":233}," 1",[69,795,432],{"class":75},[69,797,799,802,804,807,810,813,815,817,819,821,824,827,829,832],{"class":71,"line":798},13,[69,800,801],{"class":79},"  return",[69,803,779],{"class":187},[69,805,806],{"class":75}," >=",[69,808,809],{"class":233}," 0",[69,811,812],{"class":199}," ?",[69,814,637],{"class":187},[69,816,191],{"class":75},[69,818,396],{"class":187},[69,820,399],{"class":75},[69,822,823],{"class":187},"prevIndex",[69,825,826],{"class":75},"]",[69,828,83],{"class":199},[69,830,831],{"class":199}," null",[69,833,432],{"class":75},[69,835,837],{"class":71,"line":836},14,[69,838,532],{"class":75},[69,840,842],{"class":71,"line":841},15,[69,843,439],{"emptyLinePlaceholder":438},[69,845,847,849,852,854,856,858,860],{"class":71,"line":846},16,[69,848,585],{"class":199},[69,850,851],{"class":187}," nextRule",[69,853,383],{"class":75},[69,855,672],{"class":86},[69,857,175],{"class":75},[69,859,178],{"class":75},[69,861,181],{"class":75},[69,863,865,867,870,872,874,876,878,881,883],{"class":71,"line":864},17,[69,866,377],{"class":199},[69,868,869],{"class":187}," nextIndex",[69,871,383],{"class":75},[69,873,667],{"class":187},[69,875,191],{"class":75},[69,877,396],{"class":187},[69,879,880],{"class":199}," +",[69,882,793],{"class":233},[69,884,432],{"class":75},[69,886,888,890,892,895,897,899,901,903,907,909,911,913,915,917,920,922,924,926],{"class":71,"line":887},18,[69,889,801],{"class":79},[69,891,869],{"class":187},[69,893,894],{"class":75}," \u003C",[69,896,637],{"class":187},[69,898,191],{"class":75},[69,900,396],{"class":187},[69,902,191],{"class":75},[69,904,906],{"class":905},"sz8Xr","length",[69,908,812],{"class":199},[69,910,637],{"class":187},[69,912,191],{"class":75},[69,914,396],{"class":187},[69,916,399],{"class":75},[69,918,919],{"class":187},"nextIndex",[69,921,826],{"class":75},[69,923,83],{"class":199},[69,925,831],{"class":199},[69,927,432],{"class":75},[69,929,931],{"class":71,"line":930},19,[69,932,532],{"class":75},[69,934,936],{"class":71,"line":935},20,[69,937,439],{"emptyLinePlaceholder":438},[69,939,941,944,947,950],{"class":71,"line":940},21,[69,942,943],{"class":199},"function",[69,945,946],{"class":86}," goToNextStep",[69,948,949],{"class":75},"()",[69,951,181],{"class":75},[69,953,955,957,959,962,964,966,968],{"class":71,"line":954},22,[69,956,451],{"class":79},[69,958,156],{"class":75},[69,960,961],{"class":187},"nextRule",[69,963,191],{"class":75},[69,965,396],{"class":187},[69,967,116],{"class":75},[69,969,181],{"class":75},[69,971,973,976,978,980,983,985,987,989,991,993,995,997,999,1001],{"class":71,"line":972},23,[69,974,975],{"class":86},"    navigateTo",[69,977,110],{"class":75},[69,979,97],{"class":96},[69,981,982],{"class":100},"/coding-standards/viewer/",[69,984,104],{"class":79},[69,986,107],{"class":86},[69,988,110],{"class":75},[69,990,961],{"class":100},[69,992,191],{"class":75},[69,994,396],{"class":100},[69,996,116],{"class":75},[69,998,119],{"class":79},[69,1000,97],{"class":96},[69,1002,224],{"class":75},[69,1004,1006],{"class":71,"line":1005},24,[69,1007,526],{"class":75},[69,1009,1011],{"class":71,"line":1010},25,[69,1012,1013],{"class":75},"}\n",[69,1015,1017],{"class":71,"line":1016},26,[69,1018,439],{"emptyLinePlaceholder":438},[69,1020,1022,1024,1027,1029],{"class":71,"line":1021},27,[69,1023,943],{"class":199},[69,1025,1026],{"class":86}," goToPrevStep",[69,1028,949],{"class":75},[69,1030,181],{"class":75},[69,1032,1034,1036,1038,1041,1043,1045,1047],{"class":71,"line":1033},28,[69,1035,451],{"class":79},[69,1037,156],{"class":75},[69,1039,1040],{"class":187},"prevRule",[69,1042,191],{"class":75},[69,1044,396],{"class":187},[69,1046,116],{"class":75},[69,1048,181],{"class":75},[69,1050,1052,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072,1074,1076,1078],{"class":71,"line":1051},29,[69,1053,975],{"class":86},[69,1055,110],{"class":75},[69,1057,97],{"class":96},[69,1059,982],{"class":100},[69,1061,104],{"class":79},[69,1063,107],{"class":86},[69,1065,110],{"class":75},[69,1067,1040],{"class":100},[69,1069,191],{"class":75},[69,1071,396],{"class":100},[69,1073,116],{"class":75},[69,1075,119],{"class":79},[69,1077,97],{"class":96},[69,1079,224],{"class":75},[69,1081,1083],{"class":71,"line":1082},30,[69,1084,526],{"class":75},[69,1086,1088],{"class":71,"line":1087},31,[69,1089,1013],{"class":75},[69,1091,1093,1096,1098],{"class":71,"line":1092},32,[69,1094,1095],{"class":75},"\u003C/",[69,1097,575],{"class":79},[69,1099,126],{"class":75},[69,1101,1103],{"class":71,"line":1102},33,[69,1104,439],{"emptyLinePlaceholder":438},[69,1106,1108,1110,1113],{"class":71,"line":1107},34,[69,1109,76],{"class":75},[69,1111,1112],{"class":79},"template",[69,1114,126],{"class":75},[69,1116,1118,1121,1124,1127,1129,1131,1134,1136],{"class":71,"line":1117},35,[69,1119,1120],{"class":75},"  \u003C",[69,1122,1123],{"class":79},"div",[69,1125,1126],{"class":187}," class",[69,1128,90],{"class":75},[69,1130,93],{"class":96},[69,1132,1133],{"class":100},"rule-viewer",[69,1135,93],{"class":96},[69,1137,126],{"class":75},[69,1139,1141],{"class":71,"line":1140},36,[69,1142,1143],{"class":299},"    \u003C!-- 現在のルールのみ表示 -->\n",[69,1145,1147,1150,1152,1154,1156,1158,1161,1163],{"class":71,"line":1146},37,[69,1148,1149],{"class":75},"    \u003C",[69,1151,1123],{"class":79},[69,1153,1126],{"class":187},[69,1155,90],{"class":75},[69,1157,93],{"class":96},[69,1159,1160],{"class":100},"rule-content",[69,1162,93],{"class":96},[69,1164,126],{"class":75},[69,1166,1168,1171,1173,1176,1180,1182,1184],{"class":71,"line":1167},38,[69,1169,1170],{"class":75},"      \u003C",[69,1172,13],{"class":79},[69,1174,1175],{"class":75},">",[69,1177,1179],{"class":1178},"sG7-3","{{ currentRule.title }}",[69,1181,1095],{"class":75},[69,1183,13],{"class":79},[69,1185,126],{"class":75},[69,1187,1189,1191,1193,1196,1198,1200,1203,1205,1208,1210],{"class":71,"line":1188},39,[69,1190,1170],{"class":75},[69,1192,56],{"class":79},[69,1194,1195],{"class":187}," v-html",[69,1197,90],{"class":75},[69,1199,93],{"class":96},[69,1201,1202],{"class":100},"formatDescription(currentRule.description)",[69,1204,93],{"class":96},[69,1206,1207],{"class":75},">\u003C/",[69,1209,56],{"class":79},[69,1211,126],{"class":75},[69,1213,1215],{"class":71,"line":1214},40,[69,1216,439],{"emptyLinePlaceholder":438},[69,1218,1220,1222,1224,1226,1228,1230,1233,1235],{"class":71,"line":1219},41,[69,1221,1170],{"class":75},[69,1223,1123],{"class":79},[69,1225,1126],{"class":187},[69,1227,90],{"class":75},[69,1229,93],{"class":96},[69,1231,1232],{"class":100},"code-examples",[69,1234,93],{"class":96},[69,1236,126],{"class":75},[69,1238,1240,1243,1245,1247,1249,1251,1254,1256],{"class":71,"line":1239},42,[69,1241,1242],{"class":75},"        \u003C",[69,1244,1123],{"class":79},[69,1246,1126],{"class":187},[69,1248,90],{"class":75},[69,1250,93],{"class":96},[69,1252,1253],{"class":100},"bad-example",[69,1255,93],{"class":96},[69,1257,126],{"class":75},[69,1259,1261,1264,1266,1268,1270,1272,1275,1277,1279,1282,1284,1286],{"class":71,"line":1260},43,[69,1262,1263],{"class":75},"          \u003C",[69,1265,1123],{"class":79},[69,1267,1126],{"class":187},[69,1269,90],{"class":75},[69,1271,93],{"class":96},[69,1273,1274],{"class":100},"code-label bad",[69,1276,93],{"class":96},[69,1278,1175],{"class":75},[69,1280,1281],{"class":1178},"❌ Bad",[69,1283,1095],{"class":75},[69,1285,1123],{"class":79},[69,1287,126],{"class":75},[69,1289,1291,1293,1295,1298,1300,1302,1304,1306,1309,1311,1313,1316,1318,1320,1322,1324],{"class":71,"line":1290},44,[69,1292,1263],{"class":75},[69,1294,60],{"class":79},[69,1296,1297],{"class":75},">\u003C",[69,1299,32],{"class":79},[69,1301,1126],{"class":187},[69,1303,90],{"class":75},[69,1305,93],{"class":96},[69,1307,1308],{"class":100},"language-javascript",[69,1310,93],{"class":96},[69,1312,1175],{"class":75},[69,1314,1315],{"class":1178},"{{ currentRule.badCode }}",[69,1317,1095],{"class":75},[69,1319,32],{"class":79},[69,1321,1207],{"class":75},[69,1323,60],{"class":79},[69,1325,126],{"class":75},[69,1327,1329,1332,1334],{"class":71,"line":1328},45,[69,1330,1331],{"class":75},"        \u003C/",[69,1333,1123],{"class":79},[69,1335,126],{"class":75},[69,1337,1339],{"class":71,"line":1338},46,[69,1340,439],{"emptyLinePlaceholder":438},[69,1342,1344,1346,1348,1350,1352,1354,1357,1359],{"class":71,"line":1343},47,[69,1345,1242],{"class":75},[69,1347,1123],{"class":79},[69,1349,1126],{"class":187},[69,1351,90],{"class":75},[69,1353,93],{"class":96},[69,1355,1356],{"class":100},"good-example",[69,1358,93],{"class":96},[69,1360,126],{"class":75},[69,1362,1364,1366,1368,1370,1372,1374,1377,1379,1381,1384,1386,1388],{"class":71,"line":1363},48,[69,1365,1263],{"class":75},[69,1367,1123],{"class":79},[69,1369,1126],{"class":187},[69,1371,90],{"class":75},[69,1373,93],{"class":96},[69,1375,1376],{"class":100},"code-label good",[69,1378,93],{"class":96},[69,1380,1175],{"class":75},[69,1382,1383],{"class":1178},"✅ Good",[69,1385,1095],{"class":75},[69,1387,1123],{"class":79},[69,1389,126],{"class":75},[69,1391,1393,1395,1397,1399,1401,1403,1405,1407,1409,1411,1413,1416,1418,1420,1422,1424],{"class":71,"line":1392},49,[69,1394,1263],{"class":75},[69,1396,60],{"class":79},[69,1398,1297],{"class":75},[69,1400,32],{"class":79},[69,1402,1126],{"class":187},[69,1404,90],{"class":75},[69,1406,93],{"class":96},[69,1408,1308],{"class":100},[69,1410,93],{"class":96},[69,1412,1175],{"class":75},[69,1414,1415],{"class":1178},"{{ currentRule.goodCode }}",[69,1417,1095],{"class":75},[69,1419,32],{"class":79},[69,1421,1207],{"class":75},[69,1423,60],{"class":79},[69,1425,126],{"class":75},[69,1427,1429,1431,1433],{"class":71,"line":1428},50,[69,1430,1331],{"class":75},[69,1432,1123],{"class":79},[69,1434,126],{"class":75},[69,1436,1438,1441,1443],{"class":71,"line":1437},51,[69,1439,1440],{"class":75},"      \u003C/",[69,1442,1123],{"class":79},[69,1444,126],{"class":75},[69,1446,1448,1451,1453],{"class":71,"line":1447},52,[69,1449,1450],{"class":75},"    \u003C/",[69,1452,1123],{"class":79},[69,1454,126],{"class":75},[69,1456,1458],{"class":71,"line":1457},53,[69,1459,439],{"emptyLinePlaceholder":438},[69,1461,1463],{"class":71,"line":1462},54,[69,1464,1465],{"class":299},"    \u003C!-- ナビゲーション -->\n",[69,1467,1469,1471,1473,1475,1477,1479,1482,1484],{"class":71,"line":1468},55,[69,1470,1149],{"class":75},[69,1472,1123],{"class":79},[69,1474,1126],{"class":187},[69,1476,90],{"class":75},[69,1478,93],{"class":96},[69,1480,1481],{"class":100},"nav-buttons",[69,1483,93],{"class":96},[69,1485,126],{"class":75},[69,1487,1489,1491,1494,1497,1499,1501,1504,1506,1509,1511,1513,1516,1518,1520,1523,1525,1527],{"class":71,"line":1488},56,[69,1490,1170],{"class":75},[69,1492,1493],{"class":79},"button",[69,1495,1496],{"class":187}," @click",[69,1498,90],{"class":75},[69,1500,93],{"class":96},[69,1502,1503],{"class":100},"goToPrevStep",[69,1505,93],{"class":96},[69,1507,1508],{"class":187}," :disabled",[69,1510,90],{"class":75},[69,1512,93],{"class":96},[69,1514,1515],{"class":100},"!prevRule",[69,1517,93],{"class":96},[69,1519,1175],{"class":75},[69,1521,1522],{"class":1178},"← 前へ",[69,1524,1095],{"class":75},[69,1526,1493],{"class":79},[69,1528,126],{"class":75},[69,1530,1532,1534,1536,1538,1541,1543,1545],{"class":71,"line":1531},57,[69,1533,1170],{"class":75},[69,1535,69],{"class":79},[69,1537,1175],{"class":75},[69,1539,1540],{"class":1178},"{{ currentIndex + 1 }} / {{ allRules.length }}",[69,1542,1095],{"class":75},[69,1544,69],{"class":79},[69,1546,126],{"class":75},[69,1548,1550,1552,1554,1556,1558,1560,1563,1565,1567,1569,1571,1574,1576,1578,1581,1583,1585],{"class":71,"line":1549},58,[69,1551,1170],{"class":75},[69,1553,1493],{"class":79},[69,1555,1496],{"class":187},[69,1557,90],{"class":75},[69,1559,93],{"class":96},[69,1561,1562],{"class":100},"goToNextStep",[69,1564,93],{"class":96},[69,1566,1508],{"class":187},[69,1568,90],{"class":75},[69,1570,93],{"class":96},[69,1572,1573],{"class":100},"!nextRule",[69,1575,93],{"class":96},[69,1577,1175],{"class":75},[69,1579,1580],{"class":1178},"次へ →",[69,1582,1095],{"class":75},[69,1584,1493],{"class":79},[69,1586,126],{"class":75},[69,1588,1590,1592,1594],{"class":71,"line":1589},59,[69,1591,1450],{"class":75},[69,1593,1123],{"class":79},[69,1595,126],{"class":75},[69,1597,1599,1602,1604],{"class":71,"line":1598},60,[69,1600,1601],{"class":75},"  \u003C/",[69,1603,1123],{"class":79},[69,1605,126],{"class":75},[69,1607,1609,1611,1613],{"class":71,"line":1608},61,[69,1610,1095],{"class":75},[69,1612,1112],{"class":79},[69,1614,126],{"class":75},[134,1616,308],{"id":1617},"メリット-1",[21,1619,1620,1627,1633,1639,1645],{},[24,1621,1622,1623,1626],{},"✅ ",[27,1624,1625],{},"明確なURL",": 各ルールが独自のURLを持つ",[24,1628,1622,1629,1632],{},[27,1630,1631],{},"ブラウザ履歴",": 戻る/進むが正しく機能",[24,1634,1622,1635,1638],{},[27,1636,1637],{},"共有しやすい",": ディープリンクが常に有効",[24,1640,1622,1641,1644],{},[27,1642,1643],{},"SEOフレンドリー",": 各ページが独立してインデックス可能",[24,1646,1622,1647,1650],{},[27,1648,1649],{},"状態管理がシンプル",": URLがstate of truth",[134,1652,325],{"id":1653},"デメリット-1",[21,1655,1656,1659,1662,1665],{},[24,1657,1658],{},"❌ ページ遷移のオーバーヘッド",[24,1660,1661],{},"❌ 現在のスクロールベースの連続的なUXが失われる",[24,1663,1664],{},"❌ 実装の変更範囲が大きい",[24,1666,1667],{},"❌ すべてのルールを一度に見渡せない",[13,1669,1670],{"id":1670},"推奨アプローチ",[17,1672,1674,1675],{"id":1673},"短期的な解決策-アプローチ1の改善版","短期的な解決策: ",[27,1676,1677],{},"アプローチ1の改善版",[56,1679,1680],{},"現在の実装で以下の変更を行う:",[139,1682,1683,1697],{},[24,1684,1685,1688],{},[27,1686,1687],{},"ハッシュを削除せず、常にURLに反映",[60,1689,1691],{"className":163,"code":1690,"language":165,"meta":65,"style":65},"// viewer.vue:345-347 を削除\n",[32,1692,1693],{"__ignoreMap":65},[69,1694,1695],{"class":71,"line":72},[69,1696,1690],{"class":299},[24,1698,1699,1702],{},[27,1700,1701],{},"スクロールに応じてハッシュを更新",[60,1703,1705],{"className":163,"code":1704,"language":165,"meta":65,"style":65},"watch(activeIndex, (newIndex) => {\n  const ruleId = getRuleId(steps.value[newIndex]);\n  if (window.location.hash !== `#${ruleId}`) {\n    history.replaceState(null, '', `${window.location.pathname}#${ruleId}`);\n  }\n});\n",[32,1706,1707,1727,1751,1785,1831,1835],{"__ignoreMap":65},[69,1708,1709,1711,1713,1715,1717,1719,1721,1723,1725],{"class":71,"line":72},[69,1710,354],{"class":86},[69,1712,110],{"class":75},[69,1714,359],{"class":187},[69,1716,203],{"class":75},[69,1718,156],{"class":75},[69,1720,366],{"class":187},[69,1722,116],{"class":75},[69,1724,178],{"class":75},[69,1726,181],{"class":75},[69,1728,1729,1731,1733,1735,1737,1739,1741,1743,1745,1747,1749],{"class":71,"line":184},[69,1730,377],{"class":199},[69,1732,380],{"class":187},[69,1734,383],{"class":75},[69,1736,386],{"class":86},[69,1738,110],{"class":75},[69,1740,391],{"class":187},[69,1742,191],{"class":75},[69,1744,396],{"class":187},[69,1746,399],{"class":75},[69,1748,366],{"class":187},[69,1750,404],{"class":75},[69,1752,1753,1755,1757,1759,1761,1763,1765,1767,1769,1771,1773,1775,1777,1779,1781,1783],{"class":71,"line":227},[69,1754,451],{"class":79},[69,1756,156],{"class":75},[69,1758,456],{"class":187},[69,1760,191],{"class":75},[69,1762,216],{"class":187},[69,1764,191],{"class":75},[69,1766,465],{"class":187},[69,1768,468],{"class":199},[69,1770,417],{"class":96},[69,1772,420],{"class":100},[69,1774,104],{"class":79},[69,1776,425],{"class":100},[69,1778,119],{"class":79},[69,1780,97],{"class":96},[69,1782,116],{"class":75},[69,1784,181],{"class":75},[69,1786,1787,1789,1791,1793,1795,1797,1799,1801,1803,1805,1807,1809,1811,1813,1815,1817,1819,1821,1823,1825,1827,1829],{"class":71,"line":407},[69,1788,480],{"class":187},[69,1790,191],{"class":75},[69,1792,194],{"class":86},[69,1794,110],{"class":75},[69,1796,200],{"class":199},[69,1798,203],{"class":75},[69,1800,206],{"class":96},[69,1802,203],{"class":75},[69,1804,417],{"class":96},[69,1806,104],{"class":79},[69,1808,456],{"class":100},[69,1810,191],{"class":75},[69,1812,216],{"class":100},[69,1814,191],{"class":75},[69,1816,221],{"class":100},[69,1818,119],{"class":79},[69,1820,420],{"class":100},[69,1822,104],{"class":79},[69,1824,425],{"class":100},[69,1826,119],{"class":79},[69,1828,97],{"class":96},[69,1830,224],{"class":75},[69,1832,1833],{"class":71,"line":435},[69,1834,526],{"class":75},[69,1836,1837],{"class":71,"line":442},[69,1838,532],{"class":75},[56,1840,1841],{},[27,1842,1843],{},"理由:",[21,1845,1846,1849,1852],{},[24,1847,1848],{},"現在のスクロールベースの優れたUX体験を維持",[24,1850,1851],{},"コード変更が最小限",[24,1853,1854],{},"URLの一貫性と共有可能性が向上",[17,1856,1858,1859],{"id":1857},"長期的な選択肢-ハイブリッドアプローチ","長期的な選択肢: ",[27,1860,1861],{},"ハイブリッドアプローチ",[56,1863,1864],{},"両方の利点を活かす:",[60,1866,1869],{"className":1867,"code":1868,"language":545},[543],"/coding-standards/viewer           # スクロール形式（全体を学習）\n/coding-standards/viewer/[ruleId]  # 個別ルールページ（リファレンス用）\n",[32,1870,1868],{"__ignoreMap":65},[21,1872,1873,1882],{},[24,1874,1875,30,1878,1881],{},[27,1876,1877],{},"学習モード",[32,1879,1880],{},"viewer"," ですべてのルールをスクロールで閲覧",[24,1883,1884,30,1887,1890],{},[27,1885,1886],{},"リファレンスモード",[32,1888,1889],{},"viewer/[ruleId]"," で特定ルールに直接アクセス",[13,1892,1893],{"id":1893},"実装の優先順位",[139,1895,1896,1902,1908],{},[24,1897,1898,1901],{},[27,1899,1900],{},"Phase 1（即時）",": ハッシュ削除ロジックの修正",[24,1903,1904,1907],{},[27,1905,1906],{},"Phase 2（検討）",": activeIndexの変更をハッシュに反映",[24,1909,1910,1913],{},[27,1911,1912],{},"Phase 3（将来）",": 必要に応じて動的ルーティングを追加",[13,1915,1917],{"id":1916},"コード差分phase-1の修正","コード差分（Phase 1の修正）",[17,1919,1921],{"id":1920},"viewervue-の修正","viewer.vue の修正",[60,1923,1927],{"className":1924,"code":1925,"language":1926,"meta":65,"style":65},"language-diff shiki shiki-themes vitesse-light vitesse-light","  // Handle hash navigation\n  if (window.location.hash) {\n    const hash = window.location.hash.slice(1); // Remove '#'\n    const targetElement = document.getElementById(hash);\n    if (targetElement) {\n      // Find and set active index immediately\n      const targetIndex = stepElements.indexOf(targetElement);\n      if (targetIndex !== -1) {\n        setActive(targetIndex);\n      }\n\n      setTimeout(() => {\n        const elementTop = targetElement.getBoundingClientRect().top + window.scrollY;\n        // Position the step at 0.5vh (middle of the detection range 0.2-0.8)\n        const offset = window.innerHeight * 0.5;\n        window.scrollTo({\n          top: elementTop - offset,\n          behavior: 'smooth'\n        });\n-\n-       // Clear hash after scrolling to allow normal scrolling\n-       setTimeout(() => {\n-         history.replaceState(null, '', window.location.pathname);\n-       }, 500);\n      }, 100); // Small delay to ensure layout is complete\n    }\n  } else {\n    // Only call updateProgress on initial load if there's no hash\n    updateProgress();\n  }\n","diff",[32,1928,1929,1934,1939,1944,1949,1954,1959,1964,1969,1974,1979,1983,1988,1993,1998,2003,2008,2013,2018,2023,2028,2033,2038,2043,2048,2053,2058,2063,2068,2073],{"__ignoreMap":65},[69,1930,1931],{"class":71,"line":72},[69,1932,1933],{},"  // Handle hash navigation\n",[69,1935,1936],{"class":71,"line":184},[69,1937,1938],{},"  if (window.location.hash) {\n",[69,1940,1941],{"class":71,"line":227},[69,1942,1943],{},"    const hash = window.location.hash.slice(1); // Remove '#'\n",[69,1945,1946],{"class":71,"line":407},[69,1947,1948],{},"    const targetElement = document.getElementById(hash);\n",[69,1950,1951],{"class":71,"line":435},[69,1952,1953],{},"    if (targetElement) {\n",[69,1955,1956],{"class":71,"line":442},[69,1957,1958],{},"      // Find and set active index immediately\n",[69,1960,1961],{"class":71,"line":448},[69,1962,1963],{},"      const targetIndex = stepElements.indexOf(targetElement);\n",[69,1965,1966],{"class":71,"line":477},[69,1967,1968],{},"      if (targetIndex !== -1) {\n",[69,1970,1971],{"class":71,"line":523},[69,1972,1973],{},"        setActive(targetIndex);\n",[69,1975,1976],{"class":71,"line":529},[69,1977,1978],{},"      }\n",[69,1980,1981],{"class":71,"line":756},[69,1982,439],{"emptyLinePlaceholder":438},[69,1984,1985],{"class":71,"line":774},[69,1986,1987],{},"      setTimeout(() => {\n",[69,1989,1990],{"class":71,"line":798},[69,1991,1992],{},"        const elementTop = targetElement.getBoundingClientRect().top + window.scrollY;\n",[69,1994,1995],{"class":71,"line":836},[69,1996,1997],{},"        // Position the step at 0.5vh (middle of the detection range 0.2-0.8)\n",[69,1999,2000],{"class":71,"line":841},[69,2001,2002],{},"        const offset = window.innerHeight * 0.5;\n",[69,2004,2005],{"class":71,"line":846},[69,2006,2007],{},"        window.scrollTo({\n",[69,2009,2010],{"class":71,"line":864},[69,2011,2012],{},"          top: elementTop - offset,\n",[69,2014,2015],{"class":71,"line":887},[69,2016,2017],{},"          behavior: 'smooth'\n",[69,2019,2020],{"class":71,"line":930},[69,2021,2022],{},"        });\n",[69,2024,2025],{"class":71,"line":935},[69,2026,2027],{},"-\n",[69,2029,2030],{"class":71,"line":940},[69,2031,2032],{},"-       // Clear hash after scrolling to allow normal scrolling\n",[69,2034,2035],{"class":71,"line":954},[69,2036,2037],{},"-       setTimeout(() => {\n",[69,2039,2040],{"class":71,"line":972},[69,2041,2042],{},"-         history.replaceState(null, '', window.location.pathname);\n",[69,2044,2045],{"class":71,"line":1005},[69,2046,2047],{},"-       }, 500);\n",[69,2049,2050],{"class":71,"line":1010},[69,2051,2052],{},"      }, 100); // Small delay to ensure layout is complete\n",[69,2054,2055],{"class":71,"line":1016},[69,2056,2057],{},"    }\n",[69,2059,2060],{"class":71,"line":1021},[69,2061,2062],{},"  } else {\n",[69,2064,2065],{"class":71,"line":1033},[69,2066,2067],{},"    // Only call updateProgress on initial load if there's no hash\n",[69,2069,2070],{"class":71,"line":1051},[69,2071,2072],{},"    updateProgress();\n",[69,2074,2075],{"class":71,"line":1082},[69,2076,526],{},[17,2078,2080],{"id":2079},"phase-2の追加スクロールでハッシュ更新","Phase 2の追加（スクロールでハッシュ更新）",[60,2082,2084],{"className":163,"code":2083,"language":165,"meta":65,"style":65},"// activeIndexが変更されたらURLのハッシュも更新\nwatch(activeIndex, (newIndex) => {\n  const step = steps.value[newIndex];\n  if (step) {\n    const ruleId = getRuleId(step);\n    const newHash = `#${ruleId}`;\n\n    // 現在のハッシュと異なる場合のみ更新\n    if (window.location.hash !== newHash) {\n      history.replaceState(null, '', `${window.location.pathname}${newHash}`);\n    }\n  }\n});\n",[32,2085,2086,2091,2111,2134,2147,2164,2186,2190,2195,2220,2263,2267,2271],{"__ignoreMap":65},[69,2087,2088],{"class":71,"line":72},[69,2089,2090],{"class":299},"// activeIndexが変更されたらURLのハッシュも更新\n",[69,2092,2093,2095,2097,2099,2101,2103,2105,2107,2109],{"class":71,"line":184},[69,2094,354],{"class":86},[69,2096,110],{"class":75},[69,2098,359],{"class":187},[69,2100,203],{"class":75},[69,2102,156],{"class":75},[69,2104,366],{"class":187},[69,2106,116],{"class":75},[69,2108,178],{"class":75},[69,2110,181],{"class":75},[69,2112,2113,2115,2118,2120,2123,2125,2127,2129,2131],{"class":71,"line":227},[69,2114,377],{"class":199},[69,2116,2117],{"class":187}," step",[69,2119,383],{"class":75},[69,2121,2122],{"class":187}," steps",[69,2124,191],{"class":75},[69,2126,396],{"class":187},[69,2128,399],{"class":75},[69,2130,366],{"class":187},[69,2132,2133],{"class":75},"];\n",[69,2135,2136,2138,2140,2143,2145],{"class":71,"line":407},[69,2137,451],{"class":79},[69,2139,156],{"class":75},[69,2141,2142],{"class":187},"step",[69,2144,116],{"class":75},[69,2146,181],{"class":75},[69,2148,2149,2152,2154,2156,2158,2160,2162],{"class":71,"line":435},[69,2150,2151],{"class":199},"    const",[69,2153,380],{"class":187},[69,2155,383],{"class":75},[69,2157,386],{"class":86},[69,2159,110],{"class":75},[69,2161,2142],{"class":187},[69,2163,224],{"class":75},[69,2165,2166,2168,2170,2172,2174,2176,2178,2180,2182,2184],{"class":71,"line":442},[69,2167,2151],{"class":199},[69,2169,412],{"class":187},[69,2171,383],{"class":75},[69,2173,417],{"class":96},[69,2175,420],{"class":100},[69,2177,104],{"class":79},[69,2179,425],{"class":100},[69,2181,119],{"class":79},[69,2183,97],{"class":96},[69,2185,432],{"class":75},[69,2187,2188],{"class":71,"line":448},[69,2189,439],{"emptyLinePlaceholder":438},[69,2191,2192],{"class":71,"line":477},[69,2193,2194],{"class":299},"    // 現在のハッシュと異なる場合のみ更新\n",[69,2196,2197,2200,2202,2204,2206,2208,2210,2212,2214,2216,2218],{"class":71,"line":523},[69,2198,2199],{"class":79},"    if",[69,2201,156],{"class":75},[69,2203,456],{"class":187},[69,2205,191],{"class":75},[69,2207,216],{"class":187},[69,2209,191],{"class":75},[69,2211,465],{"class":187},[69,2213,468],{"class":199},[69,2215,412],{"class":187},[69,2217,116],{"class":75},[69,2219,181],{"class":75},[69,2221,2222,2225,2227,2229,2231,2233,2235,2237,2239,2241,2243,2245,2247,2249,2251,2253,2255,2257,2259,2261],{"class":71,"line":529},[69,2223,2224],{"class":187},"      history",[69,2226,191],{"class":75},[69,2228,194],{"class":86},[69,2230,110],{"class":75},[69,2232,200],{"class":199},[69,2234,203],{"class":75},[69,2236,206],{"class":96},[69,2238,203],{"class":75},[69,2240,417],{"class":96},[69,2242,104],{"class":79},[69,2244,456],{"class":100},[69,2246,191],{"class":75},[69,2248,216],{"class":100},[69,2250,191],{"class":75},[69,2252,221],{"class":100},[69,2254,511],{"class":79},[69,2256,514],{"class":100},[69,2258,119],{"class":79},[69,2260,97],{"class":96},[69,2262,224],{"class":75},[69,2264,2265],{"class":71,"line":756},[69,2266,2057],{"class":75},[69,2268,2269],{"class":71,"line":774},[69,2270,526],{"class":75},[69,2272,2273],{"class":71,"line":798},[69,2274,532],{"class":75},[13,2276,2277],{"id":2277},"結論",[56,2279,2280,2283],{},[27,2281,2282],{},"推奨",": アプローチ1（ハッシュベースの改善）から開始し、必要に応じて動的ルーティングを追加",[56,2285,2286],{},"現在の実装は優れたスクロールベースのストーリーテリングUXを提供しているため、これを維持しつつURLの一貫性を改善するのが最善である。",[2288,2289,2290],"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 .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}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 .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);}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}",{"title":65,"searchDepth":184,"depth":184,"links":2292},[2293,2298,2302,2308,2309,2313],{"id":15,"depth":184,"text":15,"children":2294},[2295,2296,2297],{"id":19,"depth":227,"text":19},{"id":53,"depth":227,"text":54},{"id":239,"depth":227,"text":239},{"id":281,"depth":184,"text":281,"children":2299},[2300,2301],{"id":284,"depth":227,"text":285},{"id":535,"depth":227,"text":536},{"id":1670,"depth":184,"text":1670,"children":2303},[2304,2306],{"id":1673,"depth":227,"text":2305},"短期的な解決策: アプローチ1の改善版",{"id":1857,"depth":227,"text":2307},"長期的な選択肢: ハイブリッドアプローチ",{"id":1893,"depth":184,"text":1893},{"id":1916,"depth":184,"text":1917,"children":2310},[2311,2312],{"id":1920,"depth":227,"text":1921},{"id":2079,"depth":227,"text":2080},{"id":2277,"depth":184,"text":2277},null,"ハッシュベースナビゲーションと動的ルーティングの比較検討","md",{},"/coding-standards-viewer-approach-comparison",false,"2025-11-18T00:00:00.000Z",{"title":5,"description":2315},"2025-11/2025-11-18/coding-standards-viewer-approach-comparison",[64,2324,2325,2326],"nuxt","routing","ux","Q_TATTyALFBFNeO5oiO6N9Jc0ottaKraxnnj6Y_eiME",[],[2330,2334,2338,2342,2346],{"title":2331,"path":2332,"publishedAt":2333},"コーディング原則ページのUX大改修：Bad/Good横並び・フローチャート・ベン図抽象化・難易度レベル付け","/coding-principles-ux-overhaul","2026-06-13T00:00:00.000Z",{"title":2335,"path":2336,"publishedAt":2337},"投資判断クイズを2カラムレイアウトへ移行：1ページ完成→コンポーネント化→横展開","/investment-quiz-2col-refactor","2026-05-14T00:00:00.000Z",{"title":2339,"path":2340,"publishedAt":2341},"Nuxt/Vueで選択行をURLクエリパラメータに同期する実装","/nuxt-url-sync-selected-row","2026-01-22T00:00:00.000Z",{"title":2343,"path":2344,"publishedAt":2345},"全18講に触って動くシミュレーターを入れた日 — PR12本のレビューから講座導線の作り直しまで","/code-course-interactive-rollout","2026-07-26T00:00:00.000Z",{"title":2347,"path":2348,"publishedAt":2345},"インタラクティブ教材を1枚に集約し、本文の線を減らした日","/interactive-content-consolidation","https://log.eurekapu.com/og/blog/coding-standards-viewer-approach-comparison.png?v=2025-11-18T00%3A00%3A00.000Z&title=%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E8%A6%8F%E7%B4%84%E3%83%93%E3%83%A5%E3%83%BC%E3%82%A2%E5%AE%9F%E8%A3%85%E3%82%A2%E3%83%97%E3%83%AD%E3%83%BC%E3%83%81%E3%81%AE%E6%AF%94%E8%BC%83&author=Kei%20Komatsu&sig=3b12e2b65b939c82",1785654952940]