Home

仕様

• 都道府県にチェックを入れると、X軸:年、Y軸:人口数の折れ線グラフを表示する
• 「総人口」の他に「年少人口」「生産年齢人口」「老年人口」表示に切り替えることができる

環境

フレームワーク: Next.js（TypeScript + Sass環境）
テスト: Jest + Testing Library
グラフ: Highcharts
コードフォーマッター: ESLint + Stylelint + Pretteir

構成

API構成

APIはRESASのAPIを使用している。
ただし、X-API-KEYを隠蔽した状態でgetする必要があるのでNext.jsのAPI Routesをプロキシサーバーのような形で間に挟んでいる。　　

都道府県一覧

人口構成

API routesで実装したAPI

API	パス
都道府県一覧	/api/prefectures
人口構成	/api/population/composition/perYear

RESAS-APIから使用しているAPI

API	ドキュメント
都道府県一覧	https://opendata.resas-portal.go.jp/docs/api/v1/prefectures.html
人口構成	https://opendata.resas-portal.go.jp/docs/api/v1/population/composition/perYear.html