1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

前回作成した学習記録アプリに機能を追加したり、Supabaseを利用してデータをDB管理したり、改良を加えました。さらに、作成したアプリをGithub Actionsで自動デプロイしたり、Jestでテストを書いたりしました。

▼前回の記事

アプリの機能

1. 登録ボタン押下→学習内容と学習時間を記録
2. 学習内容と学習時間を一覧で表示
3. 学習内容と学習時間が入力されていない状態で登録ボタン押下→エラー
4. 記録した学習時間の累計表示
5. 追加:各学習内容と時間に削除ボタン配置→押下で当該行削除

プレゼンテーション1 (2).gif

さらにやったこと

  • 登録した学習内容と時間をDBに保存
  • Firebaseにホスティング
  • GitHub Actionsでテスト→ビルド→デプロイを自動実施

やってみて…

Supabase

  • バックエンドはSupabaseを利用。
  • Supabaseは初めて使用。RDBっぽく操作できたので使いやすかった。
  • Reactアプリでどのようにモジュールを書いていけばいいか、非同期処理の扱いで結構時間かかった。

Firebase

GitHub Actions

  • ここらへんも初めて実施。
  • CI/CDは、情報処理系の試験などで名前は知っていた程度だった。実際に実装してみてものすごく理解が深まった。ビルド、テスト、デプロイの一連の動作を自動でできるのはすごく便利。

Jest

  • 考え方含めて、今回一番時間を使った箇所。テストケースが全く書けない。公式ドキュメントを読んでもさっぱり。先人が残したQiita記事やChatGPTを駆使してようやく書けた。
  • 今回のアプリでは、DBを操作するモジュールがあり、最終的にそのモックを作成しテストできたのはよかったか。

その他(課題や今後の展望など…)

  • どれも初めて触る技術、サービスばかりだったが、課題を終わらせる、先に進むという意識が強すぎて1つ1つの理解がまだ十分でないと感じる。公式ドキュメントなどももっと読み込んでいきたいと思う。
  • とりあえず動けばOKみたいな感じで進めていたので、次はベストプラクティスなど調べて、スマート、安全なコードや実装を心掛けたい。

JISOUのメンバー募集中!

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

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?