以下の課題に取り組んでいただきたく、ご案内お願いいたします。
<aside>
⚠️ 2024 年 11 月以降から取り組まれる方は、 ゆめみフロントエンドコーディング試験 API をご利用いただくようお願いいたします。
</aside>
【課題】
都道府県別の総人口推移グラフを表示するSPA(Single Page Application)を構築せよ
ワイヤーフレーム
内容
- ゆめみフロントエンドコーディング試験 API の「都道府県一覧」API から取得する。
- API レスポンスから都道府県一覧のチェックボックスを動的に生成する。
- 都道府県にチェックを入れると、ゆめみフロントエンドコーディング試験 API から選択された都道府県の「人口構成」を取得する。
- 人口構成 API レスポンスから、「X 軸: 年」「Y 軸: 人口数」の折れ線グラフを動的に生成して表示する。
- 「総人口」の他に「年少人口」「生産年齢人口」「老年人口」も切り替える UI を何かしらの形で用意し、表示できるようにすること。(同時に表示する必要はない)
制約
- React / Vue.js のいずれかを用いて SPA を構築すること。(バージョンはできるだけ最新版をご使用ください)
- React
- Vue.js
- Next.js や Nuxt.js などの、これらを内包したフレームワークの利用も許可する。
- 都道府県一覧および人口構成情報はゆめみフロントエンドコーディング試験 API を用いること。
- グラフは Highcharts や Recharts などのサードパーティ製のグラフライブラリを用いて描画すること。
- ただし、グラフライブラリは上記のものに限らず、任意のものを用いて良い。
- Google Chrome 最新版で正しく動作すること。