はじめに
日本で売られている海外からの輸入品が現地ではどのくらいの値段(値段)なのか？
それが現在の為替レートで日本での値段から換算できるWEBアプリです。
YEN(円)$(ドル)という名前ですが、ドル以外の外貨でもちゃんと換算できます。
こちらからどうぞ→YEN$CONVERSION
使い方
- 外貨の種類を選択すると現在の為替レートとその推移が折れ線グラフで表示されます。
- 日本円での金額を入力すると選んだ通貨で換算されます。
- さらに過去の日付を選択すると当時のレートでの値段が表示されて現在との差額が表示されます。
動機
スーパーで買い物しているときにフィリピン産のバナナやノルウェー産の鮭などを買うことが多く、ふと現地ではどのくらいの値段なのかと思ったことが開発のきっかけです。
...というのは表向きの理由で、本当はデータが自動的に更新される仕組みを作ってそれを使ってWEBアプリを開発したいというのが理由です。
まあ前者も嘘ではないけど後者の動機の方が強く、2:8くらいの感じです。
使用した技術
アーキテクチャはこんな感じです。
後日、また別の記事を作って詳細をまとめます。
フロント
React.js
状態管理はLocalStrageで行いました。
使用したライブラリは
- tailwindcss(全体のスタイル)
- flag-icons(国旗の表示)
- react-modal
- @nivo/line(折れ線グラフで使用)
Netlify
React.jsで作ったフロント部分をデプロイしたサーバーです。使いやすくてしかも無料です。あなたが神か？
バックエンド
Supabase
REST APIとデータベースで使用。
データベースに入れた値をそのままJSONで表示してくれてとても使いやすかったです。
日本語の情報があまり見つからなかったので公式ドキュメントや海外の方が上げている動画を見て試行錯誤しながらなんとかできました。慣れてしまえば結構使いやすかったです。しかも無料です。神。
私にとってSupabaseはアポロンでした。
GCP
定期実行してSupabaseにレートのデータを格納するために使いました。
かなり苦労したので、そのあたりの話は別の記事にまとめようと思います。
GAS(Google Apps Script)
外部のAPIから為替レートの情報を取得するために使用しました。
その値をスプレッドシートに書き込みました。
スプレッドシート
GASによって書き込まれたレートの情報をFunctionsに読み込んでもらうための中継地点として利用しました。
Functions
スプレッドシートから読み込んだレートの情報をSupabaseに書き込む処理を書きました。
色々あってPythonで書きました。
Scheduler
Functionsの処理を定期実行するために使用しました。
まとめ
2023年の6月の終盤くらいから制作を始めて遅くとも7月末までには完成させようとしたのですが、当時トラブルが多発し8月の末まで延びてしまいました。
時期的に夏休みの宿題や自由研究みたいな感じになりましたが、完成させることが出来て良かったです。
このアプリの制作過程で見つかった反省点と課題を、後日別の記事にまとめます。
