コンテンツに進む
Netplan Matsuyama
Blog

人口推計のチャートを表示 - オープンデータの活用

Netplan Matsuyama
Netplan Matsuyama
Developer

やったこと

セクション「やったこと」

e-Stat（政府統計の総合窓口）の API を使って総人口の推移をチャートで表示できるようにした。

→ 人口推計ページ

opendata-astro コンポーネント

セクション「opendata-astro コンポーネント」

Webサイト管理と切り離すため、チャート表示ロジックを独立パッケージとして実装した。

  • リポジトリ: kazweda/opendata-astro
  • astro-starlight では github:kazweda/opendata-astro#vX.Y.Z で導入

設計のポイント

  • データ取得はビルド時のみ（APIキー露出・CORSを回避）
  • openDataIntegration を astro.config.mjs に追加するだけで、ビルド時に JSON が自動生成される
  • ページ側は JSON を import して <OpenDataChart> に渡すだけ
import populationData from '../../../data/opendata-astro/population.json';
import { OpenDataChart } from 'opendata-astro';


<OpenDataChart client:only="react" dataSet={populationData} chartType="line" />

データ

セクション「データ」

総務省統計局「人口推計」（e-Stat 統計表 ID: 0004021102, 0003448237）から 2015〜2024 年の全国総人口を取得。この期間を通じて一貫して減少が続いている様子が読み取れる。

対応した課題

セクション「対応した課題」
  • astro-island の display: contents による canvas サイズ 0 問題 → コンポーネント内に wrapper div を追加
  • ダークモードで軸ラベルが見えない問題 → data-theme 属性を MutationObserver で監視して色を切り替え
  • 2つのデータセットのラベル形式統一（"2021年10月1日現在" → "2021年"）