はじめに
開発経験の浅いエンジニアが、2ヶ月間で TypeScript を使って新規登録・編集・削除ができる簡単な学習記録アプリをリニューアルしました。
🔧 リニューアルで実施したこと
- JavaScript から TypeScript への移行
- デザイン部分を Chakra UI で再構築
- フォームを React Hook Form で実装し、バリデーションを追加
- モックを使用したテストコードの作成
🛠 使用技術
- フロントエンド開発：React, TypeScript, Vite
- UIフレームワーク：Chakra UI
- フォーム管理：React Hook Form
- バックエンド・データベース：Supabase, Firebase
- テスト：Jest, React Testing Library
- CI/CD・デプロイ：GitHub Actions
💡 苦労したこと
GitHub Actions でリニューアル前とは異なる構成にしたことで、デプロイ時にエラーが発生しました。
エラーログを読み解き、設定ファイルを調整することで解決できましたが、この過程でCI/CDへの理解が深まりました。
既存のコードを単純に真似るのではなく、あえて異なるアプローチを試すことで、新たな学びが得られる貴重な経験となりました。
🔍 工夫したこと
合計学習時間を表示できる機能を追加しました。
実装時には、必要なテストケースを自分で考えてテストコードを作成しました。
Supabase からのデータ取得に関してエラーが出ましたが、試行錯誤の末に解決でき、Supabase の理解が深まりました。
✨ 作成での気づき
📘 公式ドキュメントのサンプルコードは強力な学習ツール
新しい技術を使う際には、公式ドキュメントのクイックスタートやサンプルコードを活用するのが非常に有効だと実感しました。
まずは動かしてみて、その後に「どこを変えるとどうなるか？」を確かめながら少しずつ編集して理解を深めていきました。
特に Chakra UI や React Hook Form は、公式が提供するサンプルが実践的で、導入もスムーズでした。
やりたいことが明確であれば、まずは公式ドキュメントを頼る。この姿勢を習慣にすることで、実装スピードも理解力も上がると感じました。
🧹 反省点
今回、すべてのコードを App.tsx に記述し、テストコードも1ファイルにまとめてしまったことで、コードが長くなってしまいました。
今後は以下のような点を意識したいです。
- コンポーネントごとにファイルを分割する。
- テストケースごとにファイルを分けて管理する。
- 保守性と可読性を意識した構成にする。
🎉 最後に
プロジェクトの作成から実装、そしてデプロイまでを一通り経験し、2ヶ月前と比べて確実にスキルが身についていると感じました。
エラーが出ても、AIや公式ドキュメントを使いながら自分で解決できるようになってきたので、今後も継続的に学習し、技術力を伸ばしていきたいと思います。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼