株式会社ゆめみのサマーインターンのフロントエンドコーディング試験課題
都道府県別の総人口推移グラフを表示するSPA(Single Page Application)
[内容]
- RESAS(地域経済分析システム) APIの「都道府県一覧」APIから取得する
- APIレスポンスから都道府県一覧のチェックボックスを動的に生成する
- 都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する
- 人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する
- 「総人口」の他に「年少人口」「生産年齢人口」「老年人口」も切り替えるUIを何らかの形で用意し表示できるようにすること(同時に表示する必要はない)
-
ElysiaJS
を用いて中間サーバーの作成: 中間サーバーとしてNext.jsのRoute Handlersをそのまま使用するのではなくサーバーフレームワークの🦊 ElysiaJSでマウントするような形で使用- 🪴 Edenが使用できるの型安全にfetch処理が書ける
- 🧪 Unit Testが容易に書くことができる
- 🔌 Pluginを使用することができる
-
React Server Component
の使用:RSC
を使用することによってサイトにアクセスしてからのレスポンス時間を短縮しUXを向上させせる- ⏳ PageSpeed Insightsでの結果、携帯電話・デスクトップ両方とも90後半を記録
-
a11y
にも配慮:aria
ラベルやalt
ラベルなどを適切に使用- ⏳ PageSpeed Insightsでの結果、携帯電話・デスクトップ両方とも90後半を記録
-
GitHub Actions
の使用:test
やbuild
をデプロイ前に行うように設定- 最近のPR
- 適切にCacheを用いることにより高速化を実現
-
🍞 Bun
の使用: runtime, pmとして__Bun__を使用 -
🥞 Feature-Sliced Designの使用: フロントエンドのアーキテクチャとして
FSD
を使用しディレクトリ構成もこれに準拠した形で作成- 各レイヤーの特徴を押さえそれに沿ってコンポーネントやユーティリティ関数を作成
- レイヤー間で依存関係を持つ際にはFSDの制約の範囲内で行った
-
Storybook
の導入: 全てのコンポーネントにsbを作成- sbのディレクトリわけをFSDが見やすくなるように工夫
Bun v1.1.9
Typescript v5系
Next.js v14系
ElysiaJS v1系
└ Eden v1系
Tailwindcss v3系
Storybook v8系
jotai v2系
recharts v2系
react-query v5系
PageSpeed Insights
Mobile | Desktop |
---|---|
![]() |
![]() |
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日