都道府県別の総人口推移グラフを表示するSPA(Single Page Application)を構築せよ
※ 以下「API」と表記する箇所は、フロントエンドコーディング試験 API を指します。
- API から都道府県一覧を取得する。
- API レスポンスから都道府県一覧のチェックボックスを動的に生成する。
- 都道府県にチェックを入れると、API から選択された都道府県の人口構成データを取得する。
- 人口構成データから、「X 軸: 年」「Y 軸: 人口数」の折れ線グラフを動的に生成して表示する。
- 「総人口」の他に「年少人口」「生産年齢人口」「老年人口」を切り替える UI を用意する。（同時に表示する必要はない）
- React / Vue.js のいずれかを用いて SPA を構築すること。（バージョンはできるだけ最新版をご使用ください）
- Next.js や Nuxt.js など、これらを内包したフレームワークの利用も許可する。
- 都道府県一覧および人口構成データはフロントエンドコーディング試験 API を用いること。
- グラフは Highcharts や Recharts などのサードパーティ製のグラフライブラリを用いて描画すること。
- ただし、グラフライブラリは上記のものに限らず、任意のものを用いて良い。
- Google Chrome 最新版で正しく動作すること。
- PC / スマートフォン表示に対応すること。（レスポンシブデザイン対応）
- ただし実機でなく、Google Chrome の検証ツールで確認できれば良い。
- リンターとフォーマッターを適切に設定すること。（以下ツールから選択すること）
- ESLint / Prettier / Stylelint / Biome
- 以下のようなビジネスロジックのみを提供するヘッドレスな UI ライブラリは利用可能とする。
- Radix UI / React Aria / Ark UI
- スタイルは自前で記述すること。
- ただし、あくまで CSS の記述力を測るのが目的であり、CSS in JS や CSS Modules、Sass などのエコシステムの利用を妨げるものではない。
- また、利用可能なスタイルに関連するライブラリは以下とする。
- グラフライブラリなどに内包されているスタイル
- リセット系の CSS ライブラリ
- Tailwind CSS などのユーティリティファーストな CSS フレームワーク
- TypeScript で記述すること。
- テストケース / テストコードを作成すること。
- テストツールは任意のものを用いて良い。
- テスト実行時にエラーが発生しないこと。
- セキュリティを考慮してコードを記述すること。
- すべての応募者に共通の API Key を提供しているが、実際の API を使用する開発を想定すること。
- ソースコードは Git で管理し、作成したソースコードは GitHub にアップロードすること。
- Netlify / GitHub Pages / Firebase Hosting / Vercel 等の任意のホスティングサービスにデプロイし、インターネット経由で閲覧できる状態にすること。
機能の実装に加え、以下の点も評価の対象となるため、チーム開発を意識してコードを記述すること。
- コンポーネント粒度の設計
- Git コミットメッセージやコミット粒度
- ドキュメンテーション
以下の情報を提出してください。
- GitHub の public リポジトリの URL
- デプロイ先の URL
- 課題の取り組み開始から完了までに要した合計時間
- これまでの総合的なプログラミング歴
- これまでの WEB フロントエンドプログラミング歴
- 着手にあたり参考にしたページや書籍、リポジトリ（任意）
- AI を利用した場合、成果があれば簡潔なレポート（任意）
- Q: 制約内で言及されていない外部パッケージの利用は可能ですか？
- A: 利用可能です。
- Q: SSG や SSR の利用は可能ですか？
- A: 必要に応じて、 SSG や SSR の利用も可能です。
- Q: 事前に機能の一部や、大まかな実装をしたうえでコーディング試験に挑んでも問題ありませんか？
- A: 試験を公開しているため事前の対策は問題ありません。ただし、コードを提出していただく際の「課題の取り組み開始から完了までに要した合計時間」も評価の参考にさせていただくため、コーディング試験を取り組む前に行った実装及びリポジトリをそのまま提出するのはご遠慮ください。