suecalystegia00/resas-yumemi

resas-yumemi

RESAS API を用いて都道府県別の総人口データを取得し， グラフで確認できるSPA．

firebase hosting で公開中 → https://resas-yumemi.web.app/

総制作時間: 約21時間

RESAS API : https://opendata.resas-portal.go.jp/

Vue3 HighCharts (グラフ描画に利用) : https://github.com/smithalan92/vue3-highcharts

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

resas-yumemi's Issues

チェックボックスのデザインを修正

デバイスの大きさに応じてチェックボックスの並ぶ数を変えたほうが選びやすいと思われ

人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する

#5 でチェックを入れた都道府県の都道府県コードを配列にしてdataに置いているため，
これをグラフ描画用のコンポーネントに読み込ませ，グラフを生成する．

都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する

ちゃんとブランチを切ること😡😡😡

#4 でチェックの付いた都道府県のコードを配列として生成できている．

これを用いて，APIから該当する人口構成を取得する．
ただし，一度取得した人口構成データはキャッシュしておくようにして，極力APIの呼び出し回数を減らす．

人口構成データは state.population に入れるようにしておく．

グラフが再描画されない

VueHighchartsのリファレンス(https://github.com/smithalan92/vue3-highcharts)曰く，
"redrawOnUpdate"プロパティをtrueにしておくと，グラフデータであるoptionsが更新されたタイミングで再描画する仕様らしい．
しかし，Vue devTool でもoptionsが更新されたことが確認できたにもかかわらず，グラフは再描画されない．

しかし開発環境でリロードがかかると，正常に表示されるため，データ形式の問題ではなさそう．
よくわからない...?

Originally posted by @susanbasket0410 in #8 (comment)

チェックを外すとデータが同一化する

複数の都道府県にチェックを入れてから，
prefCodeが小さい都道府県のチェックを外すと，prefCodeが最も大きい都道府県のデータに全てのデータが収束する

2021-12-06.15.07.05.mov

APIレスポンスから都道府県一覧のチェックボックスを動的に生成する

#2 で得た都道府県一覧を用いて，チェックボックスを生成する．
(ただし今回はチェックボックスよりボタンに近いデザインにする)

チェックボックスを叩いた際に，対応する都道府県コードを引数とする関数を叩けるようにしておく → 後々のグラフ描画で利用．

グラフのデザインを修正

グラフタイトルや軸ラベル・値などなど，今回のデータに則したものにデザインする

RESAS(地域経済分析システム) APIの「都道府県一覧」からAPIを取得する

store内でAPIの呼び出し，レスポンスの管理をする．

state.prefectures: 都道府県一覧の配列(都道府県コードと都道府県名を含む)
mutations.setPrefectures: APIレスポンスをstateにセットする
actions.getPrefectures: API呼び出し