1
1

作成した学習管理アプリのデータを永続化し、CI/CD環境を構築しました!

Last updated at Posted at 2024-08-04

はじめに

以前Reactの入門として作成しました「学習管理アプリ」について、
タイトル通りデータを永続化し、Githubへのプッシュ時に自動でテストコードを実行し、Firebaseにデプロイされるように機能を追加しましたので、機能のご紹介と所感について記事にしてみます!


↓参考(前回の記事)

アプリに追加した機能

まず機能追加後のアプリはこんな感じです↓。
画面収録 2024-08-03 15.gif

見た目のスタイルは前回と変わっていませんが、今回は学習記録をsupabaseのテーブル上に保存しているので、画面を開き直してもデータが破棄されることはありません。
(初期表示時、登録時、削除時はsupabase上のテーブルにアクセスし、学習記録の取得、登録、削除を行うようにしています。)

また、本アプリのCI/CD環境として、Githubへのプッシュ時に自動でテストコードの実行、及びFirebase環境へのデプロイが行われるように設定しています。

こちら↓の記事がCI/CD環境設定時の記事になりますので、よろしければご参照ください。

所感

CI/CDってなんぞ?というレベルだったのですが、やっぱり自分で手を動かすことが一番頭に入ってきますね!
(ちなみに以下の記事が概念の理解のための参考になりました↓。)

今回は一人での開発(しかも簡易アプリ)でしたが、それでも初めて触ってみる概念や技術だったので結構苦労しました…
(supabaseとの連携の仕方、テストコードの書き方、Github Actionsの設定の仕方、etc...)
ただ、苦労した分だけテストが全てパスした瞬間や、Github Actionsのデプロイが最後まで通った瞬間は爽快でした!(プログラムはこの瞬間が一番楽しい)
大事なのは詰まないことではなく、詰んでから解決するまで何を試したか(そこから何を学んだか) だと思います(というかプログラムを書いていて詰まない人は存在しない)。
今後の課題でもこの気持ちを忘れず最後まで突き進もう!と思いました。

JISOUのメンバー募集中🔥

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか?
気になる方はぜひHPからライン登録お願いします!👇

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1