【React】初めて作ったアプリを改良してみた

はじめに

前回とりあえずローカルで動くところまで作った学習記録アプリの機能を改良し、テストとCI/CDまでを行いました。

機能自体は簡単なCRUDアプリなのですが、完成にこぎつけるまでに様々な学びを得ることが出来ました。アプリは下記のリンクで公開しています。

後ほど書きますがめっちゃ大変でした。

使用技術

• Vite
• React
• Supabase
  • バックエンドDB
• Jest
  • React Testing Library
• Firebase
  • デプロイ先
• GitHub Actions
  • CI/CDに使用

前回からの変更点

1. Supabaseを使用してのデータ永続化
2. 削除機能の実装
3. Firebaseへのデプロイ
4. Jest、React Testing Libraryを使用してのテスト
5. GitHub Actionsを使用したCI/CD

1．Supabaseを使用してのデータ永続化

前回作ったアプリはデータをstateに保持していただけなので、リロードしたりタブを閉じて開き直したりすると、登録したデータは消えてしまっていました。
そこで、Supabaseと連携してデータを永続化しました。

データベースを扱うのは初めてだったため、設定などに苦労するかな、と予想していましたが、YouTubeや公式ドキュメントに詳しい解説があったのもあり、割とすんなり実装できました。

どちらかというとLoading画面の実装に苦労しました。こちらは当初Suspenseで実装しようとして諦めた経緯があるので、次回以降はここの改善にチャレンジしたいですね。

2. 削除機能の実装

ここは少し悩みました。
DBへの反映はうまくいったのですが、結果を一覧に即時反映させる実装のイメージがわかず困っていたところ、@Sicut_studyさんからヒントを頂きつつなんとか完了までこぎつけました。

3. Firebaseへのデプロイ

以前、インターンでFirebaseを少し触った経験があった（デプロイまではしていない）ので、これは特に苦もなく実現できました。

とはいえ、自分の作ったアプリが実際にオンラインで動いているのを見ると嬉しいですね。

4. Jest、React Testing Libraryを使用してのテスト

ここが最も苦労しました。
ハンズオンで導入し、サンプルテスト自体は動いたものの、いざ自分のやりたいテストを実装しようとしても何をどう書けばいいのかわからない、というところからのスタートでした。

ドキュメントや他の人が書いた記事を見たり、導入したサンプルコードを読み解いてもイメージの掴めないところが多く、AIに聞きながら書いていく形になりました。
ところが、いざ書き上げても実行してみるとエラーに次ぐエラーの嵐で、まさに試行錯誤の日々でした。

いくつかテストを書いていくうちに、そもそもやりたいことを実現するには何をすればいいかわかっていない、ということに気付き、まずはそこを書き出していくところから進めると、序盤ほど悩まずに書けるようになりました。

5. GitHub Actionsを使用したCI/CD

以前Dockerを勉強していたこともあってか、ymlファイルの作成・編集自体は苦労しなかったのですが、いざデプロイ、という段になるとエラーを解消するとまたエラー、といった感じで手こずりました。特に、GitHub Actons上ではデプロイが成功しているにもかかわらず、実際にはアプリが表示すらされない、という事態が起きたときは何が起きているかわからずにエラー解消に手こずりました。

気付き・学び

• 環境構築～CI/CDによるデプロイを一気通貫で学ぶことで、個人開発における流れを把握することができた
• プログラミングにおける自動テストを始めて経験することで、テストにおける目標設定及びコード実装前のテスト要件の洗い出しの重要性に気付いた
• ReactにおけるAPI連携方法及び非同期処理について理解を深めることができた
• GitHub Actionsとはどういうサービスか、またその仕組みについて学べた
• コード書いてるとき以上にyml書いてデプロイを試行錯誤してるときが楽しかった
• 今回の開発からCodiumを導入し、その威力に驚いた（特に入力支援）
• ただ、問題解決においてついAIに頼りがちになってしまう面があるため、基礎を理解するまでは一定のルールを設けて運用する必要性は感じた（特に問題解決後の復習は必須）

苦労した点

• 非同期処理について、頭ではなんとなく理解していても実装においてどのような配慮が必要かをあまり理解できておらず、機能実装時やテスト制作時に苦労した
• テストの課程は何をやるべきかわからず、とにかく苦労した。今から振り返ると、そもそもテストとは何を目的に行い、それを達成するために何が必要なのかを理解していなかったので、いきなりコードを書こうとせずそこの整理やインプットから始めるべきだった
• ドキュメントがあまり親切でないこともあり、JestやReact Testing Libraryの書き方を理解するのに時間を要した。こういう場合はサンプルコード参考にとりあえず書いてみて、ダメなら調べてみる、を繰り返すのが結果的に早く覚えられそう

成長を感じた点

私は、JISOU入会以前にインターンに参加して挫折した経験があります。
そのときの課題はFirebaseを利用した会員管理アプリの制作とデプロイでした。
当時の自分は「constって何、コードに出てくるこの矢印みたいなの何」みたいな状態だったので、今から思うと失敗して当然だったのですが、そんな自分でもなんとかCRUDアプリを制作してデプロイするところまで成長することができました。

理想の自分に至るまではまだまだ学ばなければならないこと、克服しなければいけないことは多いですが、それでも今回の経験は一つの自信に繋がりました。

今後も学習を続けて、自分の作りたいものを作れるよう今後も努力したいと思います。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼