markdown

はじめに (対象読者・この記事でわかること)

この記事は、iOS アプリ開発者のうち、SwiftUI と Combine を用いたリアルタイム為替変換機能を実装しようとしている方を対象としています。特に、CurrencyConverterViewModel の amountInOtherCurrency を @Published でバインドした際に、画面が真っ白になる（ブランクウィンドウが表示される）現象に遭遇した経験がある方に向け、原因の特定から具体的な回避策、実装例までを詳細に解説します。この記事を読むことで、以下ができるようになります。

  • ブランクウィンドウが発生する根本原因を理解する
  • 正しいバインディングの書き方とメモリ管理のポイントを把握する
  • 実際に動作するコードサンプルを自プロジェクトに組み込める

背景として、SwiftUI のデータバインディングは便利ですが、状態管理を誤ると UI が予期せぬ状態になることがあります。本稿はそんな落とし穴を避けるための実践的ガイドです。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。
- Swift の基本構文とプロトコル指向プログラミング
- SwiftUI の基本的なビュー構成と @State, @ObservedObject, @Published の意味
- Combine フレームワークの Publisher / Subscriber の概念

概要・背景：Currency Converter のバインディング問題

為替変換アプリでは、ユーザーが入力した金額（amountInBaseCurrency）を基に、選択した通貨レートを掛け算して amountInOtherCurrency を算出し、リアルタイムに画面に表示します。典型的な実装は次のようになります。

Swift

class CurrencyConverterViewModel: ObservableObject {
    @Published var amountInBaseCurrency: String = ""
    @Published var amountInOtherCurrency: String = ""
    private var cancellables = Set<AnyCancellable>()

    init() {
        $amountInBaseCurrency
            .debounce(for: .milliseconds(300), scheduler: RunLoop.main)
            .map { Double($0) ?? 0.0 }
            .combineLatest(fetchExchangeRate())
            .map { base, rate in
                String(format: "%.2f", base * rate)
            }
            .assign(to: \.amountInOtherCurrency, on: self)
            .store(in: &cancellables)
    }

    private func fetchExchangeRate() -> AnyPublisher<Double, Never> {
        // API 呼び出しのモック
        Just(110.0).eraseToAnyPublisher()
    }
}

このコードは概ね正しいのですが、実際に amountInOtherCurrency をビューにバインドすると、何も描画されない白いウィンドウが表示されるケースがあります。なぜなら、assign(to:on:) が内部で UI スレッド外で実行される可能性があるため、@Published の更新が非同期に行われ、SwiftUI のレンダリングサイクルが破綻するからです。

また、cancellables がビューのライフサイクルに合わせて適切に破棄されないと、古い購読が残り続け、メモリリークと同時に UI がフリーズする事象が報告されています。さらに、debounce と combineLatest の組み合わせが過度に複雑になると、予期せぬタイミングで nil が流れ込み、String(format:) がクラッシュし、結果としてブランクウィンドウが表示されることもあります。

この節では、以下のポイントを整理します。

  1. バインディングのタイミング：assign(to:on:) のスレッド指定が正しくないと UI が更新されない。
  2. サブスクリプション管理：cancellables が解放されないと古い購読が残り、ビューが再描画されなくなる。
  3. データ変換時の安全性：Double($0) ?? 0.0 のみで済ませず、入力検証を行わないと NaN が流入し、SwiftUI が描画を中止する。

次章では、これら課題を踏まえた 安全かつシンプルな実装 を具体的に示します。

実装手順とトラブルシューティング

ステップ1：ViewModel の構造を見直す

まずは assign(to:on:) の代わりに sink を利用し、必ずメインスレッドで状態更新を行うようにします。さらに、cancellables を @MainActor で保持し、ビューの破棄時に自動でキャンセルされるようにします。

Swift

@MainActor
class CurrencyConverterViewModel: ObservableObject {
    @Published var amountInBaseCurrency: String = ""
    @Published var amountInOtherCurrency: String = ""
    private var cancellables = Set<AnyCancellable>()

    init() {
        $amountInBaseCurrency
            .debounce(for: .milliseconds(300), scheduler: RunLoop.main)
            .map { Double($0) ?? 0.0 }
            .combineLatest(fetchExchangeRate())
            .map { base, rate in
                guard !base.isNaN else { return "" }
                return String(format: "%.2f", base * rate)
            }
            .receive(on: DispatchQueue.main) // 明示的にメインスレッドへ
            .sink { [weak self] converted in
                self?.amountInOtherCurrency = converted
            }
            .store(in: &cancellables)
    }

    private func fetchExchangeRate() -> AnyPublisher<Double, Never> {
        // 実際の API 呼び出しに差し替える
        Just(110.0).eraseToAnyPublisher()
    }
}

ポイントは以下です。

  • receive(on:) で明示的にメインスレッドへディスパッチすることで、UI 更新が保証されます。
  • sink でクロージャ内に weak self を使い、循環参照を防止。
  • guard !base.isNaN による安全チェックで、数値変換失敗時に空文字列を返すようにし、SwiftUI がクラッシュしないようにしています。

ステップ2：ビュー側のバインディングをシンプルに保つ

SwiftUI 側では @ObservedObject を使って ViewModel を監視し、amountInOtherCurrency を直接テキストにバインドします。TextField の入力は amountInBaseCurrency に対して双方向バインディングしますが、keyboardType を数値入力専用に設定し、入力ミスを減らします。

Swift

struct CurrencyConverterView: View {
    @StateObject private var viewModel = CurrencyConverterViewModel()

    var body: some View {
        VStack(spacing: 20) {
            TextField("金額（円）を入力", text: $viewModel.amountInBaseCurrency)
                .keyboardType(.decimalPad)
                .padding()
                .background(Color(.secondarySystemBackground))
                .cornerRadius(8)

            Divider()

            HStack {
                Text("換算結果:")
                Spacer()
                Text(viewModel.amountInOtherCurrency)
                    .foregroundColor(.blue)
                    .fontWeight(.semibold)
            }
            .padding()
        }
        .padding()
        .navigationTitle("Currency Converter")
    }
}
  • @StateObject にすることで、ビューのライフサイクルとともに ViewModel が保持され、ビューが再生成されても同じインスタンスが使われます。
  • TextField の入力は文字列のまま保持し、Double への変換は ViewModel の中で行うため、UI 側はシンプルです。
  • Divider と HStack のレイアウトで視覚的に見やすくしています。

ハマった点やエラー解決

1. 「ブランクウィンドウが表示される」原因は UI スレッド外での状態更新

最初の実装では assign(to:on:) が背景スレッドで実行され、@Published の更新がメインスレッド外で行われました。その結果、SwiftUI のレンダリングキューが更新されず、画面が白くなっていました。

解決策
receive(on: DispatchQueue.main) を追加し、sink で更新をメインスレッドに強制しました。これで UI が正しく再描画されます。

2. メモリリークと古い購読が残る

cancellables を self のプロパティに保持せず、一時的なローカル変数で store(in:) したため、ビューが破棄された後も購読が続き、バックグラウンドで更新が走り続けました。

解決策
@MainActor の属性を付与し、cancellables を ViewModel のインスタンスに結び付けることで、ビューが破棄されるときに自動的にキャンセルされます。

3. Double($0) ?? 0.0 が NaN を返すケース

空文字列や不正な数値が入力されたとき、Double の変換は nil になり 0.0 が代入されましたが、0.0 と NaN が混在すると String(format:) がクラッシュします。

解決策
map 内で guard !base.isNaN else { return "" } を入れ、NaN の場合は空文字列にフォールバックさせました。これにより、SwiftUI が空文字列を表示し、クラッシュは回避されます。

解決策の総括

  • 必ずメインスレッドで UI 更新：receive(on: DispatchQueue.main) を忘れずに。
  • 購読のライフサイクル管理：cancellables を ViewModel に保持し、@MainActor で保護。
  • 入力検証：NaN や nil を安全にハンドリングし、UI が崩れないようにする。

以上の修正を加えるだけで、amountInOtherCurrency をバインドした際にブランクウィンドウが表示される問題は解消され、リアルタイム為替変換が安定して動作します。

まとめ

本記事では、SwiftUI と Combine を利用した為替変換アプリで、amountInOtherCurrency をバインドした際に画面が真っ白になる現象の原因と対策を解説しました。

  • UI 更新は必ずメインスレッドで receive(on:) を使用。
  • 購読は ViewModel のライフサイクルに合わせて管理し、cancellables を適切に保持。
  • 入力データの安全性を確保し、NaN などの例外ケースをハンドリング。

これらを実装すれば、ブランクウィンドウに悩まされることなく、スムーズなリアルタイム変換が可能になります。次回は、実際の為替 API を組み込んだ非同期取得とキャッシュ戦略について解説する予定です。

参考資料