はじめに
以前こちらの記事で紹介した学習記録アプリをTypescriptを使用してつくりかえてみました。
前回はシンプルなCSSを当てているのみでしたが、今回はChakra UIを使用してより機能的に使えるようにしました。
作成したアプリ
概要
学習した時間や学習した内容を簡単に記録できるアプリ
使用言語・ライブラリ
Typescript, React
DB
Supabase
テスト
Jest
React-testing-library
その他
Firebase
Github
実装機能
「登録する」ボタンを押すと、モーダルが表示されて学習内容と学習時間を入力できます。
入力した内容が、画面右側に即時追加されます。
削除ボタンを押すと、該当のデータを一つ表から削除できます。
編集ボタンを押すと、モーダルが開いて学習内容と学習時間を編集できます。
モーダルの入力がない場合は、エラーメッセージが表示されます。
画面にあるライトモードでダークモードとの切り替えが可能です。
難しかったこと
今回react-hook-formを利用して、学習内容や時間の登録時に入力がないとエラーが出るようにしています。
ただ、初めて利用するものだったので仕組みを理解するまでに時間がかかりました。
特に「登録する」ボタンを押してから、モーダルが開いた後にすでにエラーが入力画面に表示されていたり、入力をしてもエラーが消えなかったりといろいろなパターンを経験しました。
最終的にはonChangeで入力された値をsetValue関数で更新することで、入力があった場合のエラーを消すことに成功しました。
感想
前回初めて作った時とは違い、テストやGithubActionsを使用したデプロイの作業に少しずつ慣れて、作業が大変だと思うことが少なかったです。
また、今回はChakra UIで見やすいUIを作ろうといろいろ試すことができたこともいい経験ができたと思います。自分の思う通りに部品を配置させるのは案外難しく感じましたが、今後もいろいろ作っていく中で慣れていきたいです。
実際に動くものを作ってみることで、自分がどこを理解していてどこがまだ曖昧な理解なのかというのがすぐわかるので今後もアウトプットを続けていきます。
今回学べたこと
今回のアプリ作成で以下を特に学べたと感じるので書いておきます。
- Chakra UIを使用したアプリ作成の方法
- react-testing-libraryのgetByAllやfindByAllの違い、waitForとactの違いなど
- モックを使ってテストをする方法
- react-hook-formの使い方
- Typescriptでクラスを作成し使用する方法
- 環境構築でのtsconfingやtsconfig.appなどの違い
さいごに
アプリ作成を続けていることでエラーやバグなどの問題が生じても動じないようになってきました。今は何かを作っていくことが楽しいので、これからもどんどん作っていこうと思います。
最後まで読んでいただきありがとうございました！
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼