1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Reactで学習時間管理アプリをデプロイし、CICDまでやってみた

Posted at

はじめに

某IT企業でSEをやっています、文系エンジニアです。
今回は、以前作成した学習記録作成アプリを、実際にデプロイし、かつCICDによって継続的にテスト、デプロイが行われるように実装してみました。

やったこと

以下の記事で作成した学習記録管理アプリを、データベース接続とデプロイを行って、Webからのアクセスと入力データの保存を実装した。

スクリーンショット 2026-01-27 8.25.37.png

さらに、Github Actionでワークフローを定義し、定刻に自動的にテストが行われるようにしている。

環境

フロントエンド React
ホスティング Firebase
テスト Jestとreact-testing-library
デプロイ方法 ローカルから fireabase deploy,またはGithub Actionsによる定刻デプロイ

詰まった部分

コードを書く経験はそれなりにあったのですが、テストをイチから書くのは今回が初めてで、かなり時間がかかりました。得にReactの非同期処理にどうやって対応するのか、最初はわからず、数時間を要しました。

得た知見

会社では主に不具合の修正だけを行っており、コードだけ書いて終わり、ということがほとんどだったのですが、今回でテストを書いてみたことによって、保守できるコードの重要性を感じました。
特に昨今、生成AIでいくらでもコードを書ける時代なので、「ただ動く」だけでなく、「将来に渡って動作を担保する」コードを書くことがどれほど大切なのかを実感しました。

追記

アプリ自体は2日前に完成していたのですが、今見てみたら、シークレットにあるはずの値が参照できないことが理由でエラーになっていました。解消したら、この事象についてまた記事にします。

JISOUのメンバー募集中!

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

1
0
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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?