Rork でリアルタイム為替換算アプリを作る — API 連携・ホーム画面ウィジェット・エラー対策まで

為替換算アプリは、初めて Rork でアプリを作る方にとって絶好の練習題材です。シンプルに見えて、外部 API との通信・状態管理・UI の工夫が一通り学べる、ちょうどよい複雑さがあります。

私自身、「まず動くものを公開する」を目標にしていた頃、この規模のアプリがいちばん学習効率が高かったと感じています。今回はそのノウハウをまとめながら、ホーム画面ウィジェットの追加まで一緒に作っていきましょう。

作るものの全体像

完成する為替換算アプリには次の機能が入ります。

主要通貨（JPY / USD / EUR / GBP / CNY など）の現在レートを取得・表示
金額を入力すると即座に換算結果を表示
ホーム画面ウィジェット（iOS のみ）で主要レートを確認
ネットワークエラー時のフォールバック表示とリトライ

ウィジェットは Rork Max が必要ですが、メインアプリ部分は Rork（無料プラン）でも作成できます。

Step 1: ExchangeRate-API のセットアップ

為替レートの取得には ExchangeRate-API（www.exchangerate-api.com 1,500 リクエストまで利用でき、個人開発には十分です。

まず API キーを取得してください。登録後にダッシュボードに表示される API キーをメモしておきます。

リクエスト形式は次の通りです：

GET https://v6.exchangerate-api.com/v6/{YOUR_API_KEY}/latest/USD

レスポンスは以下のような JSON が返ってきます：

{
  "result": "success",
  "base_code": "USD",
  "conversion_rates": {
    "JPY": 153.42,
    "EUR": 0.9187,
    "GBP": 0.7892,
    "CNY": 7.2341
  }
}

Step 2: Rork で基本画面を生成する

Rork のプロンプト欄に次のように入力します。一気に全機能を指定するよりも、段階的に作っていく方がコードの品質が上がります。

為替換算アプリの基本画面を作ってください。

要件:
- 上部にベース通貨のピッカー（USD / EUR / JPY / GBP / CNY の5通貨）
- 金額入力フィールド（数値キーボード）
- 換算結果を5通貨分リスト表示
- ロード中はスケルトン表示
- エラー時は「再試行」ボタン付きのメッセージを表示

デザイン:
- システムフォント、シンプルなカード型レイアウト
- ライト/ダーク両対応

生成されたコードに API 呼び出しを追加します。次の関数をコンポーネントに組み込むよう Rork に指示してください：

// 為替レートを取得する関数
// API キーは環境変数 EXPO_PUBLIC_EXCHANGE_API_KEY に設定する
const fetchExchangeRates = async (baseCurrency: string): Promise<Record<string, number>> => {
  const apiKey = process.env.EXPO_PUBLIC_EXCHANGE_API_KEY;
 
  if (!apiKey) {
    throw new Error('API キーが設定されていません。.env に EXPO_PUBLIC_EXCHANGE_API_KEY を追加してください。');
  }
 
  const response = await fetch(
    `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${baseCurrency}`
  );
 
  if (!response.ok) {
    throw new Error(`API エラー: ${response.status}`);
  }
 
  const data = await response.json();
 
  if (data.result !== 'success') {
    throw new Error(`取得失敗: ${data['error-type'] ?? '不明なエラー'}`);
  }
 
  return data.conversion_rates;
};

なぜ process.env を使うのか: API キーをコード内に直書きすると、GitHub などにプッシュしたときに流出リスクがあります。Rork の環境変数設定（Settings > Environment Variables）に追加することで、コードを安全に保てます。

Step 3: 状態管理とリアルタイム換算ロジック

金額入力に連動してリアルタイムで換算結果を更新するロジックは、useEffect と useMemo の組み合わせが適しています。次のように Rork に指示します：

先ほどの為替換算コンポーネントに次の状態管理を追加してください:

- baseCurrency (string): 現在選択中のベース通貨
- inputAmount (string): 入力金額（文字列として管理）
- rates (Record<string, number>): 取得済みのレート
- isLoading (boolean): 取得中フラグ
- error (string | null): エラーメッセージ

換算結果は useMemo で計算し、baseCurrency または rates が変わったときのみ
再計算するようにしてください。

生成されたコードで特に確認しておきたいポイントがあります。inputAmount を number ではなく string で管理しているかどうかです。数値で持つと「0.」や「0.0」のような入力途中の状態が正しく表示できません。表示用と計算用を分けて持つのが実際のアプリ開発でよく使われるパターンです。

Step 4: よくあるエラーと対処法

為替換算アプリで詰まりやすいポイントを3つ挙げます。

1. API レートの数値が undefined になる

conversion_rates のキーは通貨コードの大文字表記（"JPY" など）です。ピッカーで選んだ通貨コードと大文字小文字が一致しているか確認してください。

// ❌ 小文字で参照するとundefinedになる
const rate = rates["jpy"];
 
// ✅ 大文字で参照する
const rate = rates["JPY"];

2. ネットワークエラー時にアプリがクラッシュする

fetch が失敗したときのハンドリングが抜けていることがよくあります。try-catch の中に入れ、エラー状態を必ず UI に反映させるようにしてください：

const loadRates = async () => {
  setIsLoading(true);
  setError(null);
  try {
    const newRates = await fetchExchangeRates(baseCurrency);
    setRates(newRates);
  } catch (err) {
    // エラーメッセージを文字列として保存（Error オブジェクトを直接 setState しない）
    setError(err instanceof Error ? err.message : '不明なエラーが発生しました');
  } finally {
    setIsLoading(false);
  }
};

3. ウィジェットとメインアプリのレートが一致しない

ウィジェットは独立したプロセスで動くため、メインアプリの状態を直接参照できません。共有するデータは AsyncStorage または expo-secure-store などの永続化ストレージを経由する必要があります。次の Step 5 で詳しく扱います。

Step 5: ホーム画面ウィジェットを追加する（Rork Max 必須）

ウィジェット機能は Rork Max の SwiftUI ネイティブ生成を使います。Rork Max のプロンプトに次のように入力してください：

メインアプリの為替換算アプリにホーム画面ウィジェットを追加してください。

ウィジェット仕様:
- サイズ: small（2x2）のみ
- 表示内容: USD/JPY と EUR/JPY の2レート
- 更新間隔: 60分ごと（TimelineEntry）
- データソース: AppGroup shared container からレートを読み込む

SwiftUI で実装し、WidgetKit を使ってください。

ウィジェットとメインアプリ間のデータ共有には App Group が必要です。Xcode の Signing & Capabilities で App Group を追加した上で、メインアプリ側でレートを保存するコードを追加します：

// メインアプリ側: レート取得後に AppGroup に保存する
import * as SharedPreferences from 'expo-modules-core'; // Rork Max が追加するモジュール
 
const saveRatesForWidget = (rates: Record<string, number>) => {
  const widgetData = {
    usdJpy: rates['JPY'],
    eurJpy: rates['JPY'] / rates['EUR'],  // EUR/JPY の計算
    updatedAt: new Date().toISOString(),
  };
  // Rork Max が生成する NativeModule 経由で共有コンテナに保存
  SharedPreferences.setSharedValue('widgetRates', JSON.stringify(widgetData));
};

ウィジェットのデザイン調整は Rork Max のプロンプトで何度でも指示できます。「もっとコンパクトにして」「フォントを大きくして」といった自然言語での指示が効きます。

完成後にやっておきたいこと

アプリが動いたら、App Store 公開に向けて 2 点だけ確認しておきましょう。

レートのキャッシュ設定: API の無料プランは月 1,500 リクエストが上限です。アプリを開くたびに取得するのではなく、最後の取得から 30〜60 分経過していたら再取得する仕組みを入れると安心です。タイムスタンプを AsyncStorage に保存して比較するだけで実装できます。

免責事項の表示: 為替レートは参考値である旨をアプリ内に記載しておくと、審査リジェクトのリスクを下げられます。フッターに小さく「レートは参考値です。実際の取引レートと異なる場合があります。」と入れておくだけで十分です。

このアプリをベースに、次は複数通貨の比較グラフや過去レートのチャート表示に挑戦してみてください。ExchangeRate-API の有料プランには過去データ取得エンドポイントもあり、Rork の AI 生成と組み合わせることでグラフ表示も数プロンプトで実装できます。

外部 API 連携の基本パターンを身につけると、天気・株価・ニュースといった他のデータソースにも同じ考え方が使えます。ぜひこのアプリを出発点にして、次のアプリ開発に活かしてみてください。

外部 API との接続をさらに深めたい方は、Rork での外部 API 連携 — 基本から認証までも参考になります。また、ウィジェット実装の詳細は WidgetKit ホーム画面ウィジェット完全ガイドにまとめています。