takecchi / japan-population-viewer

都道府県別の人口推移グラフをみるやつです。コーディングテストとして書いたものになります。

Hey 👋, I'm Takecchi

Rapidfire

• 🔭 最近は趣味で Cuculus を開発しています。

Languages and Tools

Github Stats

---

Generated using Github Profilinator

japan-population-viewer's Issues

APIの実装

概要

使用するAPIはRESAS-APIと外部のものを使用するが、
API_KEYの露出を避けるためにAPI Routesを使用してバックエンドを実装する。

「年少人口」「生産年齢人口」「老年人口」の切り替え

概要

「総人口」だけでなく「年少人口」「生産年齢人口」「老年人口」を切り替えられるようにする。

チェックボックスコンポーネントの作成

概要

都道府県選択で使用するチェックボックスのコンポーネントの作成

Todo

• Storybookで見れること
• labelが可変である
• チェック状態
• onChange

StorybookでReactClientComponentが動かない

概要

Storybookに登録したPrefecturesコンポーネントが正常に動かない。
エラーにuseRouterとあるのでReactClientComponentが原因

あとuseSearchParamsがnullになる

storybookの導入

概要

デザインと開発の一貫性を保つためにStorybookを導入する。

Todo

• storybookが動作すること

都道府県一覧を取得して表示する

概要

RERAS APIから都道府県一覧を取得して表示する。
選択された都道府県番号をクエリパラメータを使ってコンポーネントに伝える

prettierの導入

概要

prettierを入れることでコードの一貫性を確保します。
また、フォーマットを合わせることでコードの衝突防止やレビューの手間を削減する。

グラフコンポーネントの実装

概要

選択した都道府県一覧からグラフを作成する

Todo

ツールチップの修正

概要

選択が増えるとRechartsにカーソルを合わせたときのツールチップが、
どんどん長くなってしまう(ウィンドウがガクガクする)ので、可能であればカーソルをあわせた場所のツールチップのみを表示するなどしたい。

ドキュメント整理

概要

環境構築や.env、導入ライブラリやアプリケーションの概要など整備していきたい。

Todo

• Readme.mdに以下の内容を記載
  • ブランチルール(Github Flow)
  • 各種ディレクトリ説明
  • .envの説明
  • 環境構築手順
  • 使用しているライブラリやツール
• Storybook

インタラクションテスト

概要

Test runnerを導入する。

Todo

• Github Actionsで自動的にテストが実行されること

Kuma UIの導入

概要

ゼロランタイムCSS in JSであるKuma UIを使用

Todo

• styledやcss記法でcssが記述できること
• storybookでも問題なく確認ができること

ライブラリの最新化とrenovateの導入

概要

renovateを使用して継続的にライブラリをアップデートする

huskyとlint-stagedの導入

概要

huskyとlint-stagedを導入することでコミット前にフォーマットを強制させる。

Todo

• #3
• husky+lint-stagedの導入

トップページの作成

概要

上部に都道府県のチェックボックス
下部に総人口遷移グラフ

リグレッションテスト

概要

フロントエンドのUIの変更を検出し、意図しない変更がないか確認を行う。

チャートライブラリ選定

概要

グラフを表示するためのライブラリ選定

Todo

• やることリスト