はじめに
以前にReactを用いた学習記録アプリを作成したことを記事にしました。
上記のアプリに新たな機能を付与してアップデートを行いました。
今回の記事はそのアップデートの中で行ったことの振り返りです。
やったこと
今回のアップデートでは大きく分けて4つの事象に取り組みました。
①Supabaseを用いたデータ管理
②Firebaseを用いたアプリのデプロイ・公開
③GitHub Actionsを用いたアプリの自動デプロイ
④Jest、React Testing Libraryを用いたアプリの自動テスト
これらの事象は実務未経験で馴染みのない内容だったため実装にかなり苦労しました。
それぞれの過程で数々のエラーに遭遇したり行き詰まったりしたため時間も労力も最初のアプリ作成時とは比べものにならなかったと感じています。
Supabaseを用いたデータ管理
学べたこと
- データ管理のためにはAPIの情報とアプリを連携させる必要があること
- APIのデータは第三者に閲覧させないように
.envファイルで管理すること - 環境変数の呼び出し方。環境によって呼び出し方法が異なること(Viteなど)
- APIをアプリ上で呼び出す際には非同期処理を行う必要があること
呼び出す際にViteではimport.meta.env形式で呼び出す必要があり、そこに気づくまでに時間を要していました。
また、非同期処理の要領をうまく掴めておらずデータベースからの挿入関数・削除関数をアプリ上の値のやり取りと連携させることも苦労した記憶があります。
Firebaseを用いたアプリのデプロイ・公開
学べたこと
- アプリをサーバーに公開するためのサーバのような機能としてFirebaseが存在していること
- アプリを「デプロイする」という概念
-
makeコマンドを使うことでターミナル上での複数の処理を一括して実施できるようになること
今まではWeb制作系の業務が中心だったので、制作物をアップする際は「既存のサーバーにFTP経由で制作物をアップロードする」という流れが基本でした。
一方で今回のアプリ開発ではFTPとは全く違うフローで公開作業をすることになり、流れを掴むのが大変だった印象があります。
Firebaseの情報や環境変数をアプリと紐付ける部分でも、デプロイできていると思いきやアプリが正しく表示されない...といった事象が幾度も発生して対象に苦労しました。
その苦労の分だけデプロイを通してアプリが無事に動いた時の喜びはひとしおでした。
GitHub Actionsを用いたアプリの自動デプロイ
学べたこと
- GitHub Actionsでのデプロイで使うyamlファイルの設定方法
- ターミナルで入力していたコマンドをyamlファイル上で再現することで自動デプロイを実現できること
- アプリ上で環境変数を設定した処理はGitHub上でも環境変数として設定させないとデプロイが実行されないこと
実は業務内で一度GitHub Actionは経験していましたが、一からyamlファイルを作成してデプロイフローを組み立てるのは初めてでした。
ビルドからデプロイまでの工程をなぞりながらyamlファイルで動くように記述するのは非常に苦闘しました。その分無事に通った時はかなり安堵しました。
Jest、React Testing Libraryを用いたアプリの自動テスト
学んだこと
- そもそも自動テストとは何か
- Testing Libraryでjsxから要素を取得したり判定したりする方法
- DOMと非同期処理の関係
「自動テスト」ツールでは動的なテストも可能と知れたのは自分の中で驚きであるとともにかなりの収穫でした。
React Testing Libraryは独自の記法に慣れる必要がある一方で、後から振り返るとWeb制作的なDOM操作と共通する部分も多く、今までのノウハウを流用できる部分がありました。
(実装にはかなり手間取りましたが...)
今回の課題ではデータベースとの連携によって非同期処理をしている部分の表示テストも行ったので、非同期処理の関係性を振り返る良い機会にもなれた気がします。
課題の中で得られたこと
①実装で詰まっても検索や質問をしてして粘ってみること
今回の課題を通しては未知の実装をする機会や初見のツールに触る機会がとても多く存在しました。当然へっぽこな現時点の自分の実力では何度も壁にぶち当たることがありました。
ですが、世の中には同じように詰まっていた人のTipsであったりハイスキルな技術者のスキル共有がたくさん存在しています。
それらをうまく頼ることでなんとか歩みを進めることができました。
同時に自分より経験とスキルのある人の力をうまく借りることも重要だと改めて認識しました。
その方は自分と同じ失敗をして乗り越えた経験があるからです。
総じて、自分の力を最大限絞り出しつついざという時は人や記事に頼ることの大切さを学びました。
②ツールの最高の教科書は公式ドキュメントであること
公式ドキュメント、大事！！！！！！！！！！
①で述べたようにエラー対処や指針の迷走が起きた時に様々な記事を参考に対処していました。
が、結局最も網羅的かつわかりやすく情報が載っているサイトは公式ドキュメントでした。 Qiitaの記事で皆「公式ドキュメントを読め」という理由が身に沁みてわかりました......
自分はつい"すぐ答えの情報に辿り着きたくなってしまう"ために記事情報を頼りがちだったので、これからは公式ドキュメントを熟読する癖をつけないとですね。
③フロント開発にはDBなどのフロント以外の知見も必要になるので、普段から「フロントエンド」に限定しない知識の吸収をすべきなこと
今回の課題をやるまでは、どうしてもデータベースやサーバー寄りの知識についてh「フロントエンドの領域じゃないしな...」と敬遠しがちな部分があったのは事実です。
ですが、SupabaseやFirebaseを用いたアプリ開発を通して、将来的にこれらバックエンド寄りの知識をつけた方がエンジニアとして幅を広げられるというのを実感しました。
一度「見る目」が変われば用語や言語への関心度合いも変わってくるはずです。少なくとも自分は今回を通して関心を深められた気がします。
最後に
ここまで読んでいただきありがとうございます。
言語やツールの技術はもちろんのこと、今回の課題を通して業務中に上司や先輩から口酸っぱく言われていることの理由を身をもって体感できたことが大きかったです。
これからも今回で得られた学びを糧にして勉強を頑張っていきたいです！
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼