nebular-lab / yumemi_nextjs

概要

このプロジェクトは株式会社ゆめみのコーディングテストです。 テスト内容の詳細はこちら。

都道府県別の人口推移グラフを表示します。

開発サーバーの立ち上げ方

npm install

npm run dev

使用した技術

• React
• Next.js (App Router)
• Tailwind CSS
• react-chartjs-2
• zod
• zustand
• shadcn/ui
• rambda
• prettier
• eslint
• husky

技術的な工夫した点

プレーンなReactだけでも作れますが、せっかくなので新しい技術を色々使ってみました。 特に気に入った技術を紹介します。

zod

ランタイムで型のチェックを行うことができます。フォーム入力のヴァリデーションをするときによく使われますが、今回のように、外部のAPIを使ってフェッチしたデータが想定した型なのかのチェックにも使えます。

Next.jsのParallel Routes

src/app/の配下に＠から始まる三つのファイルがあります。Next.jsのParallel Routesという機能で、@から始まるファイルにあるpages.tsxを並行してレンダリングをすることが出来ます。並行レンダリングをすることで、レンダリング速度が速いコンポーネントを先にレンダリングすることが出来るためUXを向上させることが出来ます。このアプリでは、その機能を確認しやすいように、レンダリングの時間をわざと遅らせています。

また、SuspenseやErrorBoundaryを使わずに、ファイルベースでコンポーネントのローディング時やエラー時に描画するコンポーネントを管理することが出来るため、開発者体験も向上します。

shadcn/ui

Radix UI と Tailwind CSSをベースにしたUIコンポーネントコレクションです。これは、Material UIやChakra UIのようなコンポーネントライブラリとは違い、依存関係としてインストールするのではなく、コンポーネントのコードをCLIでコピー&ペーストして使います。そのため、依存関係によって他のライブラリの影響を心配をする必要がなかったり、コピーしたコードのスタイルを自由に変更したりすることが出来たりします。

husky

gitのフックを使って、コミット前にlintやコード整形を走らせることが出来ます。テストも走らせることが出来るので、もしテストコードを書くことになったら導入したいです。