以下の課題に取り組んでいただきたく、ご案内お願いいたします。
- 未経験者・経験者問わず 2週間以内
(2023/03/14) 試験の内容を一部更新しましたのでご注意ください
【課題】
都道府県別の総人口推移グラフを表示するSPA(Single Page Application)を構築せよ
ワイヤーフレーム内容
- RESAS(地域経済分析システム) APIの「都道府県一覧」APIから取得する
- APIレスポンスから都道府県一覧のチェックボックスを動的に生成する
- 都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する
- 人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する
- 「総人口」の他に「年少人口」「生産年齢人口」「老年人口」も切り替えるUIを何らかの形で用意し表示できるようにすること（同時に表示する必要はない）
制約
- React/Vue.jsのいずれかを用いてSPAを構築すること（バージョンはできるだけ最新版をご使用ください）
- 都道府県一覧および総人口情報はRESAS APIのデータを用いること
- グラフは Highcharts や Rechart.js などのサードパーティ製のグラフライブラリを用いて描画すること
- ただし、グラフライブラリは上記のものに限らず、任意のものを用いてよい
- Google Chrome最新版で正しく動くこと
- PC/スマートフォン表示に対応すること(レスポンシブデザイン対応)
- ただし実機でなく、Google Chromeの検証ツールで確認できればよい
- リンターやフォーマッターを適切に設定すること
- リンターにはESLint、フォーマッターにはPrettierを使用すること
- styleは自分で記述し、UIフレームワークなどは原則使用しないこと
- chartライブラリ内包のstyle、リセット系のCSSライブラリについては利用可
- また、css-in-jsやcss-modules、sassなどのエコシステムの利用を妨げるものではなく、あくまでcssの記述力を測る趣旨に留まる
- TypeScriptで記述すること
- テストケース/テストコードを作成すること
- テストツールは任意のものを用いてよい
- テスト実行時にエラーが発生しないこと
- ソースコードはGitで管理し、作成したソースコードはGitHubにアップロードすること
- Netlify / GitHub Pages / Firebase hosting / Vercel 等のホスティングサービスにデプロイし、インターネット経由で閲覧できる状態にすること
注意事項
- RESAS APIの利用登録(無料)を行い、API Keyを発行すること
- セキュリティを考慮してコードを記述すること
- アプリのコンポーネント粒度の設計、Gitコミットメッセージやコミット粒度、ドキュメンテーション等もレビュー対象となる、チーム開発を意識してコードを記述すること
参考
【コードの提出方法】
- GitHub の public リポジトリの URL をお知らせください。
- デプロイ先の URL をお知らせください。
- 最後に、以下を課題提出の際にお知らせください。
- 課題の取り組み開始から完了までに要した合計時間
- これまでの総合的なプログラミング歴
- これまでのWEBフロントエンドプログラミング歴
- 着手にあたり参考にしたページや書籍、リポジトリがあれば
- AIを利用した場合成果があれば簡潔なレポート（ボーナス要素）
- 必須ではない
【FAQ】
- Q: Tailwind CSSの利用は可能ですか？
- A: 利用可能です。ただし、Tailwind CSSベースのUIフレームワーク（Tailwind UIやdaisyUIなど）は利用しないようお願いいたします。
- Q: 制約内で言及されていない外部パッケージの利用は可能ですか？
- A: 利用可能です。
- Q: SSGやSSRの利用は可能ですか？
- A: 必要に応じて、SSGやSSRの利用も可能です。
- Q: 事前に機能の一部や、大まかな実装をしたうえでコーディング試験に挑んでも問題ありませんか？
- A: 試験を公開しているため事前の対策は問題ありません。ただし、コードを提出していただく際の「課題の取り組み開始から完了までに要した合計時間」も評価の参考にさせていただくため、コーディング試験を取り組む前に行った実装及びリポジトリをそのまま提出するのはご遠慮ください。
早く完成した場合は、その時点でご提出くださいますようお願い致します。
ご案内のほど、よろしくお願い致します。
株式会社ゆめみ 採用担当
