J-FLECの家計調査Excel 8ファイルを年代別ビューワーにした記録|1万6千列を超えるシート、結合セル、全国行のない表でつまずく

開発mdx-playground

J-FLEC の家計調査 Excel を年代別ビューワーにした

朝、J-FLEC(金融経済教育推進機構)の公開データページの URL を Claude Code に貼った。 「家計の金融行動に関する世論調査」2025年版の Excel が並ぶページで、URL の末尾は kakekin_2025 である。 作りたいものの指示を添え、vue-pages と dataviz のスキルを読ませてから作業に入ってもらった。 指示の一つが、「自分がどこにいるか散布図で見える」ようにすることだった。

できあがったのは、ページ1つと記事1本である。

元データは J-FLEC の公開データページ(家計の金融行動に関する世論調査 2025年) にある。

使ってよいデータか、から始まった

データの中身より先に確かめてもらったのは、利用規約だった。 規約の趣旨は「出所を明示すれば引用・使用可。内容を変える使い方は不可」で、出典を書けば使える。 Windows のコンソールで文字が化けたので、ファイル経由で読み直す一手間が挟まった。

Excel を開くと、すぐに引っかかる数字が出てきた。 二人以上世帯の金融資産の中央値が、2024年の350万円から2025年は720万円に跳ねている。 調査方法が変わったのか、数字が修正されたのか。 PDF の資料に当たらせたものの、その結論は今日の記録には残っていない。

Excel 8ファイルを汎用パーサーで読む

表の形がそろっていたので、シートごとに専用の処理を書かず、汎用のパーサーで全シートを読む方針になった。 ダウンロードと Excel 読み込みのスクリプトを書かせ、試しに全シートを通すと、処理がなかなか終わらなかった。

原因は列数だった。 一部のシートは、書式だけが残った空列のせいで、列数が16,000を超えていた。 全セルを走査していたのを、値の入った列だけ読むように直させると、8ファイル全部が3.5秒で終わった。

そこからは取りこぼしとの付き合いになった。 点検のたびに、次のような崩れが出てきた。

  • 見出しに改行由来の空白が残る(「300 万 円 未 満」のような形)
  • シート2、7、11、15、16 などを取りこぼす
  • 単位が「割」の表と、単位行に「総数」が混ざる表(NISA、こづかい)がある
  • 結合セルの位置が、単位行とデータ行でずれている表がある
  • 注記の2行目以降(「2024年以降は…」の続き)が落ちる

結合セルの確認では、スクラッチ側から exceljs を解決できず、Python で結合範囲を見てもらった。 「全部読めたか」の物差しにしたのは、各ファイルの目次(Contents)に書かれた表の数である。 1シートに複数の表があるケースも含めて、抽出した表の数は8ファイルとも目次と一致した。 値が正しい列に入っているかは、代表値で突き合わせて確かめた。

区分の差し替えがある表については、どの年から今の区分で読めるかを出力に残させた。 あとでビューワーの注記に使うためである。 単身世帯の時系列は、2020年から2021年の間が不連続点だった(対象年齢の変更)。

テストでは一度3件が落ちた。 調べると、全国の回答世帯数が「実数」行にある表と、ラベルの形に原因があった。 全国の世帯数を「実数」行から取るように直すと、30件すべて通った。 表題の判定を厳しくしたので、目次との表数の突き合わせをもう一度回した。

散布図、横棒、折れ線、ブラウザ

材料がそろったところで、チャート部品を次の順に作らせた。

  • 年収×金融資産の散布図(自分が指定した「どこにいるか」を見る部分)
  • 年代別に1指標を並べる横棒(自分の年代を強調し、全国平均の線と自分の値の線を引く)
  • 時系列の折れ線(年ごとの縦線ツールチップ、線の端に直接ラベル、不連続点に破線)
  • 全設問ブラウザ(約80設問から選び、年代や年収、地域で並べて、自分の年代の行を強調する)
  • 時系列ビューワー(78表から選び、同じ単位の系列だけを重ねる。色は系列ごとに固定)
  • 年代の特徴ランキング(全国平均との差が大きい回答を並べ替える)

折れ線では、ホバーのたびにツールチップ欄が出たり消えたりして、下の要素が上下に動いた。 欄を常に確保しておく形に変えて止めた。

ページ本文に書いた主張(非保有率の変化、年代と資産の関係)は、書いたあとにデータで検証させた。 単身世帯の突き合わせテストを1件足し、この時点でテストは32件になった。

dev サーバーが新しいページを返さない

ページを作り終えて叩くと、404 が返ってきた。 ファイルを touch しても変わらない。 apps/web/nuxt.config.ts を touch すると Nuxt が自分で再起動し、数十秒の 503 のあとで 200 になった。

開いた直後の画面にはスタイルが一切当たっていなかった。 実装の問題か、読み込みが終わっていないだけかを切り分けてもらうと、Vue の起動がまだ終わっていないだけだった。 起動を待つと、スタイルが当たった。

同じ症状は、記事用の部品でもう一度出た。 再起動のあとに追加した KakekinArticle*.vue を記事に埋め込むと、クライアント側では描画されるのに、SSR 側だけが部品を解決できない。 見た目は正しく、コンソールに Failed to resolve component と Hydration の警告が出るだけである。 これも nuxt.config.ts の touch で SSR 側まで解決した。 この方法ならプロセスを落とさずに再起動できるので、並行して動いている他セッションの dev サーバーを巻き込まない。 この件は issue に書き、コミットも1つ分けた。

ブラウザで見て直したもの

Chrome DevTools で上から順に見てもらい、見つかったものをその場で直させた。

  • 「あなたの位置」のカードで直す箇所が出た。あわせて、ほかの表の引き方にも前方一致で曖昧なものがないか見直させた(残りは一意だった)
  • 「あなた」を示す色はオレンジからマゼンタ(#c8157a)に替わり、本文の「オレンジの点/線」という説明も書き換えた
  • 長期推移の縦軸の単位(「万円」「%」)が最上段の目盛りと重なっていたので、余白を広げた
  • 時系列ビューワーの注記を、1回ずつ出るように直した
  • スマホ幅では、表示幅390pxに対して中身が736pxあった。原因の要素を特定して直すと、scrollWidth が390になり、はみ出しは消えた
  • 折れ線チャートの上に凡例を常に出すようにした

記事を書く段階で、ビューワーの注記「中央値の2倍以上になる」が60代(1.9倍)で成り立たないと分かり、これも直した。 記事そのものでは2つ直した。 「約29%しかいない」の太字は、閉じ記号の直前にある「%」のせいで壊れており、閉じ位置を句点の外へ移して lint を通した。 記事に埋め込んだ部品の <p> に、サイトの段落番号(本文の段落に振られる小さな数字)が混ざっていたので、部品側を <div> に替えた。

dev サーバーの再起動を待つあいだに、ユニットテストを全体で回させた。 261ファイル、21,055件がすべて通った。

コミットで2回止まる

ここまで見て、「OK、コミットプッシュしといてくださいね。」と伝えた。 Claude Code の段取りは、データ取得、ビューワー、記事、issue の記録の4コミットで、最初からあった無関係の変更3ファイルは含めない、というものだった。

1コミット目で、Codex のコミットレビューに止められた。 全国の値を取る関数が、全国行のない表では20歳代の値を返す、という指摘である。 ビューワーでいえば、「全国」の欄に20代の値が出てしまう。 原表を確かめると、3表(two-cat-41-0 など)には指摘どおり全国行がなく、先頭は20代だった。 全設問ブラウザも先頭行を全国とみなしていたので、どちらも「全国」の行を探す形に直させた。 テストは34件になった。

コミットし直すと、今度は2件で止まった。

  • 単身世帯の「新規借入額」と「年間返済額」は問番号も列名も同じで、後者が重複として比較から消えていた
  • 単身世帯の表34「年間返済額」の列名が、「新規借入額なし(無回答含む)」になっていた

表34の見出しを原表で確かめてから直させ、テストは36件になった。 3回目でデータのコミットが通り、ビューワーと記事もレビューを通過した。 GitHub の master に4コミットを上げ、手元と origin の差はない。 本番へのデプロイはしていない。

振り返り

  • 「全シートを読めた」と言えたのは、抽出した表の数が目次の表数という外の物差しと一致したからだ
  • 全国行のない3表は、ブラウザで一通り見たあとに、コミット時のレビューで見つかった。原表を開くと、指摘どおりだった
  • 新しいページや部品を足したら、dev サーバーを落とさずに nuxt.config.ts を touch する。見た目が正しくても、コンソールの警告まで見る

二人以上世帯の中央値が350万円から720万円に跳ねた理由は、今日の記録の中では確かめきれていない。

#J-FLEC#家計の金融行動に関する世論調査#Excel#Nuxt#データ可視化#Claude Code#Codex