#002Saving-UP
Saving-UP
制作のきっかけ
計算をもう少しだけ楽にしたい
オーストラリアに留学中、節約のモチベーションを維持しながら貯金額を記録する際の手間を減らすために、このWebアプリの制作を思いつきました。
当時、電卓アプリや為替の確認を複数のアプリで行い、手動で計算していました。そこで、目標金額、貯金額、目標期日を入力することで、目標達成までに必要な額や、毎週の目標貯金額を即座に計算し、進捗を確認できるWebアプリを開発しました。
こだわりポイント
インタラクティブな体験
目標金額や貯金額を入力すると、電卓アプリのように画面上にリアルタイムで反映され、為替レートを自動で取得して計算します。これにより、無駄な入力を避け、スムーズに必要な情報を得られるよう工夫しました。
3ステップで簡単に結果が表示
目標金額、貯金額、目標期日を入力するだけで、週ごとの必要貯金額が即座に計算されます。また、目標達成に向けて残りの金額も一目でわかるように表示され、シンプルに目標達成までの現在地が分かるようになっています。
苦労したこと
APIキーの管理
課題
外部APIを利用する際、APIキーをどこに保存するかというセキュリティ上の問題に直面しました。コード内に直接入力せずAPIキーを使用する課題がありました。
解決
VercelのAPIルートを活用し、環境変数にAPIキーを登録しました。これにより、クライアントサイドにはAPIキーが露出せず、安全にAPIを利用できる設計にしました。
非同期処理とSSGの活用
課題
取得する為替データは24時間ごとに更新される仕様でしたが、リロードのたびにAPIリクエストが発生し、データの表示にタイムラグが生じていました。
解決
Next.jsのgetStaticPropsを使用し、事前にデータを取得するSSG（静的サイト生成）を導入しました。さらに、revalidate: 86400（24時間）を設定することで、一定時間内のアクセスでは同じデータを返すよう最適化しました。これにより、為替データを表示するまでのタイムラグを解消し、無駄なAPIリクエストを削減できました。