はじめに

Reactで作成した学習時間記録アプリをアップデートしたので、振り返ろうと思います。

やったこと

今回、以下の4つのアップデートを行いました。

Supabaseを用いたデータ管理
Firebaseを用いたアプリの自動デプロイ
GitHub Actionsを用いたアプリの自動デプロイ（CI/CD）
Jest、React Testing Libraryを用いたアプリの自動テスト

それぞれ初めての経験で、何をどうすればいいのか全く分からない状態からのスタートだったため、かなり苦戦しました。

Supabaseを用いたデータ管理

学べたこと

ANONキーやURLは.envファイルで隠す必要があること
insertは成功しても返り値（result）がnullや空配列になる場合があること
APIの呼び出しには非同期処理（async await）が事実上必須になること

insertに成功しても返り値がnullや空配列で返ってくると、consoleにはエラーが出ないため、原因の特定に時間がかかりました。
解決方法は以下で解説しています。

また、ボタン押下時にデフォルトでページがリロードされるということも知らなかったため、それを防ぐ関数event.preventDefault()の存在も知れました。

Firebaseを用いたアプリの自動デプロイ

学べたこと

サーバーサイド開発の手間を省くためにGoogleの開発したFirebaseが存在すること
Webアプリのビルド・デプロイ方法
makeコマンドを使うことでビルドとデプロイを一気に行えること

Firebaseも名前くらいしか聞いたことがなく、”そもそも何ができるものなのか”から調べました。

ビルド＝Webアプリを作成した後、ビルド（コンパイルやバンドル）を行なってくれる。
デプロイ＝ビルドしたファイルをユーザーがインターネット上で使用できるようにする。

make deployコマンドで、ビルド〜デプロイまでできるのにも感動した記憶があります。

GitHub Actionsを用いたアプリの自動デプロイ（CI/CD）

学べたこと

yamlファイルの設定方法
CI/CDパイプラインの構築方法

CI/CD構築は一番苦戦しましたが、ターミナルで入力していたコマンドをyamlファイル上に記載することで、GitHubにpushするだけで自動デプロイを実現できたときは、何とも言えない達成感がありました。
まだスラスラ構築できるレベルではないので、これからもたくさん構築して慣れていきたいと思います。

Jest、React Testing Libraryを用いたアプリの自動テスト

学べたこと

自動テストとは何か
テストをする意味
テストの方法
モック化の方法

モック化してテストすることで、バグを残したままデプロイする危険性を防げるのは、これからエンジニアとして勤務する予定なので、今学べておいて良かったなと感じています。（恐らく実務でも使うはず？）
ここもまだスラスラと行えるレベルではないので、今後も引き続き学んでいって、レベルを上げたいです。

おわりに

今回、新しく4つのアップデートを行ってみて、アプリを他の人が使えるようにするだけでも沢山難しいことをしないといけないんだなぁと痛感しました。
また、自分の理解が浅い部分を深ぼるいい機会にもなったと思います。
今回学んだとこを、今後も様々なアプリを作る中で反復して行い、自分のレベルを上げていきたいです。

JISOUのメンバー募集中！

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