[{"data":1,"prerenderedAt":329},["ShallowReactive",2],{"content-/jflec-kakekin-viewer-build":3,"all-pages-for-dir":309,"related-/jflec-kakekin-viewer-build":310,"og-image-/jflec-kakekin-viewer-build":328},{"id":4,"title":5,"body":6,"category":287,"concepts":288,"description":289,"extension":290,"meta":291,"navigation":292,"ogImage":288,"path":293,"project_name":294,"published":295,"publishedAt":296,"seo":297,"source":298,"stem":299,"tags":300,"todo":288,"unpublished":295,"updatedAt":288,"__hash__":308},"pages/2026-09/2026-09-29/jflec-kakekin-viewer-build.md","J-FLECの家計調査Excel 8ファイルを年代別ビューワーにした記録｜1万6千列を超えるシート、結合セル、全国行のない表でつまずく",{"type":7,"value":8,"toc":276},"minimark",[9,14,23,26,45,57,62,65,68,72,75,78,81,98,101,104,107,111,114,134,137,140,144,158,161,179,182,185,213,224,227,230,233,240,243,251,254,257,273],[10,11,13],"h1",{"id":12},"j-flec-の家計調査-excel-を年代別ビューワーにした","J-FLEC の家計調査 Excel を年代別ビューワーにした",[15,16,17,18,22],"p",{},"朝、J-FLEC（金融経済教育推進機構）の公開データページの URL を Claude Code に貼った。\n「家計の金融行動に関する世論調査」2025年版の Excel が並ぶページで、URL の末尾は ",[19,20,21],"code",{},"kakekin_2025"," である。\n作りたいものの指示を添え、vue-pages と dataviz のスキルを読ませてから作業に入ってもらった。\n指示の一つが、「自分がどこにいるか散布図で見える」ようにすることだった。",[15,24,25],{},"できあがったのは、ページ1つと記事1本である。",[27,28,29,38],"ul",{},[30,31,32,37],"li",{},[33,34,36],"a",{"href":35},"/household-finance-2025","家計の金融資産 年代別ビューワー","：年代と金額を入れると、同年代の中で上位何％かを出す。下に年収×金融資産の散布図、年代で比べる主要指標、60年の推移、全設問ブラウザが続く",[30,39,40,44],{},[33,41,43],{"href":42},"/household-assets-by-age-2025","40代の金融資産、真ん中の世帯は500万円","：同じデータから書いた解説記事。二人以上世帯の40代は、金融資産の中央値が500万円、平均が1,486万円だった。埋め込みのチャートは6枚ある",[15,46,47,48,56],{},"元データは ",[33,49,55],{"href":50,"target":51,"rel":52},"https://www.j-flec.go.jp/data/kakekin_2025/","_blank",[53,54],"noopener","noreferrer","J-FLEC の公開データページ（家計の金融行動に関する世論調査 2025年）"," にある。",[58,59,61],"h2",{"id":60},"使ってよいデータかから始まった","使ってよいデータか、から始まった",[15,63,64],{},"データの中身より先に確かめてもらったのは、利用規約だった。\n規約の趣旨は「出所を明示すれば引用・使用可。内容を変える使い方は不可」で、出典を書けば使える。\nWindows のコンソールで文字が化けたので、ファイル経由で読み直す一手間が挟まった。",[15,66,67],{},"Excel を開くと、すぐに引っかかる数字が出てきた。\n二人以上世帯の金融資産の中央値が、2024年の350万円から2025年は720万円に跳ねている。\n調査方法が変わったのか、数字が修正されたのか。\nPDF の資料に当たらせたものの、その結論は今日の記録には残っていない。",[58,69,71],{"id":70},"excel-8ファイルを汎用パーサーで読む","Excel 8ファイルを汎用パーサーで読む",[15,73,74],{},"表の形がそろっていたので、シートごとに専用の処理を書かず、汎用のパーサーで全シートを読む方針になった。\nダウンロードと Excel 読み込みのスクリプトを書かせ、試しに全シートを通すと、処理がなかなか終わらなかった。",[15,76,77],{},"原因は列数だった。\n一部のシートは、書式だけが残った空列のせいで、列数が16,000を超えていた。\n全セルを走査していたのを、値の入った列だけ読むように直させると、8ファイル全部が3.5秒で終わった。",[15,79,80],{},"そこからは取りこぼしとの付き合いになった。\n点検のたびに、次のような崩れが出てきた。",[27,82,83,86,89,92,95],{},[30,84,85],{},"見出しに改行由来の空白が残る（「300 万 円 未 満」のような形）",[30,87,88],{},"シート2、7、11、15、16 などを取りこぼす",[30,90,91],{},"単位が「割」の表と、単位行に「総数」が混ざる表（NISA、こづかい）がある",[30,93,94],{},"結合セルの位置が、単位行とデータ行でずれている表がある",[30,96,97],{},"注記の2行目以降（「2024年以降は…」の続き）が落ちる",[15,99,100],{},"結合セルの確認では、スクラッチ側から exceljs を解決できず、Python で結合範囲を見てもらった。\n「全部読めたか」の物差しにしたのは、各ファイルの目次（Contents）に書かれた表の数である。\n1シートに複数の表があるケースも含めて、抽出した表の数は8ファイルとも目次と一致した。\n値が正しい列に入っているかは、代表値で突き合わせて確かめた。",[15,102,103],{},"区分の差し替えがある表については、どの年から今の区分で読めるかを出力に残させた。\nあとでビューワーの注記に使うためである。\n単身世帯の時系列は、2020年から2021年の間が不連続点だった（対象年齢の変更）。",[15,105,106],{},"テストでは一度3件が落ちた。\n調べると、全国の回答世帯数が「実数」行にある表と、ラベルの形に原因があった。\n全国の世帯数を「実数」行から取るように直すと、30件すべて通った。\n表題の判定を厳しくしたので、目次との表数の突き合わせをもう一度回した。",[58,108,110],{"id":109},"散布図横棒折れ線ブラウザ","散布図、横棒、折れ線、ブラウザ",[15,112,113],{},"材料がそろったところで、チャート部品を次の順に作らせた。",[27,115,116,119,122,125,128,131],{},[30,117,118],{},"年収×金融資産の散布図（自分が指定した「どこにいるか」を見る部分）",[30,120,121],{},"年代別に1指標を並べる横棒（自分の年代を強調し、全国平均の線と自分の値の線を引く）",[30,123,124],{},"時系列の折れ線（年ごとの縦線ツールチップ、線の端に直接ラベル、不連続点に破線）",[30,126,127],{},"全設問ブラウザ（約80設問から選び、年代や年収、地域で並べて、自分の年代の行を強調する）",[30,129,130],{},"時系列ビューワー（78表から選び、同じ単位の系列だけを重ねる。色は系列ごとに固定）",[30,132,133],{},"年代の特徴ランキング（全国平均との差が大きい回答を並べ替える）",[15,135,136],{},"折れ線では、ホバーのたびにツールチップ欄が出たり消えたりして、下の要素が上下に動いた。\n欄を常に確保しておく形に変えて止めた。",[15,138,139],{},"ページ本文に書いた主張（非保有率の変化、年代と資産の関係）は、書いたあとにデータで検証させた。\n単身世帯の突き合わせテストを1件足し、この時点でテストは32件になった。",[58,141,143],{"id":142},"dev-サーバーが新しいページを返さない","dev サーバーが新しいページを返さない",[15,145,146,147,150,151,154,155,157],{},"ページを作り終えて叩くと、404 が返ってきた。\nファイルを ",[19,148,149],{},"touch"," しても変わらない。\n",[19,152,153],{},"apps/web/nuxt.config.ts"," を ",[19,156,149],{}," すると Nuxt が自分で再起動し、数十秒の 503 のあとで 200 になった。",[15,159,160],{},"開いた直後の画面にはスタイルが一切当たっていなかった。\n実装の問題か、読み込みが終わっていないだけかを切り分けてもらうと、Vue の起動がまだ終わっていないだけだった。\n起動を待つと、スタイルが当たった。",[15,162,163,164,167,168,171,172,175,176,178],{},"同じ症状は、記事用の部品でもう一度出た。\n再起動のあとに追加した ",[19,165,166],{},"KakekinArticle*.vue"," を記事に埋め込むと、クライアント側では描画されるのに、SSR 側だけが部品を解決できない。\n見た目は正しく、コンソールに ",[19,169,170],{},"Failed to resolve component"," と Hydration の警告が出るだけである。\nこれも ",[19,173,174],{},"nuxt.config.ts"," の ",[19,177,149],{}," で SSR 側まで解決した。\nこの方法ならプロセスを落とさずに再起動できるので、並行して動いている他セッションの dev サーバーを巻き込まない。\nこの件は issue に書き、コミットも1つ分けた。",[58,180,181],{"id":181},"ブラウザで見て直したもの",[15,183,184],{},"Chrome DevTools で上から順に見てもらい、見つかったものをその場で直させた。",[27,186,187,190,197,200,203,210],{},[30,188,189],{},"「あなたの位置」のカードで直す箇所が出た。あわせて、ほかの表の引き方にも前方一致で曖昧なものがないか見直させた（残りは一意だった）",[30,191,192,193,196],{},"「あなた」を示す色はオレンジからマゼンタ（",[19,194,195],{},"#c8157a","）に替わり、本文の「オレンジの点／線」という説明も書き換えた",[30,198,199],{},"長期推移の縦軸の単位（「万円」「%」）が最上段の目盛りと重なっていたので、余白を広げた",[30,201,202],{},"時系列ビューワーの注記を、1回ずつ出るように直した",[30,204,205,206,209],{},"スマホ幅では、表示幅390pxに対して中身が736pxあった。原因の要素を特定して直すと、",[19,207,208],{},"scrollWidth"," が390になり、はみ出しは消えた",[30,211,212],{},"折れ線チャートの上に凡例を常に出すようにした",[15,214,215,216,219,220,223],{},"記事を書く段階で、ビューワーの注記「中央値の2倍以上になる」が60代（1.9倍）で成り立たないと分かり、これも直した。\n記事そのものでは2つ直した。\n「約29%しかいない」の太字は、閉じ記号の直前にある「%」のせいで壊れており、閉じ位置を句点の外へ移して lint を通した。\n記事に埋め込んだ部品の ",[19,217,218],{},"\u003Cp>"," に、サイトの段落番号（本文の段落に振られる小さな数字）が混ざっていたので、部品側を ",[19,221,222],{},"\u003Cdiv>"," に替えた。",[15,225,226],{},"dev サーバーの再起動を待つあいだに、ユニットテストを全体で回させた。\n261ファイル、21,055件がすべて通った。",[58,228,229],{"id":229},"コミットで2回止まる",[15,231,232],{},"ここまで見て、「OK、コミットプッシュしといてくださいね。」と伝えた。\nClaude Code の段取りは、データ取得、ビューワー、記事、issue の記録の4コミットで、最初からあった無関係の変更3ファイルは含めない、というものだった。",[15,234,235,236,239],{},"1コミット目で、Codex のコミットレビューに止められた。\n全国の値を取る関数が、全国行のない表では20歳代の値を返す、という指摘である。\nビューワーでいえば、「全国」の欄に20代の値が出てしまう。\n原表を確かめると、3表（",[19,237,238],{},"two-cat-41-0"," など）には指摘どおり全国行がなく、先頭は20代だった。\n全設問ブラウザも先頭行を全国とみなしていたので、どちらも「全国」の行を探す形に直させた。\nテストは34件になった。",[15,241,242],{},"コミットし直すと、今度は2件で止まった。",[27,244,245,248],{},[30,246,247],{},"単身世帯の「新規借入額」と「年間返済額」は問番号も列名も同じで、後者が重複として比較から消えていた",[30,249,250],{},"単身世帯の表34「年間返済額」の列名が、「新規借入額なし（無回答含む）」になっていた",[15,252,253],{},"表34の見出しを原表で確かめてから直させ、テストは36件になった。\n3回目でデータのコミットが通り、ビューワーと記事もレビューを通過した。\nGitHub の master に4コミットを上げ、手元と origin の差はない。\n本番へのデプロイはしていない。",[58,255,256],{"id":256},"振り返り",[27,258,259,262,265],{},[30,260,261],{},"「全シートを読めた」と言えたのは、抽出した表の数が目次の表数という外の物差しと一致したからだ",[30,263,264],{},"全国行のない3表は、ブラウザで一通り見たあとに、コミット時のレビューで見つかった。原表を開くと、指摘どおりだった",[30,266,267,268,154,270,272],{},"新しいページや部品を足したら、dev サーバーを落とさずに ",[19,269,174],{},[19,271,149],{}," する。見た目が正しくても、コンソールの警告まで見る",[15,274,275],{},"二人以上世帯の中央値が350万円から720万円に跳ねた理由は、今日の記録の中では確かめきれていない。",{"title":277,"searchDepth":278,"depth":278,"links":279},"",2,[280,281,282,283,284,285,286],{"id":60,"depth":278,"text":61},{"id":70,"depth":278,"text":71},{"id":109,"depth":278,"text":110},{"id":142,"depth":278,"text":143},{"id":181,"depth":278,"text":181},{"id":229,"depth":278,"text":229},{"id":256,"depth":278,"text":256},"dev",null,"金融経済教育推進機構（J-FLEC）の「家計の金融行動に関する世論調査」2025年版の公開Excelを Claude Code に取り込ませ、年代別ビューワーと解説記事を作った。16,000列を超える空列、結合セルのずれ、新規ページを拾わない dev サーバー、全国行のない3表でつまずいた過程を残す。","md",{},true,"/jflec-kakekin-viewer-build","mdx-playground",false,"2026-09-29T00:00:00.000Z",{"title":5,"description":289},"make-diary","2026-09/2026-09-29/jflec-kakekin-viewer-build",[301,302,303,304,305,306,307],"J-FLEC","家計の金融行動に関する世論調査","Excel","Nuxt","データ可視化","Claude Code","Codex","c34EkfLGIueBjrTQEC-OPUP4NcSRW2CU0F_OKKRNKCY",[],[311,315,318,322,325],{"title":312,"path":313,"publishedAt":314},"2026年9月28日の開発日記 - TikTokに上げた6本を消して、カバー付きで出し直した日","/2026-09-28-diary","2026-09-28T00:00:00.000Z",{"title":316,"path":317,"publishedAt":314},"Excelの縦型ショート動画を26本作ってTikTokに投稿するまで：イントロ演出、4つ打ちBGM、カバー画像の作り直し","/excel-shorts-tiktok-vertical-series",{"title":319,"path":320,"publishedAt":321},"2026年9月26日の開発日記 - 再現動画のレビュー画面づくりと、メモリで落ちるdevサーバー","/2026-09-26-diary","2026-09-26T00:00:00.000Z",{"title":323,"path":324,"publishedAt":321},"Nuxtのdevサーバーがheap out of memoryで落ちた原因：再現動画のシーン分割読み込みと終わらない回帰テスト","/excel-scene-dev-memory-split-loading",{"title":326,"path":327,"publishedAt":321},"Excel講座の画面再現動画をレビューしやすくする：カメラ固定、数式バーの可視化、確認済みステータスのCloudflare保存","/excel-scene-review-ui-tuning","https://log.eurekapu.com/og/blog/jflec-kakekin-viewer-build.png?v=2026-09-29T00%3A00%3A00.000Z&title=J-FLEC%E3%81%AE%E5%AE%B6%E8%A8%88%E8%AA%BF%E6%9F%BBExcel%208%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E5%B9%B4%E4%BB%A3%E5%88%A5%E3%83%93%E3%83%A5%E3%83%BC%E3%83%AF%E3%83%BC%E3%81%AB%E3%81%97%E3%81%9F%E8%A8%98%E9%8C%B2%EF%BD%9C1%E4%B8%876%E5%8D%83%E5%88%97%E3%82%92%E8%B6%85%E3%81%88%E3%82%8B%E3%82%B7%E3%83%BC%E3%83%88%E3%80%81%E7%B5%90%E5%90%88%E3%82%BB%E3%83%AB%E3%80%81%E5%85%A8%E5%9B%BD%E8%A1%8C%E3%81%AE%E3%81%AA%E3%81%84%E8%A1%A8%E3%81%A7%E3%81%A4%E3%81%BE%E3%81%9A%E3%81%8F&author=Kei%20Komatsu&sig=f602647aad67fe61",1790910506693]