[{"data":1,"prerenderedAt":1075},["ShallowReactive",2],{"content-/coding-principles-ux-overhaul":3,"related-/coding-principles-ux-overhaul":1028,"all-pages-for-dir":1073,"og-image-/coding-principles-ux-overhaul":1074},{"id":4,"title":5,"body":6,"category":1006,"description":1007,"extension":1008,"meta":1009,"navigation":191,"path":1010,"project_name":1011,"published":1012,"publishedAt":1013,"seo":1014,"stem":1015,"tags":1016,"todo":1026,"unpublished":1012,"updatedAt":1026,"__hash__":1027},"pages/2026-06/2026-06-13/coding-principles-ux-overhaul.md","コーディング原則ページのUX大改修：Bad/Good横並び・フローチャート・ベン図抽象化・難易度レベル付け",{"type":7,"value":8,"toc":985},"minimark",[9,13,21,56,59,63,66,76,250,253,257,268,277,281,284,287,293,300,304,310,315,318,321,324,332,335,339,342,347,350,365,372,376,382,456,459,462,465,468,471,475,482,486,489,494,497,502,509,513,520,523,530,534,537,589,598,875,890,893,903,910,914,917,943,946,949,952,981],[10,11,12],"h2",{"id":12},"この日にやったこと",[14,15,16,20],"p",{},[17,18,19],"code",{},"/coding-principles"," ページに4つの大改修を一気に入れた。",[22,23,24,32,38,44,50],"ol",{},[25,26,27,31],"li",{},[28,29,30],"strong",{},"Bad/Good を横並びに","（縦に積み上がっていた比較を左右並びに）",[25,33,34,37],{},[28,35,36],{},"コンテンツ領域の max-width 撤去","（横幅を解放してコードの折り返しを減らす）",[25,39,40,43],{},[28,41,42],{},"前提条件フローチャート","（「何を実装しようとしているのか」を Bad/Good の間に挟む）",[25,45,46,49],{},[28,47,48],{},"ベン図による抽象化セクション","（Bad=影を削る／Good=光を直接定義する、をド・モルガンの法則で整理）",[25,51,52,55],{},[28,53,54],{},"全62トピックに初級・中級・上級のレベル付け","（Codex レビューを噛ませて配分を調整、星3つで表示）",[14,57,58],{},"地味な配置調整から始まり、最終的には「コーディング原則の整理軸そのものをベン図と集合論で抽象化する」ところまで広がった日になった。",[10,60,62],{"id":61},"_1-badgood-を縦から横に並べ替える","1. Bad/Good を縦から横に並べ替える",[14,64,65],{},"最初は単純な見た目の不満から始まった。Bad と Good のコード例が縦に上下で並んでいて、目を上下に走らせないと差分が掴めない。",[14,67,68,71,72,75],{},[17,69,70],{},"CodeGoodBadWrapper.vue"," を 2列の grid に変えて、768px 以下では従来通り縦積みに戻すレスポンシブにした。横長のコードがはみ出さないように ",[17,73,74],{},"min-width: 0"," も忘れず入れる。",[77,78,83],"pre",{"className":79,"code":80,"language":81,"meta":82,"style":82},"language-css shiki shiki-themes vitesse-light vitesse-light",".examples-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1rem;\n}\n.example { min-width: 0; }\n\n@media (max-width: 768px) {\n  .examples-row { grid-template-columns: 1fr; }\n}\n","css","",[17,84,85,101,118,140,155,161,186,193,222,245],{"__ignoreMap":82},[86,87,90,94,98],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"shFtX",".",[86,95,97],{"class":96},"s4oTP","examples-row",[86,99,100],{"class":92}," {\n",[86,102,104,108,111,115],{"class":88,"line":103},2,[86,105,107],{"class":106},"sz8Xr","  display",[86,109,110],{"class":92},":",[86,112,114],{"class":113},"snbK4"," grid",[86,116,117],{"class":92},";\n",[86,119,121,124,126,130,134,136,138],{"class":88,"line":120},3,[86,122,123],{"class":106},"  grid-template-columns",[86,125,110],{"class":92},[86,127,129],{"class":128},"sM54T"," 1",[86,131,133],{"class":132},"stQ0i","fr",[86,135,129],{"class":128},[86,137,133],{"class":132},[86,139,117],{"class":92},[86,141,143,146,148,150,153],{"class":88,"line":142},4,[86,144,145],{"class":106},"  gap",[86,147,110],{"class":92},[86,149,129],{"class":128},[86,151,152],{"class":132},"rem",[86,154,117],{"class":92},[86,156,158],{"class":88,"line":157},5,[86,159,160],{"class":92},"}\n",[86,162,164,166,169,172,175,177,180,183],{"class":88,"line":163},6,[86,165,93],{"class":92},[86,167,168],{"class":96},"example",[86,170,171],{"class":92}," {",[86,173,174],{"class":106}," min-width",[86,176,110],{"class":92},[86,178,179],{"class":128}," 0",[86,181,182],{"class":92},";",[86,184,185],{"class":92}," }\n",[86,187,189],{"class":88,"line":188},7,[86,190,192],{"emptyLinePlaceholder":191},true,"\n",[86,194,196,199,203,206,209,211,214,217,220],{"class":88,"line":195},8,[86,197,198],{"class":92},"@",[86,200,202],{"class":201},"sHkkW","media",[86,204,205],{"class":92}," (",[86,207,208],{"class":106},"max-width",[86,210,110],{"class":92},[86,212,213],{"class":128}," 768",[86,215,216],{"class":132},"px",[86,218,219],{"class":92},")",[86,221,100],{"class":92},[86,223,225,228,230,232,235,237,239,241,243],{"class":88,"line":224},9,[86,226,227],{"class":92},"  .",[86,229,97],{"class":96},[86,231,171],{"class":92},[86,233,234],{"class":106}," grid-template-columns",[86,236,110],{"class":92},[86,238,129],{"class":128},[86,240,133],{"class":132},[86,242,182],{"class":92},[86,244,185],{"class":92},[86,246,248],{"class":88,"line":247},10,[86,249,160],{"class":92},[14,251,252],{},"この時点で「あ、Bad は条件を3段ネストしてるのに Good は早期 return で1段で済んでる」が一目で見える。縦並びだと感じなかった差が、横並びにした瞬間に視線で勝手に差し引きされる。",[10,254,256],{"id":255},"_2-コンテンツ領域の-max-width-を外す","2. コンテンツ領域の max-width を外す",[14,258,259,260,263,264,267],{},"横並びにしたら今度は「コードが折り返されすぎ」になった。原因は ",[17,261,262],{},"TopicDetail.vue"," に置いてあった ",[17,265,266],{},"max-width: 880px"," で、いわゆる本文の可読幅制限が Bad/Good の左右並びに対しては狭すぎた。",[14,269,270,272,273,276],{},[17,271,266],{}," を ",[17,274,275],{},"none"," に切り替えて、親コンテナの幅いっぱいまで解放した。これで Bad/Good のコードがそれぞれ十分な横幅を持ち、不要な改行が消えた。",[10,278,280],{"id":279},"_3-前提条件フローチャートコーディング以前に何を実装しているかを見せる","3. 前提条件フローチャート：コーディング以前に「何を実装しているか」を見せる",[14,282,283],{},"ここから一気に話が広がる。",[14,285,286],{},"ユーザーから「2-1 の確定申告の電子送信判定で、何を実装しようとしているかの前提条件チャートを Bad/Good の間に入れて」という要望が来た。理由が刺さった。",[288,289,290],"blockquote",{},[14,291,292],{},"コーディング原則の話だが、何を実装しているか頭に入っていないとコーディングが進まない。",[14,294,295,296,299],{},"たしかにそうで、",[17,297,298],{},"canSelfTransmit()"," の Bad/Good を眺める前に「そもそもどんな条件を満たしたら自己送信OKなのか」が読み手の頭にないと、ネストの深さや早期 return の意義を判断できない。",[301,302,303],"h3",{"id":303},"最初は縦並びチャートで作って却下された",[14,305,306,309],{},[17,307,308],{},"PreconditionChart.vue"," を新規に作って、データ駆動で条件を縦に並べる仕様で実装した。dev サーバーで見せて「これでどうですか」と出したら、即座に却下されて方針修正が入った。",[288,311,312],{},[14,313,314],{},"いや、フローチャート（左→右に Yes/No で分岐）が欲しかったんですよ。",[14,316,317],{},"縦並びは「条件のリスト」であって「フロー」ではない。横方向にステップが流れて、各ステップで Yes なら右、No なら下の失敗ボックスに落ちる、という構造に作り直した。",[301,319,320],{"id":320},"装飾を削ぎ落として地味な情報帯にする",[14,322,323],{},"横方向フローに作り直したら今度は「装飾が強すぎて Bad/Good より目立つ」状態になった。フローチャート自体が主役を奪ってしまっては本末転倒なので、影・グラデーション・色付き背景を全部抜いて、枠線だけのプレーンなボックスにした。",[77,325,330],{"className":326,"code":328,"language":329},[327],"language-text","[ ステップ1: 確定 ] → Yes → [ ステップ2: マイナンバーカード保有 ] → Yes → [ 自己送信OK ]\n                                       ↓ No\n                                [ 自己送信不可 ]\n","text",[17,331,328],{"__ignoreMap":82},[14,333,334],{},"主役はあくまで Bad/Good のコード本体で、フローチャートは「これから読むコードはこの判定をやっている」という前提情報のスペース、という位置取りに落ちた。",[10,336,338],{"id":337},"_4-ベン図による抽象化光ではなく影を削るという発想","4. ベン図による抽象化：光ではなく影を削るという発想",[14,340,341],{},"ここがこの日の一番の発見だった。フローチャートを見ながらユーザーが投げてきた問いがこれ。",[288,343,344],{},[14,345,346],{},"このセルフトランスミット関数を実行する条件、直線で進むときの条件分岐を示すのではなく、「影について条件分岐を書いて、残りが全部用」っていう整理。これって光と影、陰陽みたいなもので、抽象化できるはず。ベン図で説明できる気がする。",[14,348,349],{},"腕を組んで一度天井を見上げてから「なるほど、これはド・モルガンの法則そのものだ」と返事を打った。",[351,352,353,359],"ul",{},[25,354,355,358],{},[28,356,357],{},"Bad",": 「自己送信不可な影」を一つずつ列挙して、全部を削り取った残りを「自己送信OK」とする",[25,360,361,364],{},[28,362,363],{},"Good",": 「自己送信OKな光」を直接、ポジティブな条件として定義する",[14,366,367,368,371],{},"論理的にはまったく同じ集合を指しているのに、書き方の向きが反対になっている。",[17,369,370],{},"!(A ∧ B ∧ C) ≡ ¬A ∨ ¬B ∨ ¬C"," のド・モルガンを、コードの書き方の選択として読み替える視点。",[301,373,375],{"id":374},"topicabstractionvue-でベン図と集合論メモを描く","TopicAbstraction.vue でベン図と集合論メモを描く",[14,377,378,381],{},[17,379,380],{},"TopicAbstraction.vue"," という抽象化セクション用のコンポーネントを新しく切って、SVG でベン図を描き、集合論メモ（ド・モルガンの法則）と比較表をその下に置いた。比較表はこの4軸。",[383,384,385,401],"table",{},[386,387,388],"thead",{},[389,390,391,395,398],"tr",{},[392,393,394],"th",{},"観点",[392,396,397],{},"Bad（影を削る）",[392,399,400],{},"Good（光を直接定義する）",[402,403,404,416,434,445],"tbody",{},[389,405,406,410,413],{},[407,408,409],"td",{},"書き方の向き",[407,411,412],{},"失敗条件を列挙して残りを成功とみなす",[407,414,415],{},"成功条件を一つの式で定義する",[389,417,418,421,428],{},[407,419,420],{},"名前の付き方",[407,422,423,424,427],{},"否定形（",[17,425,426],{},"!isInvalid","）",[407,429,430,431,427],{},"肯定形（",[17,432,433],{},"canSelfTransmit",[389,435,436,439,442],{},[407,437,438],{},"主処理の位置",[407,440,441],{},"ネストの一番奥に追いやられる",[407,443,444],{},"関数の主軸に来る",[389,446,447,450,453],{},[407,448,449],{},"条件追加のコスト",[407,451,452],{},"影の if が一個増える",[407,454,455],{},"光の式が一節伸びる",[14,457,458],{},"最後に「型の絞り込み」「バリデーション」「フィルタ処理」「権限チェック」の4分野で同じ構造（Bad=影／Good=光）が現れる例を並べて、トピック1-2の話を一般則まで持ち上げた。",[14,460,461],{},"dev サーバーで描画を確認しに行ったら、ベン図の重なり領域・集合論メモ・比較表・一般化例・締めの文まで一画面に揃って、抽象度の階段が3段（具体コード→ベン図→一般則）に伸びた構造になっていた。",[301,463,464],{"id":464},"学び",[14,466,467],{},"「光を直接定義する vs 影を削って残りを光にする」は、コーディング原則のかなり広い範囲で再利用できる軸だと気づいた。早期 return、ガード節、型ナローイング、フィルタ条件、権限チェックなど、別々に教わるテクニックの根っこに同じ集合論の構造が走っている。",[14,469,470],{},"「形容詞で言えば『光寄り』『影寄り』、動詞で言えば『削る』『定義する』」というラベル付けをしておけば、別の章を読むときも「これは光側の話か影側の話か」と即座に位置付けられる。",[10,472,474],{"id":473},"_5-1-3-に-good-パターンを追加","5. 1-3 に Good パターンを追加",[14,476,477,478,481],{},"ここで脱線。",[17,479,480],{},"/coding-principles/1/3"," を確認したらコンパリゾン1（保有銘柄クラス）と2（生焼けオブジェクト）に Good 例が抜けていた。Bad だけ並んでいる状態は「で、どう書けばいいの？」という疑問を残してしまうので、両方に Good を足した。横並びレイアウトが入ったあとなので、Bad と Good が左右に並んで一目で対比できる状態に整った。",[10,483,485],{"id":484},"_6-全62トピックに初級中級上級のレベル付け","6. 全62トピックに初級・中級・上級のレベル付け",[14,487,488],{},"午後の本丸。",[288,490,491],{},[14,492,493],{},"グッドとバッドの左カラムと2列目のカラムに、レベルを記入してほしい。初歩的・中級・上級の3段階で。",[14,495,496],{},"判定軸の例も明確だった。",[288,498,499],{},[14,500,501],{},"意味のまとまりでメソッドを分けるとか、目的ごとに変数を分けるとかは初歩的。変数の意味がなくなるから名前を変える、というのは直感的に理解できる。初期の段階で「これ変じゃない？」って気づくじゃないですか。",[14,503,504,505,508],{},"つまり「",[28,506,507],{},"知識・経験がなくても直感的に違和感を持てるか","」で初級／中級／上級を分ける、という軸。",[301,510,512],{"id":511},"memo-にまとめてから-codexgpt-5でレビュー","memo にまとめてから Codex（GPT-5）でレビュー",[14,514,515,516,519],{},"全60件と思っていたが、実装中に数え直したら全62件あった。全部をいきなり実コードに反映する前に、",[17,517,518],{},"memo/2026-06-13/coding-principles-level-assignment.md"," にレベル案と根拠を一覧表で書き出して、Codex（gpt-5）に投げてレビューしてもらった。",[14,521,522],{},"返ってきたのは8項目の指摘。本文（コード例の主題）と照らした結果、いくつかは「直感的な命名問題ではなく、設計知識を要求する話なので中級に上げるべき」「実は初学者でも気づくレベルなので初級に下げるべき」といった微調整。",[14,524,525,526,529],{},"最終配分は ",[28,527,528],{},"★☆☆ 初級 20件 / ★★☆ 中級 28件 / ★★★ 上級 14件","。中級が一番厚いのは、コーディング原則の本丸が「設計の文法を学んで初めて違和感を持てる」中級帯にあるという事実をきれいに反映していて、配分を見ているだけでも面白い。",[301,531,533],{"id":532},"実装types-各-chapter-ファイル-levelstars-表示3箇所","実装：types → 各 chapter ファイル → LevelStars → 表示3箇所",[14,535,536],{},"実装順序はこれ。",[22,538,539,549,566,573,579],{},[25,540,541,544,545,548],{},[17,542,543],{},"types.ts"," に ",[17,546,547],{},"PrincipleLevel = 'beginner' | 'intermediate' | 'advanced'"," を追加",[25,550,551,554,555,558,559,272,562,565],{},[17,552,553],{},"chapter01.ts"," 〜 ",[17,556,557],{},"chapter14.ts"," の各トピックに ",[17,560,561],{},"level:",[17,563,564],{},"name:"," の直後に挿入",[25,567,568,569,572],{},"星3つを塗り分ける ",[17,570,571],{},"LevelStars.vue"," を新規作成",[25,574,575,578],{},[17,576,577],{},"chapters.ts"," に章レベル算出ユーティリティ（章内トピックの最頻レベル）を追加",[25,580,581,582,585,586,588],{},"Miller Columns 一覧、モバイル一覧（",[17,583,584],{},"index.vue","）、トピック詳細（",[17,587,262],{},"）の3箇所に星を組み込む",[14,590,591,593,594,597],{},[17,592,571],{}," の核心はシンプルで、",[17,595,596],{},"beginner=1, intermediate=2, advanced=3"," の数だけ ★ を塗りつぶす。",[77,599,603],{"className":600,"code":601,"language":602,"meta":82,"style":82},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003Cscript setup lang=\"ts\">\nconst filledCount = computed(() => {\n  if (props.level === 'beginner') return 1\n  if (props.level === 'intermediate') return 2\n  return 3\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cspan class=\"level-stars\" :aria-label=\"`難易度: ${label}`\">\n    \u003Cspan v-for=\"i in 3\" :key=\"i\" class=\"star\" :class=\"{ filled: i \u003C= filledCount }\">★\u003C/span>\n  \u003C/span>\n\u003C/template>\n","vue",[17,604,605,635,658,692,720,728,733,742,746,755,788,856,866],{"__ignoreMap":82},[86,606,607,610,613,616,619,622,626,630,632],{"class":88,"line":89},[86,608,609],{"class":92},"\u003C",[86,611,612],{"class":201},"script",[86,614,615],{"class":96}," setup",[86,617,618],{"class":96}," lang",[86,620,621],{"class":92},"=",[86,623,625],{"class":624},"sMJiu","\"",[86,627,629],{"class":628},"sdGka","ts",[86,631,625],{"class":624},[86,633,634],{"class":92},">\n",[86,636,637,640,643,646,650,653,656],{"class":88,"line":103},[86,638,639],{"class":132},"const ",[86,641,642],{"class":96},"filledCount",[86,644,645],{"class":92}," =",[86,647,649],{"class":648},"senZ8"," computed",[86,651,652],{"class":92},"(()",[86,654,655],{"class":92}," =>",[86,657,100],{"class":92},[86,659,660,663,665,668,670,673,676,679,682,684,686,689],{"class":88,"line":120},[86,661,662],{"class":201},"  if",[86,664,205],{"class":92},[86,666,667],{"class":96},"props",[86,669,93],{"class":92},[86,671,672],{"class":96},"level",[86,674,675],{"class":132}," === ",[86,677,678],{"class":624},"'",[86,680,681],{"class":628},"beginner",[86,683,678],{"class":624},[86,685,219],{"class":92},[86,687,688],{"class":201}," return",[86,690,691],{"class":128}," 1\n",[86,693,694,696,698,700,702,704,706,708,711,713,715,717],{"class":88,"line":142},[86,695,662],{"class":201},[86,697,205],{"class":92},[86,699,667],{"class":96},[86,701,93],{"class":92},[86,703,672],{"class":96},[86,705,675],{"class":132},[86,707,678],{"class":624},[86,709,710],{"class":628},"intermediate",[86,712,678],{"class":624},[86,714,219],{"class":92},[86,716,688],{"class":201},[86,718,719],{"class":128}," 2\n",[86,721,722,725],{"class":88,"line":157},[86,723,724],{"class":201},"  return",[86,726,727],{"class":128}," 3\n",[86,729,730],{"class":88,"line":163},[86,731,732],{"class":92},"})\n",[86,734,735,738,740],{"class":88,"line":188},[86,736,737],{"class":92},"\u003C/",[86,739,612],{"class":201},[86,741,634],{"class":92},[86,743,744],{"class":88,"line":195},[86,745,192],{"emptyLinePlaceholder":191},[86,747,748,750,753],{"class":88,"line":224},[86,749,609],{"class":92},[86,751,752],{"class":201},"template",[86,754,634],{"class":92},[86,756,757,760,762,765,767,769,772,774,777,779,781,784,786],{"class":88,"line":247},[86,758,759],{"class":92},"  \u003C",[86,761,86],{"class":201},[86,763,764],{"class":96}," class",[86,766,621],{"class":92},[86,768,625],{"class":624},[86,770,771],{"class":628},"level-stars",[86,773,625],{"class":624},[86,775,776],{"class":96}," :aria-label",[86,778,621],{"class":92},[86,780,625],{"class":624},[86,782,783],{"class":628},"`難易度: ${label}`",[86,785,625],{"class":624},[86,787,634],{"class":92},[86,789,791,794,796,799,801,803,806,808,811,813,815,818,820,822,824,826,829,831,834,836,838,841,843,846,850,852,854],{"class":88,"line":790},11,[86,792,793],{"class":92},"    \u003C",[86,795,86],{"class":201},[86,797,798],{"class":96}," v-for",[86,800,621],{"class":92},[86,802,625],{"class":624},[86,804,805],{"class":628},"i in 3",[86,807,625],{"class":624},[86,809,810],{"class":96}," :key",[86,812,621],{"class":92},[86,814,625],{"class":624},[86,816,817],{"class":628},"i",[86,819,625],{"class":624},[86,821,764],{"class":96},[86,823,621],{"class":92},[86,825,625],{"class":624},[86,827,828],{"class":628},"star",[86,830,625],{"class":624},[86,832,833],{"class":96}," :class",[86,835,621],{"class":92},[86,837,625],{"class":624},[86,839,840],{"class":628},"{ filled: i \u003C= filledCount }",[86,842,625],{"class":624},[86,844,845],{"class":92},">",[86,847,849],{"class":848},"sG7-3","★",[86,851,737],{"class":92},[86,853,86],{"class":201},[86,855,634],{"class":92},[86,857,859,862,864],{"class":88,"line":858},12,[86,860,861],{"class":92},"  \u003C/",[86,863,86],{"class":201},[86,865,634],{"class":92},[86,867,869,871,873],{"class":88,"line":868},13,[86,870,737],{"class":92},[86,872,752],{"class":201},[86,874,634],{"class":92},[14,876,877,878,881,882,885,886,889],{},"色は塗りつぶしが ",[17,879,880],{},"#f59e0b","（アンバー）、未塗りが ",[17,883,884],{},"#d1d5db","（グレー）。アクセシビリティ用に ",[17,887,888],{},"aria-label"," で「難易度: 初級」等を喋らせる。",[301,891,892],{"id":892},"検証",[14,894,895,896,898,899,902],{},"dev サーバー（ポート3002）に立ててから SSR の出力を grep で確認したら、",[17,897,771],{}," クラスが 92件（モバイル＋デスクトップ両方）、",[17,900,901],{},"filled"," 星が 171個出ていた。62トピック × 3星 × 表示2箇所だと数式上 372 になるはずだが、星の塗りつぶし数だけで 171 出ていれば配分は妥当に効いているとわかる。",[14,904,905,906,909],{},"Vitest は2件失敗していたが、いずれも今回の変更と無関係な既存の ",[17,907,908],{},"import.meta.dev"," 検出系と timeout 系の問題。dev サーバーのログにも警告なし（D1警告は無関係の既存もの）。",[10,911,913],{"id":912},"_4本立ての全体像","4本立ての全体像",[14,915,916],{},"朝の「Bad/Good 縦並び問題」というニッチな違和感から始まった作業が、終わってみると次の4つに広がっていた。",[351,918,919,925,931,937],{},[25,920,921,924],{},[28,922,923],{},"見た目の再配置",": Bad/Good 横並び＋幅解放",[25,926,927,930],{},[28,928,929],{},"前提情報の追加",": 何を実装しているかのフローチャート",[25,932,933,936],{},[28,934,935],{},"抽象化の追加",": ベン図によるド・モルガン的整理",[25,938,939,942],{},[28,940,941],{},"メタ情報の追加",": 初級・中級・上級のレベル付け",[14,944,945],{},"最初の2つは「読み手の物理的な視線」を整える話、後ろの2つは「読み手の認知の階段」を整える話。同じページに対して、低層と高層の両方に手を入れた1日になった。",[14,947,948],{},"特にベン図による抽象化は、コーディング原則という本来「個別のテクニック集」になりがちな分野に、集合論で串を刺せた感覚があって、明日以降ほかのトピックを書くときの軸として使えそう。",[10,950,951],{"id":951},"残タスク",[351,953,956,965,975],{"className":954},[955],"contains-task-list",[25,957,960,964],{"className":958},[959],"task-list-item",[961,962],"input",{"disabled":191,"type":963},"checkbox"," コミット（現時点ではすべて modified のまま）",[25,966,968,970,971,974],{"className":967},[959],[961,969],{"disabled":191,"type":963}," 他のトピック（特に早期 return 系、フィルタ系）にも ",[17,972,973],{},"TopicAbstraction"," の光/影軸を適用できるか検討",[25,976,978,980],{"className":977},[959],[961,979],{"disabled":191,"type":963}," 章ごとのレベル配分が偏っていないかバランスチェック（現状は最頻レベルで章レベルを出しているだけ）",[982,983,984],"style",{},"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 .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}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}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 .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 pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}",{"title":82,"searchDepth":103,"depth":103,"links":986},[987,988,989,990,994,998,999,1004,1005],{"id":12,"depth":103,"text":12},{"id":61,"depth":103,"text":62},{"id":255,"depth":103,"text":256},{"id":279,"depth":103,"text":280,"children":991},[992,993],{"id":303,"depth":120,"text":303},{"id":320,"depth":120,"text":320},{"id":337,"depth":103,"text":338,"children":995},[996,997],{"id":374,"depth":120,"text":375},{"id":464,"depth":120,"text":464},{"id":473,"depth":103,"text":474},{"id":484,"depth":103,"text":485,"children":1000},[1001,1002,1003],{"id":511,"depth":120,"text":512},{"id":532,"depth":120,"text":533},{"id":892,"depth":120,"text":892},{"id":912,"depth":103,"text":913},{"id":951,"depth":103,"text":951},"dev","Vue製のコーディング原則ページに4つの大型UX改善を入れた1日。Bad/Good横並び、前提条件フローチャート、ベン図による光と影（ド・モルガン）の抽象化、全62トピックへの初級・中級・上級レベル付けまでを Codex レビュー込みで進めた記録。","md",{},"/coding-principles-ux-overhaul","mdx-playground",false,"2026-06-13T00:00:00.000Z",{"title":5,"description":1007},"2026-06/2026-06-13/coding-principles-ux-overhaul",[1017,1018,1019,1020,1021,1022,1023,1024,1025],"コーディング原則","Vue","UX","Codexレビュー","ベン図","ド・モルガン","フローチャート","Nuxt","レベル設計",null,"cDvFmL-BFP2ivYVUGFVITeyo7d0UgxwjBqmKLulym94",[1029,1038,1046,1053,1062],{"title":1030,"description":1031,"path":1032,"tags":1033,"publishedAt":1037,"updatedAt":1026},"投資判断クイズを2カラムレイアウトへ移行：1ページ完成→コンポーネント化→横展開","Part 2投資判断クイズの18ページを2カラムUXに移行する作業ログ。スペース過多の違和感から要件を掘り起こし、QuizPageとInvestmentTopicPageに切り出して横展開した。","/investment-quiz-2col-refactor",[1024,1018,1019,1034,1035,1036],"リファクタリング","簿記クイズ","コンポーネント設計","2026-05-14T00:00:00.000Z",{"title":1039,"description":1040,"path":1041,"tags":1042,"publishedAt":1045,"updatedAt":1026},"Excel講座の統合記事パターンを ScrollArticle に共通化した日","Excel講座でフック→伏線→回収構造を導入し、目次レイアウトの差異を ScrollArticle.vue として共通化。Codex 3回レビューを経てモバイル重複バグも潰した一日の記録。","/2026-04-29-excel-scroll-article-unification",[1018,1034,1020,1043,1044,1019],"eurekapu","レイアウト","2026-04-29T00:00:00.000Z",{"title":1047,"description":1048,"path":1049,"tags":1050,"publishedAt":1052,"updatedAt":1026},"Nuxt/Vueで選択行をURLクエリパラメータに同期する実装","テーブルの選択行をURLに保持し、ブラウザバックで位置を復元する方法。クレカ明細ビューの実装例。","/nuxt-url-sync-selected-row",[1024,1018,1051,1019],"URL","2026-01-22T00:00:00.000Z",{"title":1054,"description":1055,"path":1056,"tags":1057,"publishedAt":1061,"updatedAt":1026},"コーディング規約ビューア実装アプローチの比較","ハッシュベースナビゲーションと動的ルーティングの比較検討","/coding-standards-viewer-approach-comparison",[602,1058,1059,1060],"nuxt","routing","ux","2025-11-18T00:00:00.000Z",{"title":1063,"description":1064,"path":1065,"tags":1066,"publishedAt":1013,"updatedAt":1026},"AIっぽくないWebデザインで3業種サイトを業種別にリビルド - ワークショップ用プロンプトに学びを還流","和菓子舗・美容室・飲食店の3業種サイトを、共通テンプレートを廃止して業種固有の独立デザインに作り直した。frontend-designスキルで既視感の強いSaaS定番を避け、地図埋め込み・電話ボタン・クチコミ調査までを一気に追加し、ワークショップのサイト作成プロンプトに反映した記録。","/three-business-sites-anti-ai-design",[1067,1068,1069,1070,1071,1072,1018,1024],"frontend-design","デザイン","サイト制作","ワークショップ","Google Maps","プロンプト設計",[],"https://log.eurekapu.com/og/blog/coding-principles-ux-overhaul.png?v=2026-06-13T00%3A00%3A00.000Z&title=%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E5%8E%9F%E5%89%87%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AEUX%E5%A4%A7%E6%94%B9%E4%BF%AE%EF%BC%9ABad%2FGood%E6%A8%AA%E4%B8%A6%E3%81%B3%E3%83%BB%E3%83%95%E3%83%AD%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E3%83%BB%E3%83%99%E3%83%B3%E5%9B%B3%E6%8A%BD%E8%B1%A1%E5%8C%96%E3%83%BB%E9%9B%A3%E6%98%93%E5%BA%A6%E3%83%AC%E3%83%99%E3%83%AB%E4%BB%98%E3%81%91&author=Kei%20Komatsu&sig=e1d741ed8c6da967",1781423421599]