- 閲覧 URL: https://yumemi-frontend-task-ryo-maejii.vercel.app/
- 課題合計時間: 約 20 時間
- 総合的なプログラミング歴: 3 ~ 4 年 (大学 1 年時から授業で触っていました。授業外で本気で取り組み始めたのは大学 4 年生の春からです。)
- これまでの WEB フロントエンドプログラミング歴: 1 年 5 ヶ月
- React.js (v18.2.0)
- Typescript
- Node.js (v16.16.0)
- Styled Components
- Story Book
- SWR
- Prettier
- ESlint
- CommitLint
- zod
-
RESAS API の API キーを取得する。 (https://opendata.resas-portal.go.jp/)
-
.env.example
を.env
にコピーし、REACT_APP_RESAS_API_KEY
に 1 で取得した API キーをセットする。cp .env.example .env
-
パッケージのインストール (注: Node.js のバージョンが 16 以上でないとインストールできません。)
yarn
-
アプリの起動
yarn start
-
ストーリーブックを見たい場合
yarn storybook
非同期処理が絡むコンポーネントを Suspense と ErrorBoundary によって囲むことによって、より宣言的に UI を構築するようにしました。Suspense と ErrorBoundary を使用することにより、{data, isLoading, error} = useCustomHook()
などのisLoading, error
の値を使用することなく UI を制御することが可能となります。
個別選択だけでなく、全選択および前解除を行うことができる機能を実装しました。都道府県一覧取得より動的に生成されるチェックボックスに追加で「すべて」チェックボックスを配置し変更時の処理に全選択を追加することにより実装しました。
StoryBook を使用することにより、コンポーネントごとの UI の確認や Props による変化などを簡単に確認することができます。
zod を使用し、RESAS API のレスポンスをバリデーションをかけるようにしました。これにより、実際にコンポーネントで使用されるよりも前の段階で API レスポンスの型の整合性を確認することができ、エラーハンドリングが行いやすくなっています。また、今後 form などを実装する際にも入力値のバリデーションをかけることが期待できます。
- 独自チェックボックスコンポーネントを実装
- グラフを日本語のフォーマットに変更
- .node-version, .nvmrc ファイルを記載
- 1 人での実装だったが、PR と Issue を活用(チーム開発を意識)
- priority ラベルの追加
- PR, Issue テンプレートの追加
- Github Actions を使用しテストを実行
- Husky, lint-staged を使用し commit 前に確認処理
- CommitLint によるコミット文の制御
- Typescript の使用