📈 RESAS App

Summary

株式会社ゆめみのサマーインターンのフロントエンドコーディング試験課題

都道府県別の総人口推移グラフを表示するSPA(Single Page Application)

試験内容

📔 Notion

[内容]

1. RESAS(地域経済分析システム) APIの「都道府県一覧」APIから取得する
2. APIレスポンスから都道府県一覧のチェックボックスを動的に生成する
3. 都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する
4. 人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する
   • 「総人口」の他に「年少人口」「生産年齢人口」「老年人口」も切り替えるUIを何らかの形で用意し表示できるようにすること（同時に表示する必要はない）

作成物

1. ElysiaJSを用いて中間サーバーの作成: 中間サーバーとしてNext.jsのRoute Handlersをそのまま使用するのではなくサーバーフレームワークの🦊 ElysiaJSでマウントするような形で使用

   • 🪴 Edenが使用できるの型安全にfetch処理が書ける
   • 🧪 Unit Testが容易に書くことができる
   • 🔌 Pluginを使用することができる

2. React Server Componentの使用: RSCを使用することによってサイトにアクセスしてからのレスポンス時間を短縮しUXを向上させせる

   • ⏳ PageSpeed Insightsでの結果、携帯電話・デスクトップ両方とも90後半を記録

3. a11yにも配慮: ariaラベルやaltラベルなどを適切に使用

   • ⏳ PageSpeed Insightsでの結果、携帯電話・デスクトップ両方とも90後半を記録

4. GitHub Actionsの使用: testやbuildをデプロイ前に行うように設定

   • 最近のPR
   • 適切にCacheを用いることにより高速化を実現

5. 🍞 Bunの使用: runtime, pmとして__Bun__を使用

6. 🥞 Feature-Sliced Designの使用: フロントエンドのアーキテクチャとしてFSDを使用しディレクトリ構成もこれに準拠した形で作成

   • 各レイヤーの特徴を押さえそれに沿ってコンポーネントやユーティリティ関数を作成
   • レイヤー間で依存関係を持つ際にはFSDの制約の範囲内で行った

7. Storybookの導入: 全てのコンポーネントにsbを作成

   • sbのディレクトリわけをFSDが見やすくなるように工夫

Tech Stack

Bun v1.1.9
Typescript v5系

Next.js v14系
ElysiaJS v1系
  └ Eden v1系
Tailwindcss v3系
Storybook v8系
jotai v2系
recharts v2系
react-query v5系

Performance

PageSpeed Insights

Link

Mobile	Desktop

Building

Bun

BunのRuntimeマネージャーとしてprotoを使用しています。protoを使用していない場合は.prototoolsにあるbunのバージョンをご使用ください。

proto use

Install

bun i

Development

bun dev

Build

bun build

bun start

Lint

bun lint

or

bun lint:fix

format

bun fmt

or

bun fmt:fix

Storybook

bun sb:dev

その他

開発期間 5日