SwiftUIで言語とカラースキームを同時にプレビューするいい感じの方法

前回の記事では、SwiftUIでダークモードとライトモードを効率的にプレビューする方法を紹介しました。
今回は、さらに一歩進んで、言語設定も含めたプレビュー方法を解説します。

PreviewHelperの実装

まず、言語とカラースキームの両方を管理するPreviewHelperクラスを実装します。

class PreviewHelper {
    enum LanguageCode: String, CaseIterable {
        case en, ja
        
        var locale: Locale {
            Locale(identifier: self.rawValue)
        }
    }

    static func patterns<Content: View>(@ViewBuilder content: @escaping (LanguageCode, ColorScheme) -> Content) -> some View {
        ForEach(LanguageCode.allCases, id: \.self) { languageCode in
            ForEach(ColorScheme.allCases, id: \.self) { colorScheme in
                content(languageCode, colorScheme)
                    .environment(\.locale, languageCode.locale)
                    .preferredColorScheme(colorScheme)
                    .previewDisplayName("\(languageCode) - \(colorScheme)")
            }
        }
    }
}

このヘルパークラスの特徴は以下の通りです：

1. LanguageCode enumを定義し、サポートする言語（この場合は英語と日本語）を指定します。
2. patterns メソッドは、言語とカラースキームの全ての組み合わせに対してビューを生成します。
3. 各プレビューに適切な言語設定（environment(\.locale, ...)）とカラースキーム（preferredColorScheme(_:)）を適用します。
4. プレビュー名には言語コードとカラースキームを含めます。

PreviewHelperの使用方法

この新しいPreviewHelperを使用すると、プレビューの設定が非常に簡単になります。以下は使用例です：

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        PreviewHelper.patterns { languageCode, colorScheme in
            ContentView()
        }
    }
}

この設定により、以下の4つのプレビューが自動的に生成されます：

1. 英語 - ライトモード
2. 英語 - ダークモード
3. 日本語 - ライトモード
4. 日本語 - ダークモード

利点

1. 簡潔性: プレビューコードが大幅に簡略化されます。
2. 網羅性: 言語とカラースキームの全ての組み合わせを確実にカバーできます。
3. 拡張性: 新しい言語のサポートを追加する場合、LanguageCode enumに追加するだけで済みます。
4. 一貫性: プロジェクト全体で統一されたプレビュー方法を使用できます。

実践的な使用例

実際のアプリケーションでは、ローカライズされたテキストを使用することが多いでしょう。以下は、LocalizedStringKeyを使用した例です：

struct WelcomeView: View {
    var body: some View {
        VStack {
            Text("welcome_message")
            Text("app_description")
        }
    }
}

struct WelcomeView_Previews: PreviewProvider {
    static var previews: some View {
        PreviewHelper.patterns { _, _ in
            WelcomeView()
        }
    }
}

この方法を使用することで、異なる言語設定とカラースキームでのUIの見た目を簡単に確認できます。

まとめ

この高度なプレビュー方法を使用することで、SwiftUIアプリケーションの国際化対応とダークモード対応を同時に効率的にテストできます。
開発初期段階からこの方法を採用することで、潜在的な問題を早期に発見し、より堅牢なアプリケーションを開発することができます。