株式会社ゆめみのフロントエンドコーディング試験にて作成した都道府県別の総人口推移グラフを表示するwebアプリケーションです。
mainブランチには頂いたフィードバックをもとにした修正が入っています。
修正が入っていないブランチはこちらです。
https://k-ishida-yumemi-coding-test.web.app/
| 名前 | 備考 |
|---|---|
| React | create-react-appを使用 |
| TypeScript | - |
| Axios | API |
| Highcharts | グラフ |
| Jest | テスト create-react-appに同梱されていたもののみを使用 |
| ESLint | 静的解析 |
| Prettier | コードフォーマット |
| EditorConfig | コーディングスタイルの指定 |
| Firebase | Hosting |
- Windows 10
- VSCode 1.75.0
- Node.js 18.12.1
git clone https://github.com/ishida-0622/yumemi-coding-test
package.json配下のディレクトリで以下のコマンドを実行
npm install
.env.templateを参考にして.envファイルを作成し、API keyを設定
REACT_APP_API_KEY = "Your API key"
localhostを建てて実行
npm start
- APIの取得結果をキャッシュしているため二度目以降は取得処理が走らない
- 都道府県ごとに折れ線の色、形が固定
- テストコードを書くのが初めてだったので、テストの手法が間違っているかもしれない
- axiosをモックする方法がよくわからなかったので、API関連のテストができていない
- 折れ線の追加・削除時に挙動がおかしかったのを回避するためにグラフのアニメーションを消した
- useMemoを使っているものの、依存配列に渡す値が配列やObjectなので恐らく意味がない
- useCallbackを使っているものの、関連するメモ化処理がないため意味がない
- PR#13のタイトルを英語にしてしまい、そのまま気づかずマージしてしまった
Goodチェック
- API で取得したデータをキャッシュしている
- API のエラーハンドリングができている
- 通信時のローディングの UI を実装している
- データが存在しないときに専用の UI を用意している
- Lighthouse のスコアで高い評価となっている
- コンポーネント分割の粒度が適切である
- ビジネスロジックをコンポーネントから外だししている
- セマンティックなマークアップができている
- Unit Test を書いている
- Integration Test を書いている
- Issue や PR の機能などを活用して開発している
- Hooks を使っている
- カスタムフックを作成している
- README が充実している
- API-key をアプリケーションコードから秘匿している
- TypeScript を使っている（リード以外）
- JSDoc を書いている
- コメントの量が適切である
- コミットの粒度が適切である
- コミットのメッセージが適切である
- コミットに prefix がついている
- 複雑になりがちな人口取得のコードについて、キャッシュ機構も含めた適切な関心分離が出来ていて素晴らしいです。(描画に必要ないキャッシュ用 Map を ref で保持しているのも適切です)
- 型やコメントが充実しており、チームメンバーやレビュワーに優しいコードだと感じました。
- 作業ブランチはmainとdevelopに分けられてGoodだと思いました。
Nextチェック
- チェックボックスにホバーした時に cursor: pointer になっていない
- チェックボックスをダブルクリックするとオフでもグラフ表示される
- .env を使っているが、template がない
- MainContent の selected ステートの初期値のサイズ 47 がマジックナンバーになってしまっています。思い切って Sparse Array にしても良いと思います。(ついでに
- 1も不要になりますし) - .env.templateファイルを用意し、環境変数の設定が補助されていると良いと思います
- チェックボックスを素早く切り替えると、チェックボックスがfalseの状態でもグラフが表示されることがありました。チェックボックスの非活性化等を行い、対策できると良いと思います。
総合評価
- コードは丁寧に書いて、とても読みやすいです。是非次回の選考に進んでいただき、色々とお話できればと思います。