学習歴1ヶ月でReactアプリ開発チャレンジ：DB作成～自動デプロイ・テスト実装まで

はじめに

React学習歴1カ月のA.Kと申します。よろしくお願いします！
今回は、この1カ月でやったことを技術ベースの内容でまとめていきます。

簡単な自己紹介と学習開始時の状況はこちらの記事にまとめてます！

1カ月でやったこと

ちなみに「JavaScriptってなあに？」状態から始めたので、かなり駆け足です（笑）

１．学習記録アプリの作成
２．Viteで環境構築
３．supabaseでDB作成
４．Git上でPush時に自動デプロイ（パイプライン構築）
５．Jestとreact-testing-libraryでテスト作成

１．学習記録アプリの作成

React×JavaScriptで簡単なアプリを作成しました！
自分史上初の成果物になります。。！
Udemyの講座でインプットした基礎を生かして最低限の機能を実装しました。
なお、この時点では環境構築は一切行っていません。ブラウザIDEを使用していました。

アプリの内容に関しては過去記事に上げているので、今回は割愛します！

２．Viteで環境構築

主な流れとしては下記です。

WSL2をインストールして、Ubuntsuの環境を用意する
asdfのインストール（node.jsのバージョン管理用）
Node.jsのインストール
ViteでReact環境を作る

個人で環境構築をすること自体が初めてだったので、先輩エンジニアのサポートを受けつつ進めていきました。
公式ドキュメントにインストール方法なんかは全部書いてあるのですが、なんのこっちゃか全然わからず。。最終的にQiitaで先人方が書いてくださった記事をいくつか参照していました。公式ドキュメントを読む力をつけていかなきゃな。。

ちなみに「asdfとは？viteとは？」みたいな説明は下記の記事で書いてます！

３．supabaseでDB作成

まず、Supabaseとは
アプリケーションのバックエンドを構築するためのオープンソースのプラットフォームです。煩雑な設定や手順を省略して、素早くデータベースを立ち上げることができます。

下記の動画を参考にしつつ設定を進めました。

この段階では、環境変数の扱いで少し苦戦しました。
というのは .envファイル（環境変数を設定・管理しているファイル）をGit上に公開してしまったんですね。ここにはsupabaseのプライベートキーも記載されているので、絶対に外部に知られてはいけない情報になります。
従って、.gitignoreファイルに.envファイルを追記して、Gitプッシュされないようにする必要がありました。
「何でもかんでもGitにあげちゃダメなんだな」と学びました。。

４．Git上でPush時に自動デプロイ（パイプライン構築）

一番苦戦しました。。

今回行うこととしては
GitHub上のプロジェクトのソースコードからビルドされたアプリケーションが、Firebase Hostingなどの実際のサーバーにデプロイされる仕組みをつくることです。

手順はこんな感じです。

ハンズオンを実施して全体の流れを理解

Firebaseでデプロイに必要な権限をもったサービスアカウントを作成

Github ActionsでFirebase連携の設定を行う
パイプライン構築（Push時にデプロイされるように設定）

私は「どの過程でどのファイルが参照されてデプロイされるのか」が理解できておらず、エラーの解消に時間がかかりました。

具体的には、デプロイ時に「distディレクトリが存在しません。」と怒られていたのですが、こいつの正体をしらなかったため、何が原因なのか特定ができませんでした。

ちなみに、「distディレクトリ」とは
Git上でビルドスクリプトを実行したときに、アプリケーションの成果物（コードやファイル）がまとめられる場所のことです。そして、この「distディレクトリ」内に生成されたファイルがFirebaseにアップロードされ、実際にアプリケーションがウェブ上で公開されます。

５．Jestとreact-testing-libraryでテスト作成

下記の手順で行いました。

jestとreact-testing-libraryをインストール
dotenvをインストール（.env ファイルを読み込み、そこに記述されたキー＆バリューのペアを process.env 経由で参照できるようになります。）
Jestの設定を行う
テスト作成

今回は以下の4点をテストしました。

・タイトルが表示される
・入力をしないで登録ボタンを押すとエラーが表示される
・入力フォームに学習内容と時間を入力して登録ボタンを押すと新たに記録が追加される
・削除ボタンを押すと学習記録が削除される

苦労したのが、非同期処理のタイムラグを考慮しないとテストが上手くいかない、ということです。
今回はデータ（学習時間・学習内容）の取得を行う際に、非同期関数を使っていました。
従って、新しく追加されたデータや削除されたデータの反映にタイムラグが生じます。
なので、waitFor関数を使って処理が終わるまでテストの実行を待ってあげる必要がありました。

おわりに

以上の内容を1カ月で行いました！
自分にとってはほとんどの工程が初めての経験で、常に手を動かしながら大量の知識を吸収したため、混乱することもありました（笑）
それでも、実践ベースで学習したほうが理解度は高まると思います。
あと、デプロイが成功した時の達成感はすごいので、少しづつ成功体験を積んでいけると感じました。
これからも、しっかりと休息をとりつつ学習を継続していきます！

これからの学習予定

・学習記録アプリの使用言語をJavaScript→TypeScriptに移行
・UIライブラリを使用してデザインを整える
・テスト作成

JISOUのメンバー募集中

プログラミングコーチングJISOUではメンバーを募集しています。
気になる方はぜひHPからライン登録お願いします！
https://projisou.jp