RESASの都道府県別人口データを選択し、推移を比較できるWebアプリケーションです。株式会社ゆめみのフロントエンドコーディング試験を題材に、画面設計から実装、テスト、継続的インテグレーションまで一人で構築しました。
背景
人口推移を比較する画面では、複数の都道府県を選ぶ操作、時系列グラフの読みやすさ、API取得中の表示、狭い画面での操作性を同時に扱う必要があります。また、RESAS APIのキーをクライアントへ露出せず、同じ統計データを繰り返し取得しない構成も必要でした。
単に課題の機能要件を満たすだけでなく、デザインと実装の対応、アクセシビリティ、テスト可能性、レビュー時の再現性を含む小規模なプロダクトとして設計しました。
本人の担当
FigmaでのUI設計からNext.jsへの実装まで、次の範囲を担当しました。
- 都道府県選択、統計種別、時系列グラフを含む画面設計
- ライトテーマとダークテーマのデザイントークン設計
- Next.js App RouterとReact Server Componentsによるデータ取得
- Rechartsを使った人口推移の可視化
- ZodによるAPIレスポンスの検証
- Storybookでのコンポーネントとインタラクションの確認
- Vitestによるロジックのユニットテスト
- Playwrightによる主要操作のE2Eテスト
- GitHub Actions上でのLint、テスト、Storybook、E2Eの自動実行
設計判断
API処理をサーバー側へ集約する
RESAS APIからの取得とデータ整形はReact Server Components側で行い、結果を24時間キャッシュする構成にしました。APIキーをブラウザへ渡さず、都道府県と統計種別に応じた表示用データだけをクライアントへ渡します。
外部データをそのまま描画へ流さず、Zodでレスポンスを検証してから整形します。取得失敗、読み込み中、正常表示を別の状態として扱い、外部APIの応答に画面全体が暗黙に依存しないようにしました。
FigmaとCSSで同じトークンを使う
ライト・ダークの色はFigma Variablesで設計し、実装ではCSS VariablesとPanda CSSのtoken・recipeへ対応させました。個別コンポーネントへ色値を直接書くのではなく、背景、文字、境界、操作状態の役割で管理しています。
これにより、テーマ切り替え時もコントラストと状態表現を同じ規則で確認できます。READMEに保存された計測結果では、PageSpeed InsightsのAccessibilityスコア100を記録しました。これは計測時点の結果であり、常に同じスコアを保証するものではありません。
URLを比較状態として扱う
選択した都道府県と統計種別をURLへ反映し、同じ比較状態を共有・再訪できるようにしました。Open Graph情報にも選択状態を反映し、単なるトップページではなく、表示している比較内容を表すURLにしています。
自動テストの役割を分ける
データ変換などのロジックはVitest、コンポーネントの表示と操作はStorybookのinteraction test、画面をまたぐ利用経路はPlaywrightで確認しました。GitHub Actionsでは、ESLintとPrettier、Vitest、Storybook interaction、Playwright E2EをPull Requestごとに実行する構成にしました。
成果と残った改善点
公開READMEに収録された課題レビューでは、独自の画面設計、キャッシュ、エラーとローディングの扱い、コンポーネント分割、ビジネスロジックの分離、テスト、Docker、CI、APIキーの管理、semantic HTMLなどが確認されています。
一方で、チェックボックスのlabelにクリック可能であることを示すcursorがない点と、トップページの選択だけでは表示内容が切り替わらない点が改善候補として残りました。評価結果を実装済みの長所だけに限定せず、次に直すべきUI上の差分も記録しています。