はじめに

外国からの輸入品を日本円から現地の通貨に換算して、向こうではどのくらいの価値があるのかの目安を示すことができるWEBアプリ「YEN$CONVERSION」を完成させてしばらく経ちました。
開発で疲れ切った頭もようやく回復してきたので、今回は反省点を書こうと思います。
文章量が多くなりそうなので、2つに分けて投稿したいと思います。

フロントエンド編 ← 今ここ
バックエンド編

こちらの記事 → React.js + Supabase + GCPで作った個人開発WEBアプリ「YEN$CONVERSION」もよろしくお願いします。

今回の開発を通しての感想

とにかく長引いて疲れました。当初は6月末から開発を始めて遅くとも7月が終わるころまでに終わらせる予定でしたが、ひと月も延期して8月末までずれ込んでしまいました。
主な理由としては

夏バテ
バックエンドの迷走

の二つです。
夏バテに関しては根性で乗り切ったということで特筆すべきことは無いので詳細は書きませんが、体調不良はメンタルにもデバフがかかるので結構辛かったです。
フロントエンドにもトラブルが無かったわけではないのですが、バックエンドに比べると些末なものでした。

フロントエンド

フロントエンドはReactとSupabaseです。
Supabaseは本来バックエンドの方で書くのが適切ですが、あっちの文章量が多くなりそうなのでこっちの方で書きます。
構成はこんな感じです。

React.js

ライブラリ

トータルで見ると一番トラブルが少なかったけど順調というわけではありませんでした。
ページの見た目を良くしたくて以下のライブラリを使いました↓

flag-icons
選択された通貨コードの国旗の表示するために使用
react-modal
Aboutページのポップアップで使用
tailwindcss
全体のスタイルを整えるために使用
@nivo/line
折れ線グラフで使用

この中で折れ線グラフで用いるライブラリの選定に苦労しました。react-chartjs-2などがありましたが、人気のあるライブラリがほとんどTypeScriptでサンプルコードが書かれていました。jsで大分開発を進めていたので今更tsに変更するには労力が大きく、そもそも自分はTypeScriptが使えません。幸運にも@nivo/lineというライブラリがjsでも書けるグラフのようで助かりましたが、もし自分がTypeScriptを使えているならば、このような苦労はせずに済んだかもしれません。

状態管理

当初はReduxを使おうと考えて開発と並行して試していましたが、今回のようなアプリではどう考えてもオーバースペックで機能を持て余しました。
そこで以前LocalStrageの記事を読んだ記憶があり、調べたところコードも簡単だったので、乗り換えることにしました。

選択した通貨コード
API(Supabase)から取得したレートの情報
データを更新する時間

をローカルに格納している主な値です。
APIへの通信を極力節約したくて方法を考えて
決まった時間までローカルにレートの情報があるなら通信を行わずその値を参照する
という感じにしました。
なぜデータを更新する時間をローカルに入れたかというと、クッキーのように有効期限を定められないからです。自動的に消えてくれないので自分で実装する必要がありました。これが一番フロントで苦労しました。
大まかには

あらかじめ決めてある更新時間をUNIX時間にしてローカルに格納
現在の日時をUNIX時間で取得
現在のUNIX時間が更新時間のUNIX時間より大きければ更新

という感じで実装しました。

Supabase

特にこれといった苦労はありませんでしたが、強いて言えば日本語の情報が少なかったことです。
公式ドキュメントと海外の方のYoutube動画を見て使い方を学び、今回はAPIとして使用しました。
データベースにはPostgresQLを使っていて、そこに格納されているデータをjson形式で表示するというWeb APIとしてはよくあるパターンだったので、扱いやすくて良かったです。
また、ロードの速さに驚きました。

以前作ったTea's DatabaseでもReact.jsでWeb APIからデータを取得する形式でしたが、APIの方はReanderにデプロイしたexpress.jsを使ってjsonでデータを表示するようにしていたのでとても遅かったです。

まとめ

そういう感じで順風満帆とは行かないものの大した苦労もなくフロントエンドの開発は終わりました。
今後、新しいエラーが出たり新たな機能を実装しない限りはもう触れることはないと思います。
TypeScriptは書けるようにしておいた方が良いなと強く思いました。
地獄のバックエンド編に続きます...