はじめに
学習記録アプリを以前作成しました。
今回は、さらに学習記録アプリをグレードアップしました。
以前作成したアプリ
以前作成したアプリは学習内容と学習時間を入力し、登録できるアプリでした。
このアプリには以下の3つの問題がありました。
問題1:リロードするとデータが消える
問題2:ローカル上でしか確認できない
問題3:実際の動作が客観的に保障されていない
今回はグレードアップを行い、3つの問題を解決しました。
supabaseでDBを作成
supabaseというサービスを利用し、DBを作成しました。
無料で使えるかつ、DBを作成しデータを保存でき、そこから読み取ったり書き込んだりできます。
GUI操作で簡単にDB作成、テストデータ作成ができます。
supabaseでDBを作成し、そこに登録したデータを保存したり、データを読みとれるようにしたことで、リロードしてもデータが消えないようになりました。
firebaseでデプロイ
firebaseで学習記録アプリをデプロイし、ホスティングさせました。
簡単にwebアプリを公開できるのでおススメです。
テスティングフレームワークのjestを導入
jestというテスティング」フレームワークを用いて、Reactの動作をテストしました。
テストを実装することで、実際の動作が保証できます。
GithubActionsで自動テスト、自動デプロイ
jestでのテスト実行とfirebaseのデプロイをGithubActionsで自動化しました。
mainブランチにpushされると、テスト実行とfirebaseデプロイを自動で行ってくれます。
成長できた実感がある
控えめに言っても、前回と比べてやれることがかなり増えました。
前回
- ReactでTodoアプリ、学習記録アプリを作れるぐらい
今回
- supabaseを使用して、DBを作成
- firebaseでデプロイ
- jestを使用してテストを作成
- GithubActionsでCICD
これらができるようになったという実感がすごくあります。
大変だったところ
GithubActionsを使用するのは初めてだったため、job(処理の単位)の実行方法から、job間のartifact(互の働き)を理解するのに時間がかかりました。
初めてのことをやるのは試行錯誤の連続でしたが、やり遂げた際は達成感があります。
やればできる
Reactを学んだことがない段階では、ReactのテストからCICDをやるなんて想像していなかったです。
ただ、しっかりと学習を進めていけばできるようになりました。
毎日学習することはやはり大事ですね。
おわりに
まだまだ、Reactについて学ぶことは多いのでこれからも学習を続け、また学んだことを記事にしたいと思います！
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします👇