はじめに
前回作成した学習記録アプリに新機能を追加し、大幅にブラッシュアップしました。開発中の気づきや学びについてまとめましたので、ぜひ最後までお読みください。
実装した新機能
今回のバージョンで追加・改善した主な機能は以下の通りです：
- Chakra UIの導入によるUIの刷新
- React-Iconsを活用したデザイン性の向上
- React Hook Formによる洗練されたフォーム実装
- 登録済み学習記録の編集機能
- JESTでMockを活用した効率的なテスト実装
成長を感じた点
前回のアプリ開発と比較して最も成長を感じたのは、公式ドキュメントを積極的に活用できるようになった点です。特にReact Hook Formの実装時に壁にぶつかった際、公式ドキュメントと解説動画を丁寧に読み込むことで問題を解決できました。この経験が今回の開発における最大の学びとなりました。
また、テスト実装においても進化が見られました。以前はJESTを使用していたものの、Mockを活用していませんでしたが、今回はMockを取り入れることでテストの理解が格段に深まりました。
苦労した点と得られた気づき
開発過程で最も苦労したのは、やはりReact Hook Formの実装でした。AIに質問しても解決できず悩んでいたところ、JISOUのオンライン交流会で相談する機会があり、重要なアドバイスをいただきました。
新しい機能を実装する際は、まずその機能単体で検証することが大切だと教わりました。
つまり、新機能実装する時は小さく開発する
これが非常に重要なポイントでした。私は既存の複雑なコードベースに直接新機能を組み込もうとしていたため、問題が複雑化していました。この経験から、段階的な開発アプローチと公式ドキュメントの重要性を強く実感することができました。
おわりに
今回のアプリ開発を通じて、環境構築やCI/CDパイプラインの構築が自然にできるようになりました。今後もReactとTypeScriptの理解を深めていきたいと思います。
また、react-serverという新しいフレームワークやReact 19の安定版がリリースされたので、時間が許せばこれらの新機能も積極的に取り入れていきたいと考えています。
長文をお読みいただき、ありがとうございました！引き続きWebエンジニアになるべく精進していきます！
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。日本一のアウトプットコミュニティでキャリアアップしませんか？興味のある方は、ぜひホームページをご覧ください！
▼▼▼