【React × TypeScript 】学習記録アプリの完成

はじめに

過去2つの課題で制作してきた学習記録アプリですが、今回で最後になります。今回はTypeScriptやChakra UIを使用して制作を行いました。

↓前回の記事はこちらです

制作したアプリ

工夫した点

• シンプルなデザイン
  直感的でシンプルなデザインを目指しました。Todoアプリのようなアプリは機能が多くないため、ユーザーが直感的に使えるようアイコンを設定しました。

• TypeScriptの使用
  TypeScriptを使用することで、入力データの型を厳密に設定し、エラーを未然に防ぐようにしました。

• Chakra UIの使用
  スタイリングにはChakra UIを使用しました。これまでTailwind CSSやstyled-componentsを使ってきましたが、Chakra UIはUIコンポーネントが豊富で、自分でボタンなどを作成する必要がなく、簡単にスタイリングできました。

• 編集機能の追加
  前回までにタスクの追加と削除機能を実装していましたが、今回はタスクの編集機能を追加しました。

• react hook formの使用
  バリデーションチェックにはreact hook formを使い、効率的にformの状態管理を行えるようにしました。

大変だったところ

react hook formの使い方を誤解していたことで、多くのエラーが発生しました。フォームデータの状態はreact hook formにより自動で管理されるため、手動でuseStateを使用して状態を管理する必要がありません。しかし、私は独自にuseStateを使って状態管理をしてしまい、状態が重複することで問題が発生しました。

具体的には、フォームデータの更新が反映されず、常に古いデータが表示されてしまう問題が発生しました。

気づき

前回から大きく成長を感じたことが２つあります。

• テスト実装がスムーズにできるようになった
  前回の課題ではテストが何かもわかっていませんでした。テストの実装にはかなり苦戦し一番時間がかかったことでした。（以前の私の状況は下記の記事に記載していますのでぜひご覧ください。）しかしテストの実装の仕方を一度経験したことによって、今回はスムーズに実装することができました。前回とは異なりモックを使ったテストの実装も行なっておりテスト実装のスキルは大きく向上しました。

• エラー解決能力が向上した
  まだまだ足りないところはたくさんあるのですが、前回よりはエラー解決能力が向上しました。今回はreact hook formのstate管理でかなり苦戦しました。formのデータの更新がうまくいっておらず今までだったら闇雲に間違いを探すかchat GPTまかせでした。formのデータ更新がうまくいかないので、state周りが怪しいとある程度問題がある箇所を絞ることができエラーを探すことができたのは大きな成長だと思いました。

終わりに

このアプリの製作中に、会社のReact案件にアサインされることが決まりました。今回の学習が実務でも活かせると感じています。引き続き、学習を頑張っていきたいです。

JISOUのメンバー募集中

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからお願いします👇