JISOU 課題2「学習記録アプリ」（データ永続化・テスト実装・CI/CD）振り返り

Posted at 2024-11-19

はじめに

お疲れ様です、りつです。

参加させていただいているプログラミングスクール「JISOU」の課題2がやっと完了しました！

今回は、その振り返り記事です。

課題1で作成した学習記録アプリ（React + JavaScript）をコピーして新規のプロジェクトを作成しました。

ご参考までに、以下が課題1の振り返り記事です。

その上で、課題2では以下を実施しました。

簡単にですが各詳細をご説明します。

Supabaseにstudy-recordテーブルを作成しました
学習記録アプリの以下の部分を調整しました
- データ読み込みのタイミングでローディング画面を表示するよう調整
- 登録ボタン押下時に画面とテーブルにデータを追加するよう調整
- 各学習記録の横に削除ボタンを追加し、ボタン押下時に画面とテーブル上から対象データを削除するよう調整

補足
課題1では学習記録の追加にはuseStateを使用しており、画面リロードを行うと追加したデータは消えてしまっていました。

React Testing Libraryを用いて、以下の4つのテストコードを実装しました
- タイトル（「学習記録一覧」）が表示されている
- フォームに学習内容と時間を入力して登録ボタンを押すと新たに記録が追加される
- 削除ボタンを押すと学習記録が削除される
- フォームに入力をしないで登録を押すとエラーが表示される

featureブランチからmainブランチへのプルリクエストを作成した際に以下を実行するようにしました
- 自動でテストを実行
- プレビュー用URLをPR画面のコメント欄へ表示
mainブランチへマージすると、ホスティングURLに自動でデプロイされるようにしました

GitHubActionsを用いてFirebaseへ自動デプロイする方法について、以下の記事を書きました。

課題2では、初めてSupabase、Firebase、GitHubActionsを使用しました。

いずれも名前は聞いたことがあるものの、どのようなことができるのかイメージできていない状態からのスタートです。

「何ができるのかいまいちわからない」ところから、「それらを使ってアプリを動かせる。簡易的にでもCI/CDできる」ところまでいけたところが一番成長を感じた部分です。
（実務で使用するとなると、まだまだ考慮すべき点はたくさんあるかと思いますが）

実際に使ってみることで、それぞれのサービスの便利さもより実感できたように思います。

今回特に大変だったのは、テスト実装の部分とCI/CDの部分でした。
特に、ローカル環境で成功するテストがCI環境でエラーになる現象には、3日くらい頭を悩ませました(^^;)

テストケースが悪いのか？
はたまたワークフローのymlファイルの記述内容が悪いのか？

なかなか原因がつかめず、テストコードやGitHubActionsのymlファイルをちょっとずつ書き換えたり、実行ログを確認したりして進めました。

本事象を解消した方法については以下の記事もご参照ください。

あとは、できるだけ公式のドキュメントも参考にするよう意識しました。

とはいえ、英語でなかなか内容をつかみ取れなかったりする部分もあるので、以下も活用しつつ理解できるよう努めました。

今回、CI環境がローカル環境より動作が遅くなる可能性があることを想定できずハマりました。

環境起因であることに気づけず原因がつかめなかったので、エラーが出た際には環境が原因の可能性も頭の片隅に置きつつ、引き続き学習していけたらなと思います。

課題2では、自分の作ったアプリをDBを使ってデータ保持できるようにしたり、CI/CDを用いて開発～デプロイまでスムーズに行えるようにしました。

表側からはわかりにくいけれど重要な機能に触れる機会が多くあり、大変勉強になりました。
次はTypeScriptの学習も始まりますので、改めて学習頑張っていきたいと思います！

実はこの記事でQiita10記事目なんですよね。
JISOUに入る前は、自分がここまでQiitaにアウトプットできるなんて想像もできませんでした。

日々少しずつではありますが、作業を進めて、悩んだ部分や詰まった部分はアウトプットの種と思って取り組んできました。

こうして振り返った時に日々の積み重ねを実感できるのもアウトプットの良い面だなと思いつつ、おわりたいと思います！

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