[{"data":1,"prerenderedAt":1312},["ShallowReactive",2],{"content-/cf-reference-page-development":3,"all-pages-for-dir":1310,"og-image-/cf-reference-page-development":1311},{"id":4,"title":5,"body":6,"category":1289,"description":1290,"extension":1291,"meta":1292,"navigation":1293,"path":1294,"project_name":1295,"published":1296,"publishedAt":1297,"seo":1298,"stem":1299,"tags":1300,"todo":1307,"unpublished":1296,"updatedAt":1308,"__hash__":1309},"pages/2026-04/2026-04-20/cf-reference-page-development.md","ライブラリなしで全文検索つきCF実務リファレンスページを構築した記録",{"type":7,"value":8,"toc":1273},"minimark",[9,14,18,21,25,50,52,56,59,127,130,132,136,143,352,359,361,364,371,457,460,462,465,468,573,584,586,589,592,829,832,834,837,840,845,878,881,885,913,916,920,949,952,954,958,961,996,999,1077,1080,1082,1085,1092,1248,1251,1253,1256,1259,1266,1269],[10,11,13],"h1",{"id":12},"ライブラリなしで全文検索つきcf実務リファレンスページを構築する","ライブラリなしで全文検索つきCF実務リファレンスページを構築する",[15,16,17],"p",{},"朝、CF（キャッシュ・フロー計算書）の論点一覧を眺めていて手が止まった。31論点・130キーワードを1ページに収めて、外部ライブラリなしで検索もフィルターも効かせたい。ブラウザのネイティブAPIだけで、どこまで実用に耐えるページが作れるか試してみた。",[19,20],"hr",{},[22,23,24],"h2",{"id":24},"やったこと概要",[26,27,28,32,35,38,41,44,47],"ul",{},[29,30,31],"li",{},"2カラムレイアウトの新規ページ構築（左: stickyな論点ナビ、右: キーワード一覧）",[29,33,34],{},"TursoDBから書籍のキーワードデータを取得し、31論点・130キーワードに拡充",[29,36,37],{},"レベルタグ（3級/2級/実務）の付与とフィルター機能",[29,39,40],{},"基準条文のツールチップ/ポップオーバー実装",[29,42,43],{},"矢印キーによる論点間ナビゲーション",[29,45,46],{},"スクロールバー幅ジャンプ問題の解決",[29,48,49],{},"Codexレビューで条文の根拠間違いを5件修正",[19,51],{},[22,53,55],{"id":54},"tursodbからキーワードを引っ張る","TursoDBからキーワードを引っ張る",[15,57,58],{},"最初は手書きで10論点ほど並べていたが、網羅性が足りない。TursoDBに格納済みの書籍データからCF関連キーワードを引いてきた。",[60,61,66],"pre",{"className":62,"code":63,"language":64,"meta":65,"style":65},"language-sql shiki shiki-themes vitesse-light vitesse-light","SELECT topic, keyword, level\nFROM book_keywords\nWHERE subject = 'cf'\nORDER BY topic_order, keyword_order;\n","sql","",[67,68,69,85,94,118],"code",{"__ignoreMap":65},[70,71,74,78,82],"span",{"class":72,"line":73},"line",1,[70,75,77],{"class":76},"sHkkW","SELECT",[70,79,81],{"class":80},"sG7-3"," topic, keyword, ",[70,83,84],{"class":76},"level\n",[70,86,88,91],{"class":72,"line":87},2,[70,89,90],{"class":76},"FROM",[70,92,93],{"class":80}," book_keywords\n",[70,95,97,100,103,107,111,115],{"class":72,"line":96},3,[70,98,99],{"class":76},"WHERE",[70,101,102],{"class":76}," subject",[70,104,106],{"class":105},"stQ0i"," =",[70,108,110],{"class":109},"sMJiu"," '",[70,112,114],{"class":113},"sdGka","cf",[70,116,117],{"class":109},"'\n",[70,119,121,124],{"class":72,"line":120},4,[70,122,123],{"class":76},"ORDER BY",[70,125,126],{"class":80}," topic_order, keyword_order;\n",[15,128,129],{},"これで31論点・130キーワードが一括で取れた。レベル情報（3級/2級/実務）も書籍側で付与済みだったので、そのままフィルターUIのデータソースに使える。",[19,131],{},[22,133,135],{"id":134},"_2カラムレイアウトの設計","2カラムレイアウトの設計",[15,137,138,139,142],{},"左カラムに論点ナビ、右カラムにキーワード一覧を配置。論点ナビは",[67,140,141],{},"position: sticky","で画面上部に固定し、右をスクロールしても論点リストが常に見える。",[60,144,148],{"className":145,"code":146,"language":147,"meta":65,"style":65},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003Ctemplate>\n  \u003Cdiv class=\"reference-layout\">\n    \u003Cnav class=\"topic-nav\">\n      \u003C!-- 31論点を2列で表示 -->\n      \u003Cul class=\"topic-list two-columns\">\n        \u003Cli v-for=\"topic in filteredTopics\" ...>\n          {{ topic.label }}\n        \u003C/li>\n      \u003C/ul>\n    \u003C/nav>\n    \u003Cmain class=\"keyword-panel\">\n      \u003C!-- 各論点のキーワードカード -->\n    \u003C/main>\n  \u003C/div>\n\u003C/template>\n","vue",[67,149,150,162,187,208,214,235,260,266,276,286,296,317,323,332,342],{"__ignoreMap":65},[70,151,152,156,159],{"class":72,"line":73},[70,153,155],{"class":154},"shFtX","\u003C",[70,157,158],{"class":76},"template",[70,160,161],{"class":154},">\n",[70,163,164,167,170,174,177,180,183,185],{"class":72,"line":87},[70,165,166],{"class":154},"  \u003C",[70,168,169],{"class":76},"div",[70,171,173],{"class":172},"s4oTP"," class",[70,175,176],{"class":154},"=",[70,178,179],{"class":109},"\"",[70,181,182],{"class":113},"reference-layout",[70,184,179],{"class":109},[70,186,161],{"class":154},[70,188,189,192,195,197,199,201,204,206],{"class":72,"line":96},[70,190,191],{"class":154},"    \u003C",[70,193,194],{"class":76},"nav",[70,196,173],{"class":172},[70,198,176],{"class":154},[70,200,179],{"class":109},[70,202,203],{"class":113},"topic-nav",[70,205,179],{"class":109},[70,207,161],{"class":154},[70,209,210],{"class":72,"line":120},[70,211,213],{"class":212},"sxvE3","      \u003C!-- 31論点を2列で表示 -->\n",[70,215,217,220,222,224,226,228,231,233],{"class":72,"line":216},5,[70,218,219],{"class":154},"      \u003C",[70,221,26],{"class":76},[70,223,173],{"class":172},[70,225,176],{"class":154},[70,227,179],{"class":109},[70,229,230],{"class":113},"topic-list two-columns",[70,232,179],{"class":109},[70,234,161],{"class":154},[70,236,238,241,243,246,248,250,253,255,258],{"class":72,"line":237},6,[70,239,240],{"class":154},"        \u003C",[70,242,29],{"class":76},[70,244,245],{"class":172}," v-for",[70,247,176],{"class":154},[70,249,179],{"class":109},[70,251,252],{"class":113},"topic in filteredTopics",[70,254,179],{"class":109},[70,256,257],{"class":172}," ...",[70,259,161],{"class":154},[70,261,263],{"class":72,"line":262},7,[70,264,265],{"class":80},"          {{ topic.label }}\n",[70,267,269,272,274],{"class":72,"line":268},8,[70,270,271],{"class":154},"        \u003C/",[70,273,29],{"class":76},[70,275,161],{"class":154},[70,277,279,282,284],{"class":72,"line":278},9,[70,280,281],{"class":154},"      \u003C/",[70,283,26],{"class":76},[70,285,161],{"class":154},[70,287,289,292,294],{"class":72,"line":288},10,[70,290,291],{"class":154},"    \u003C/",[70,293,194],{"class":76},[70,295,161],{"class":154},[70,297,299,301,304,306,308,310,313,315],{"class":72,"line":298},11,[70,300,191],{"class":154},[70,302,303],{"class":76},"main",[70,305,173],{"class":172},[70,307,176],{"class":154},[70,309,179],{"class":109},[70,311,312],{"class":113},"keyword-panel",[70,314,179],{"class":109},[70,316,161],{"class":154},[70,318,320],{"class":72,"line":319},12,[70,321,322],{"class":212},"      \u003C!-- 各論点のキーワードカード -->\n",[70,324,326,328,330],{"class":72,"line":325},13,[70,327,291],{"class":154},[70,329,303],{"class":76},[70,331,161],{"class":154},[70,333,335,338,340],{"class":72,"line":334},14,[70,336,337],{"class":154},"  \u003C/",[70,339,169],{"class":76},[70,341,161],{"class":154},[70,343,345,348,350],{"class":72,"line":344},15,[70,346,347],{"class":154},"\u003C/",[70,349,158],{"class":76},[70,351,161],{"class":154},[15,353,354,355,358],{},"左ナビは当初1列だったが、31論点が縦に並ぶとスクロールが発生する。2列化したら全論点がスクロールなしで視界に収まった。",[67,356,357],{},"grid-template-columns: repeat(2, 1fr)","で済む話だが、スクロールを消せた瞬間、ページの一覧性が一段上がった。",[19,360],{},[22,362,363],{"id":363},"レベルフィルター",[15,365,366,367,370],{},"キーワードごとに3級/2級/実務のバッジを表示し、ヘッダーのトグルボタンでフィルターできる。",[67,368,369],{},"computed","で絞り込むだけのシンプルな実装。",[60,372,376],{"className":373,"code":374,"language":375,"meta":65,"style":65},"language-typescript shiki shiki-themes vitesse-light vitesse-light","const filteredKeywords = computed(() =>\n  keywords.value.filter(kw =>\n    activeFilters.value.includes(kw.level)\n  )\n)\n","typescript",[67,377,378,398,422,448,453],{"__ignoreMap":65},[70,379,380,383,386,388,392,395],{"class":72,"line":73},[70,381,382],{"class":105},"const ",[70,384,385],{"class":172},"filteredKeywords",[70,387,106],{"class":154},[70,389,391],{"class":390},"senZ8"," computed",[70,393,394],{"class":154},"(()",[70,396,397],{"class":154}," =>\n",[70,399,400,403,406,409,411,414,417,420],{"class":72,"line":87},[70,401,402],{"class":172},"  keywords",[70,404,405],{"class":154},".",[70,407,408],{"class":172},"value",[70,410,405],{"class":154},[70,412,413],{"class":390},"filter",[70,415,416],{"class":154},"(",[70,418,419],{"class":172},"kw",[70,421,397],{"class":154},[70,423,424,427,429,431,433,436,438,440,442,445],{"class":72,"line":96},[70,425,426],{"class":172},"    activeFilters",[70,428,405],{"class":154},[70,430,408],{"class":172},[70,432,405],{"class":154},[70,434,435],{"class":390},"includes",[70,437,416],{"class":154},[70,439,419],{"class":172},[70,441,405],{"class":154},[70,443,444],{"class":172},"level",[70,446,447],{"class":154},")\n",[70,449,450],{"class":72,"line":120},[70,451,452],{"class":154},"  )\n",[70,454,455],{"class":72,"line":216},[70,456,447],{"class":154},[15,458,459],{},"「3級だけ表示」にすると130件が40件ほどに絞られ、初学者が迷わない。",[19,461],{},[22,463,464],{"id":464},"基準条文のポップオーバー",[15,466,467],{},"キーワードに紐づく会計基準の条文番号を表示する。最初はマウスオーバーでツールチップを出していたが、モバイルで使えない。クリックで展開するポップオーバーに切り替え、デスクトップではマウスオーバーでも開くようにした。",[60,469,471],{"className":373,"code":470,"language":375,"meta":65,"style":65},"const showPopover = (e: Event, citation: string) => {\n  popoverContent.value = citation\n  popoverTarget.value = e.target as HTMLElement\n  isPopoverVisible.value = true\n}\n",[67,472,473,515,529,554,568],{"__ignoreMap":65},[70,474,475,477,480,482,485,488,491,495,498,501,503,506,509,512],{"class":72,"line":73},[70,476,382],{"class":105},[70,478,479],{"class":390},"showPopover",[70,481,106],{"class":154},[70,483,484],{"class":154}," (",[70,486,487],{"class":172},"e",[70,489,490],{"class":154},": ",[70,492,494],{"class":493},"sSkh3","Event",[70,496,497],{"class":154},",",[70,499,500],{"class":172}," citation",[70,502,490],{"class":154},[70,504,505],{"class":493},"string",[70,507,508],{"class":154},")",[70,510,511],{"class":154}," =>",[70,513,514],{"class":154}," {\n",[70,516,517,520,522,524,526],{"class":72,"line":87},[70,518,519],{"class":172},"  popoverContent",[70,521,405],{"class":154},[70,523,408],{"class":172},[70,525,106],{"class":154},[70,527,528],{"class":172}," citation\n",[70,530,531,534,536,538,540,543,545,548,551],{"class":72,"line":96},[70,532,533],{"class":172},"  popoverTarget",[70,535,405],{"class":154},[70,537,408],{"class":172},[70,539,106],{"class":154},[70,541,542],{"class":172}," e",[70,544,405],{"class":154},[70,546,547],{"class":172},"target",[70,549,550],{"class":76}," as",[70,552,553],{"class":493}," HTMLElement\n",[70,555,556,559,561,563,565],{"class":72,"line":120},[70,557,558],{"class":172},"  isPopoverVisible",[70,560,405],{"class":154},[70,562,408],{"class":172},[70,564,106],{"class":154},[70,566,567],{"class":76}," true\n",[70,569,570],{"class":72,"line":216},[70,571,572],{"class":154},"}\n",[15,574,575,576,579,580,583],{},"Popover APIを使いたかったが、Safari対応を考えて自前実装に落ち着いた。",[67,577,578],{},"position: absolute","と",[67,581,582],{},"getBoundingClientRect()","で位置を計算する古典的なパターン。",[19,585],{},[22,587,588],{"id":588},"矢印キーナビゲーション",[15,590,591],{},"31論点をキーボードの上下矢印で移動できるようにした。論点を選択すると右カラムが該当セクションまでスムーススクロールする。",[60,593,595],{"className":373,"code":594,"language":375,"meta":65,"style":65},"const handleKeydown = (e: KeyboardEvent) => {\n  if (e.key === 'ArrowDown') {\n    e.preventDefault()\n    currentIndex.value = Math.min(currentIndex.value + 1, topics.length - 1)\n    scrollToTopic(currentIndex.value)\n  }\n  if (e.key === 'ArrowUp') {\n    e.preventDefault()\n    currentIndex.value = Math.max(currentIndex.value - 1, 0)\n    scrollToTopic(currentIndex.value)\n  }\n}\n",[67,596,597,621,650,663,716,731,736,761,771,807,821,825],{"__ignoreMap":65},[70,598,599,601,604,606,608,610,612,615,617,619],{"class":72,"line":73},[70,600,382],{"class":105},[70,602,603],{"class":390},"handleKeydown",[70,605,106],{"class":154},[70,607,484],{"class":154},[70,609,487],{"class":172},[70,611,490],{"class":154},[70,613,614],{"class":493},"KeyboardEvent",[70,616,508],{"class":154},[70,618,511],{"class":154},[70,620,514],{"class":154},[70,622,623,626,628,630,632,635,638,641,644,646,648],{"class":72,"line":87},[70,624,625],{"class":76},"  if",[70,627,484],{"class":154},[70,629,487],{"class":172},[70,631,405],{"class":154},[70,633,634],{"class":172},"key",[70,636,637],{"class":105}," === ",[70,639,640],{"class":109},"'",[70,642,643],{"class":113},"ArrowDown",[70,645,640],{"class":109},[70,647,508],{"class":154},[70,649,514],{"class":154},[70,651,652,655,657,660],{"class":72,"line":96},[70,653,654],{"class":172},"    e",[70,656,405],{"class":154},[70,658,659],{"class":390},"preventDefault",[70,661,662],{"class":154},"()\n",[70,664,665,668,670,672,674,677,679,682,684,687,689,691,694,698,700,703,705,709,712,714],{"class":72,"line":120},[70,666,667],{"class":172},"    currentIndex",[70,669,405],{"class":154},[70,671,408],{"class":172},[70,673,106],{"class":154},[70,675,676],{"class":172}," Math",[70,678,405],{"class":154},[70,680,681],{"class":390},"min",[70,683,416],{"class":154},[70,685,686],{"class":172},"currentIndex",[70,688,405],{"class":154},[70,690,408],{"class":172},[70,692,693],{"class":105}," + ",[70,695,697],{"class":696},"sM54T","1",[70,699,497],{"class":154},[70,701,702],{"class":172}," topics",[70,704,405],{"class":154},[70,706,708],{"class":707},"sz8Xr","length",[70,710,711],{"class":105}," - ",[70,713,697],{"class":696},[70,715,447],{"class":154},[70,717,718,721,723,725,727,729],{"class":72,"line":216},[70,719,720],{"class":390},"    scrollToTopic",[70,722,416],{"class":154},[70,724,686],{"class":172},[70,726,405],{"class":154},[70,728,408],{"class":172},[70,730,447],{"class":154},[70,732,733],{"class":72,"line":237},[70,734,735],{"class":154},"  }\n",[70,737,738,740,742,744,746,748,750,752,755,757,759],{"class":72,"line":262},[70,739,625],{"class":76},[70,741,484],{"class":154},[70,743,487],{"class":172},[70,745,405],{"class":154},[70,747,634],{"class":172},[70,749,637],{"class":105},[70,751,640],{"class":109},[70,753,754],{"class":113},"ArrowUp",[70,756,640],{"class":109},[70,758,508],{"class":154},[70,760,514],{"class":154},[70,762,763,765,767,769],{"class":72,"line":268},[70,764,654],{"class":172},[70,766,405],{"class":154},[70,768,659],{"class":390},[70,770,662],{"class":154},[70,772,773,775,777,779,781,783,785,788,790,792,794,796,798,800,802,805],{"class":72,"line":278},[70,774,667],{"class":172},[70,776,405],{"class":154},[70,778,408],{"class":172},[70,780,106],{"class":154},[70,782,676],{"class":172},[70,784,405],{"class":154},[70,786,787],{"class":390},"max",[70,789,416],{"class":154},[70,791,686],{"class":172},[70,793,405],{"class":154},[70,795,408],{"class":172},[70,797,711],{"class":105},[70,799,697],{"class":696},[70,801,497],{"class":154},[70,803,804],{"class":696}," 0",[70,806,447],{"class":154},[70,808,809,811,813,815,817,819],{"class":72,"line":288},[70,810,720],{"class":390},[70,812,416],{"class":154},[70,814,686],{"class":172},[70,816,405],{"class":154},[70,818,408],{"class":172},[70,820,447],{"class":154},[70,822,823],{"class":72,"line":298},[70,824,735],{"class":154},[70,826,827],{"class":72,"line":319},[70,828,572],{"class":154},[15,830,831],{},"キーボード操作を入れた途端、論点間を飛び回る速度が跳ね上がった。マウスでクリックしていたときは「次の論点」に0.5秒かかっていたのが、矢印キーなら連打で一瞬。",[19,833],{},[22,835,836],{"id":836},"スクロールバー幅ジャンプ問題との格闘",[15,838,839],{},"フィルターを切り替えるたびにコンテンツ量が変わり、スクロールバーの出現/消失でページ全体が左右に2〜3pxジャンプする。地味だが、目に刺さる。",[841,842,844],"h3",{"id":843},"試行1-scrollbar-gutter","試行1: scrollbar-gutter",[60,846,850],{"className":847,"code":848,"language":849,"meta":65,"style":65},"language-css shiki shiki-themes vitesse-light vitesse-light",".keyword-panel {\n  scrollbar-gutter: stable;\n}\n","css",[67,851,852,860,874],{"__ignoreMap":65},[70,853,854,856,858],{"class":72,"line":73},[70,855,405],{"class":154},[70,857,312],{"class":172},[70,859,514],{"class":154},[70,861,862,865,868,871],{"class":72,"line":87},[70,863,864],{"class":707},"  scrollbar-gutter",[70,866,867],{"class":154},":",[70,869,870],{"class":80}," stable",[70,872,873],{"class":154},";\n",[70,875,876],{"class":72,"line":96},[70,877,572],{"class":154},[15,879,880],{},"Chromeでは効いたがFirefoxの挙動が微妙で、パネルの右端に常時スペースが空く見た目が気になった。",[841,882,884],{"id":883},"試行2-min-width-0","試行2: min-width: 0",[60,886,888],{"className":847,"code":887,"language":849,"meta":65,"style":65},".reference-layout {\n  min-width: 0;\n}\n",[67,889,890,898,909],{"__ignoreMap":65},[70,891,892,894,896],{"class":72,"line":73},[70,893,405],{"class":154},[70,895,182],{"class":172},[70,897,514],{"class":154},[70,899,900,903,905,907],{"class":72,"line":87},[70,901,902],{"class":707},"  min-width",[70,904,867],{"class":154},[70,906,804],{"class":696},[70,908,873],{"class":154},[70,910,911],{"class":72,"line":96},[70,912,572],{"class":154},[15,914,915],{},"Grid/Flexの子要素が暗黙の最小幅を持つ問題への対処。ジャンプは軽減されたが完全には消えない。",[841,917,919],{"id":918},"試行3-html要素にoverflow-y-scroll強制採用","試行3: html要素にoverflow-y: scroll強制（採用）",[60,921,923],{"className":847,"code":922,"language":849,"meta":65,"style":65},"html {\n  overflow-y: scroll;\n}\n",[67,924,925,932,945],{"__ignoreMap":65},[70,926,927,930],{"class":72,"line":73},[70,928,929],{"class":76},"html",[70,931,514],{"class":154},[70,933,934,937,939,943],{"class":72,"line":87},[70,935,936],{"class":707},"  overflow-y",[70,938,867],{"class":154},[70,940,942],{"class":941},"snbK4"," scroll",[70,944,873],{"class":154},[70,946,947],{"class":72,"line":96},[70,948,572],{"class":154},[15,950,951],{},"常にスクロールバーを表示させることで、出現/消失自体を起こさない。最もシンプルで副作用がない。スクロールバーが常に見えること自体はユーザーに違和感を与えない（ほとんどのサイトはコンテンツがあるのでどのみち表示されている）。この1行で問題が消えた。",[19,953],{},[22,955,957],{"id":956},"codexレビューで条文の根拠間違いを修正","Codexレビューで条文の根拠間違いを修正",[15,959,960],{},"130キーワードに紐づけた基準条文の番号を、Codex rescueサブエージェントにレビューさせた。",[60,962,966],{"className":963,"code":964,"language":965,"meta":65,"style":65},"language-bash shiki shiki-themes vitesse-light vitesse-light","codex exec -m gpt-5.4 \"以下のCFキーワードと条文番号の対応を検証して。\n間違いがあれば正しい条文番号を教えて: {file_path}\"\n","bash",[67,967,968,988],{"__ignoreMap":65},[70,969,970,973,976,979,982,985],{"class":72,"line":73},[70,971,972],{"class":390},"codex",[70,974,975],{"class":113}," exec",[70,977,978],{"class":941}," -m",[70,980,981],{"class":113}," gpt-5.4",[70,983,984],{"class":109}," \"",[70,986,987],{"class":113},"以下のCFキーワードと条文番号の対応を検証して。\n",[70,989,990,993],{"class":72,"line":87},[70,991,992],{"class":113},"間違いがあれば正しい条文番号を教えて: {file_path}",[70,994,995],{"class":109},"\"\n",[15,997,998],{},"5件の誤りが返ってきた:",[1000,1001,1002,1018],"table",{},[1003,1004,1005],"thead",{},[1006,1007,1008,1012,1015],"tr",{},[1009,1010,1011],"th",{},"キーワード",[1009,1013,1014],{},"誤",[1009,1016,1017],{},"正",[1019,1020,1021,1033,1044,1055,1066],"tbody",{},[1006,1022,1023,1027,1030],{},[1024,1025,1026],"td",{},"利息の受取額",[1024,1028,1029],{},"基準8項",[1024,1031,1032],{},"基準9項",[1006,1034,1035,1038,1041],{},[1024,1036,1037],{},"為替差損益",[1024,1039,1040],{},"基準12項",[1024,1042,1043],{},"実務指針3項",[1006,1045,1046,1049,1052],{},[1024,1047,1048],{},"非資金損益項目",[1024,1050,1051],{},"基準6項(2)",[1024,1053,1054],{},"基準14項(2)",[1006,1056,1057,1060,1063],{},[1024,1058,1059],{},"連結範囲の変動",[1024,1061,1062],{},"基準30項",[1024,1064,1065],{},"基準33項",[1006,1067,1068,1071,1074],{},[1024,1069,1070],{},"重要な非資金取引",[1024,1072,1073],{},"注記なし",[1024,1075,1076],{},"基準48項",[15,1078,1079],{},"人間が1つずつ基準書を引いて確認するより圧倒的に速い。ただし「Codexが正しいか」の最終検証は自分で基準書を開いて行った。AIが出した修正を鵜呑みにしない——この手順は省略できない。",[19,1081],{},[22,1083,1084],{"id":1084},"全文検索の実装",[15,1086,1087,1088,1091],{},"外部ライブラリ（Fuse.js, MiniSearch等）を使わず、ネイティブの",[67,1089,1090],{},"String.prototype.includes()","で検索を回す。130件程度ならインデックス不要で瞬時に返る。",[60,1093,1095],{"className":373,"code":1094,"language":375,"meta":65,"style":65},"const searchResults = computed(() => {\n  if (!query.value) return allKeywords.value\n  const q = query.value.toLowerCase()\n  return allKeywords.value.filter(kw =>\n    kw.keyword.toLowerCase().includes(q) ||\n    kw.description.toLowerCase().includes(q)\n  )\n})\n",[67,1096,1097,1114,1143,1167,1188,1216,1239,1243],{"__ignoreMap":65},[70,1098,1099,1101,1104,1106,1108,1110,1112],{"class":72,"line":73},[70,1100,382],{"class":105},[70,1102,1103],{"class":172},"searchResults",[70,1105,106],{"class":154},[70,1107,391],{"class":390},[70,1109,394],{"class":154},[70,1111,511],{"class":154},[70,1113,514],{"class":154},[70,1115,1116,1118,1120,1123,1126,1128,1130,1132,1135,1138,1140],{"class":72,"line":87},[70,1117,625],{"class":76},[70,1119,484],{"class":154},[70,1121,1122],{"class":105},"!",[70,1124,1125],{"class":172},"query",[70,1127,405],{"class":154},[70,1129,408],{"class":172},[70,1131,508],{"class":154},[70,1133,1134],{"class":76}," return",[70,1136,1137],{"class":172}," allKeywords",[70,1139,405],{"class":154},[70,1141,1142],{"class":172},"value\n",[70,1144,1145,1148,1151,1153,1156,1158,1160,1162,1165],{"class":72,"line":96},[70,1146,1147],{"class":105},"  const ",[70,1149,1150],{"class":172},"q",[70,1152,106],{"class":154},[70,1154,1155],{"class":172}," query",[70,1157,405],{"class":154},[70,1159,408],{"class":172},[70,1161,405],{"class":154},[70,1163,1164],{"class":390},"toLowerCase",[70,1166,662],{"class":154},[70,1168,1169,1172,1174,1176,1178,1180,1182,1184,1186],{"class":72,"line":120},[70,1170,1171],{"class":76},"  return",[70,1173,1137],{"class":172},[70,1175,405],{"class":154},[70,1177,408],{"class":172},[70,1179,405],{"class":154},[70,1181,413],{"class":390},[70,1183,416],{"class":154},[70,1185,419],{"class":172},[70,1187,397],{"class":154},[70,1189,1190,1193,1195,1198,1200,1202,1205,1207,1209,1211,1213],{"class":72,"line":216},[70,1191,1192],{"class":172},"    kw",[70,1194,405],{"class":154},[70,1196,1197],{"class":172},"keyword",[70,1199,405],{"class":154},[70,1201,1164],{"class":390},[70,1203,1204],{"class":154},"().",[70,1206,435],{"class":390},[70,1208,416],{"class":154},[70,1210,1150],{"class":172},[70,1212,508],{"class":154},[70,1214,1215],{"class":105}," ||\n",[70,1217,1218,1220,1222,1225,1227,1229,1231,1233,1235,1237],{"class":72,"line":237},[70,1219,1192],{"class":172},[70,1221,405],{"class":154},[70,1223,1224],{"class":172},"description",[70,1226,405],{"class":154},[70,1228,1164],{"class":390},[70,1230,1204],{"class":154},[70,1232,435],{"class":390},[70,1234,416],{"class":154},[70,1236,1150],{"class":172},[70,1238,447],{"class":154},[70,1240,1241],{"class":72,"line":262},[70,1242,452],{"class":154},[70,1244,1245],{"class":72,"line":268},[70,1246,1247],{"class":154},"})\n",[15,1249,1250],{},"入力のたびにフィルターが走るが、130件の文字列比較など1ms未満。ライブラリを入れる判断は「数千件を超えたとき」でいい。",[19,1252],{},[22,1254,1255],{"id":1255},"振り返り",[15,1257,1258],{},"朝の「31論点を1ページに収めたい」から始めて、夕方にはフィルター・検索・キーボードナビ・条文ポップオーバーが揃ったページが動いていた。外部ライブラリゼロでここまで来れたのは、データ量が130件と少ないおかげ。",[15,1260,1261,1262,1265],{},"スクロールバーのジャンプ問題は3段階の試行錯誤を経て",[67,1263,1264],{},"html { overflow-y: scroll }","の1行に着地した。複雑な解決策から試して、最終的に最もシンプルな方法が勝つパターンは何度経験しても面白い。",[15,1267,1268],{},"Codexレビューで条文の誤りが5件見つかったのは収穫。自分の記憶だけで条文番号を書いていたら、気づかないまま公開していた。AIに「事実の検証」を委ねる運用が、こういうリファレンス系コンテンツでは特に効く。",[1270,1271,1272],"style",{},"html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}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 .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}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 pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}",{"title":65,"searchDepth":87,"depth":87,"links":1274},[1275,1276,1277,1278,1279,1280,1281,1286,1287,1288],{"id":24,"depth":87,"text":24},{"id":54,"depth":87,"text":55},{"id":134,"depth":87,"text":135},{"id":363,"depth":87,"text":363},{"id":464,"depth":87,"text":464},{"id":588,"depth":87,"text":588},{"id":836,"depth":87,"text":836,"children":1282},[1283,1284,1285],{"id":843,"depth":96,"text":844},{"id":883,"depth":96,"text":884},{"id":918,"depth":96,"text":919},{"id":956,"depth":87,"text":957},{"id":1084,"depth":87,"text":1084},{"id":1255,"depth":87,"text":1255},"dev","TursoDBから130キーワードを取得し、2カラムレイアウト・レベルフィルター・条文ポップオーバー・矢印キーナビを備えた検索可能なリファレンスページをVanilla実装した開発ログ","md",{},true,"/cf-reference-page-development","eurekapu-nuxt4",false,"2026-04-20T00:00:00.000Z",{"title":5,"description":1290},"2026-04/2026-04-20/cf-reference-page-development",[1301,1302,1303,1304,1305,1306],"CF","全文検索","Nuxt","TursoDB","UX","Codex","memo",null,"-41tQRovWoVxxWDRZ59pPxLwD7WZQe_1SLxrkzYwqWw",[],"https://log.eurekapu.com/og/blog/cf-reference-page-development.png?v=2026-04-20T00%3A00%3A00.000Z&title=%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AA%E3%81%97%E3%81%A7%E5%85%A8%E6%96%87%E6%A4%9C%E7%B4%A2%E3%81%A4%E3%81%8DCF%E5%AE%9F%E5%8B%99%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%97%E3%81%9F%E8%A8%98%E9%8C%B2&author=Kei%20Komatsu&sig=9dc2556a65ee03a1",1780786053322]