はじめに
外国からの輸入品を日本円から現地の通貨に換算して、向こうではどのくらいの価値があるのかの目安を示すことができるWEBアプリ「YEN$CONVERSION」の反省点を書こうと思います。
文章量が多くなりそうなので、2つに分けて投稿したいと思います。
- フロントエンド編 ← 今ここ
- バックエンド編
こちらの記事もよろしくお願いします。
開発を通しての感想
とにかく長引いて疲れました。
当初は2023年6月末から開発を始めて遅くとも同年7月が終わるころまでに終わらせる予定でしたが、ひと月も延期して8月末までずれ込みました。
主な理由としては
- 夏バテ
- バックエンドの迷走
夏バテに関しては根性で乗り切ったということで特筆すべきことは無いので詳細は書きませんが、体調の悪さはメンタルにもデバフがかかるので結構辛かったです。
フロントエンドにもトラブルが無かったわけではないのですが、バックエンドに比べると些末なものでした。
フロントエンド
フロントエンドはReactとSupabaseです。
Supabaseは本来バックエンド編の方で書くのが適切ですが、文章量が多くなりそうなのでこっちで書きます。
構成はこんな感じです。
React.js
ライブラリ
トータルで見ると一番トラブルが少なかったのですが、だからといって順調というわけではありませんでした。
ページの見栄えを良くしたくて以下のライブラリを使いました。
この中で折れ線グラフで用いるライブラリの選定に苦労しました。
react-chartjs-2などがありましたが、人気のあるライブラリのほとんどがTypeScriptでサンプルコードが書かれていました。
JavaScriptで開発を進めていたのでTypeScriptへ変更するには労力が大きく、そもそも開発当時の自分はTypeScriptが使えませんでした。
幸運にも@nivo/lineというライブラリがjsでも書けるグラフのようで助かりました。- flag-icons 選択された通貨コードの国旗の表示するために使用
- react-modal Aboutページのポップアップで使用
- tailwindcss 全体のスタイルを整えるために使用
- @nivo/line 折れ線グラフで使用
状態管理
当初はReduxを使おうと考えて開発と並行して試していましたが、今回のようなアプリではどう考えてもオーバースペックで機能を持て余しました。
そこで以前LocalStrageの記事を読んだ記憶が蘇り、調べたところコードも簡単だったので、乗り換えることにしました。
以上がローカルに格納している主な値です。- 選択した通貨コード
- API(Supabase)から取得したレートの情報
- データを更新する時間
APIへの通信を極力節約したかったので、
決まった時間までローカルにレートの情報があるなら通信を行わずその値を参照する
という方法をとりました。
なぜデータを更新する時間をローカルに入れたかというと、クッキーのように有効期限を定められないからです。
自動的に消えてくれないので自分で実装する必要がありました。
フロントで最も苦労したのがこの作業です。
大まかには
という感じで実装しました。- あらかじめ決めてある更新時間をUNIX時間にしてローカルに格納
- 現在の日時をUNIX時間で取得
- 現在のUNIX時間が更新時間のUNIX時間より大きければ更新
これまで20個ほどWebアプリを製作しましたが、そのほとんどでlocalStorageを使いました。
その過程で得たものを今後記事としてアウトプットしたいと思います。
Supabase
特にこれといった苦労はありませんでしたが、強いて言えば日本語の情報が少なかったことです。
公式ドキュメントと海外の方のYoutube動画を見て使い方を学び、今回はREST APIとして使用しました。
データベースにはPostgresQLを使っていて、そこに格納されているデータをJSON形式で表示するというWeb APIとしてはよくあるパターンだったので、扱いやすくて良かったです。
また、ロードの速さに驚きました。
以前作ったTea's DatabaseというWebアプリもReact.jsでWeb APIからデータを取得する形式でしたが、
APIの方はRenderにデプロイしたexpress.jsを使ってJSONでデータを表示するようにしていたのでとても遅かったです(現在は改善済)。
どうもRenderの無料プランは15分間非アクティブ状態が続くとスリープする仕様だったのが原因のようです。
まとめ
そういう感じで順風満帆とは行かないものの大した苦労もなくフロントエンドの開発は終わりました。
今後、新しいエラーが出たり新たな機能を実装しない限りはもう触れることはないと思います。
なお今回の苦い経験からTypeScriptは書けるように努力し、次回作のWebアプリからはすべてTSで書いています。
地獄のバックエンド編に続く...
