1. はじめに：なぜ「通貨換算アプリ」なのか？
海外サービスの価格比較、旅行費用の計算、ECサイトの多通貨対応など、通貨換算はあらゆるプロダクトで必要になります。今回は、実際に「通貨換算アプリ」を作成しながら、API連携・フロント実装・エラーハンドリングまで、実務で役立つ知識を体系的に学べる構成にしました。
この記事は、次のような方に向けて書いています：
- APIを活用したアプリ開発に挑戦したいエンジニア
- VueやReactなどのフロントエンドで実践経験を積みたい方
- 小さなプロジェクトを通して設計・実装・運用まで体験したい方
2. 技術スタックとAPIの選定
使用技術：
- フロントエンド: Vue 3 (Composition API) または React (任意)
- スタイリング: Tailwind CSS
- API: ExchangeRate.host
- ビルド: Vite
- デプロイ: Netlify（無料枠で十分）
ExchangeRate.host の特徴：
- 無料で利用可能（商用もOK）
- 通貨ペアを指定してリアルタイムで換算可能
- レスポンスがシンプルで扱いやすい
APIの一例：
GET https://api.exchangerate.host/convert?from=USD&to=JPY&amount=100
レスポンス例：
{
"success": true,
"query": {
"from": "USD",
"to": "JPY",
"amount": 100
},
"info": {
"rate": 147.52
},
"result": 14752
}
3. 実装：最小構成で始める通貨換算アプリ
初期セットアップ（Vue 3 + Vite）
npm create vite@latest currency-converter --template vue
cd currency-converter
npm install
npm install axios
npm run dev
コンポーネント例：CurrencyConverter.vue
<template>
<div class="p-4 max-w-md mx-auto bg-white rounded-xl shadow-md">
<h1 class="text-xl font-bold mb-4">通貨換算アプリ</h1>
<input v-model="amount" type="number" class="input" placeholder="金額 (例: 100)" />
<select v-model="from">
<option v-for="c in currencies" :key="c" :value="c">{{ c }}</option>
</select>
→
<select v-model="to">
<option v-for="c in currencies" :key="c" :value="c">{{ c }}</option>
</select>
<button @click="convert" class="btn mt-2">換算</button>
<p v-if="result !== null" class="mt-4 text-lg">結果: {{ result }} {{ to }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
const amount = ref(100)
const from = ref('USD')
const to = ref('JPY')
const result = ref(null)
const currencies = ['USD', 'JPY', 'EUR', 'KRW', 'VND']
const convert = async () => {
try {
const res = await axios.get(`https://api.exchangerate.host/convert`, {
params: { from: from.value, to: to.value, amount: amount.value }
})
result.value = res.data.result
} catch (err) {
alert('換算に失敗しました。ネットワークを確認してください。')
}
}
</script>
<style scoped>
.input, select, .btn {
@apply border p-2 rounded w-full mb-2;
}
</style>
4. 実務で役立つTipsと落とし穴
よくある落とし穴：
| 落とし穴 | 解決策 |
|---|---|
| API制限で失敗 | 無料APIでもレート制限があるため、連打防止対策を入れる |
| 通貨コードが間違っている | UIで固定選択肢を使い、ユーザー入力は避ける |
| ネットワーク失敗 | 明確なエラー表示と再試行案内が必要 |
実務Tips：
-
axiosのエラーハンドリングはtry-catch+alertではなく、ユーザーにわかりやすいモーダル等が望ましい - テストでは、
mock APIを使ってレート変化に影響されないチェックを行う - Tailwindでスタイリングすると、Figmaいらずで高速開発が可能
5. 応用編：さらに高度な機能追加
- 為替履歴グラフ表示（Chart.js +
timeseriesendpoint） - 特定の通貨ペアを「お気に入り」保存（
localStorage活用） - ユーザーのロケーションに応じた初期通貨設定（
navigator.languageなど）
6. まとめ
| 観点 | 内容 |
|---|---|
| メリット | 無料で学べるAPI実装、UX設計、API設計の全体感を体験できる |
| デメリット | 無料APIなので信頼性やスピードは限定的 |
| 将来性 | 金融API、マイクロサービス、ダッシュボード開発への足がかり |
このように、API一つから始まる小さなプロジェクトでも、実務で活きる知識が詰まっています。
ぜひ、自分なりにカスタマイズして、GitHubに公開してみましょう！