はじめに
前回リリースした学習記録アプリですが、これをTypeScriptで作り直してみました。
ついでにChakra UIも導入して、見た目も整えてみました。
簡単なCRUDアプリなのは相変わらずですが、新しい技術を導入したことで、完成にこぎつけるまでに様々な学び（と苦労）を得ることが出来ました。アプリとリポジトリは下記のリンクで公開しています。
今回も相変わらずよくわからないところで悩んでました。
使用技術
- Vite
- React
- TypeScript
- react-hook-form
- Chakura UI v2.10.9
- 以前はCSSも何もない素の状態だったので、スタイルを整えるために使用
- Supabase
- バックエンドDB
- Jest
- React Testing Library
- Firebase
- デプロイ先
- GitHub Actions
- CI/CDに使用
前回からの変更点
1．TypeScriptでの実装
前回はJavaScriptでの実装でしたが、今回はTypeScriptを学習したのを機に、クラスやインスタンス、カスタムフックを使用して全面的に書き直しました。
TypeScriptは型で苦労する、と聞いたので結構おっかなびっくりで実装を進めていたのですが、以前にJavaを学習していたせいか、あんまり悩むこともなかったです。「何これ？」というエラーがないわけではなかったのですが、だいたい初歩的なミスでした。
2. useとSuspenseの使用
今回はReact 19を導入したので、データフェッチにuseとSuspenseを使用してみることにしました。が、Supabaseとの相性が良くなかったのか、それとも自分の理解が足りないのか、実装にあたっては結構苦労しました。
Suspenseだけで一月に3本も記事書いてます。この時の私は完全にSuspenseおじさんと化していました。
実装以上に苦労したのはテストでした。ローディング画面表示のテストが全く通らず、何をしても解決しないのでかなり悩んでいました。
結局、jestなどがuseに対応できていないらしい、ということで一旦解決としましたが、自分の未熟さを痛感しました。
あと、フレームワークなしでのSuspenseの使用自体が結構無茶な試みだったみたいです。
使い方の規約のある (opinionated) フレームワークを使用せずにサスペンスを使ったデータフェッチを行うことは、まだサポートされていません。サスペンス対応のデータソースを実装するための要件はまだ不安定であり、ドキュメント化されていません。データソースをサスペンスと統合するための公式な API は、React の将来のバージョンでリリースされる予定です。
3. react-hook-formとChakra UIの導入
今回から、UIを実装するにあたってreact-hook-formとChakra UIを使用しました。
前回はフォーム周りを実装するのが結構面倒だった記憶があるのですが、これらを使うと簡単にモダンなフォームが作れますね。
簡単な機能のアプリですが、モーダルやアイコンボタンが付くとなんとなくそれっぽく見える気がしますし、実際に動作するとちょっと感動します。
4. 編集機能の追加
以前までは記録の追加と削除のみだったのですが、今回は編集できる機能を追加しました。
当初はどうやればいいのか皆目見当が付かなかったのですが、以前に同じ課題にチャレンジしたJISOUメンバーのQiitaにかなり助けられながら実装にこぎ着けました。
気付き・学び
- TypeScript、Chakra UI、react-hook-formといった技術スタックを使用することで、よりモダンな実装の初歩を学べた
- カスタムフックなどを使用することで、よりReactらしい実装を体験できた
- 今回もAIによるコード作成支援を利用したが、以前よりはAIの提案する内容を理解して、採用／不採用を決められた点は成長かもしれない
- どうしてもわからない部分は誰かに聞くのめっちゃ大事。 一人で抱え込むのが一番よくない
苦労した点
- 今回も非同期処理（というかPromiseやuse）に悩まされた。このあたりは一度ちゃんと勉強し直したほうがいいのかもしれない
- 主要な部分ではあまり躓きはなかったが、上記したとおり新しく挑戦したSuspense周りで苦労した。新しい技術を試すのはいいが、その前に公式ドキュメントをきちんと読み込む必要を感じた
- テストで前回のコードを安易に流用したら動かずハマったことがあった。そのコードで何が実現されるのか？についてまだまだ理解が足りていない
成長を感じた点
今回は、前回のアプリと比べて「それっぽい」ものを作れるようにはなったかな、と感じています。
実は、今回は前回よりも壁にぶつかった、とか苦労した、という部分は少なかったのですが、それこそが最大の成長なのかもしれません。
これからも学習を続けて、CRUDアプリ以上のものが作れるようになりたいです。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼