Swift で簡単多言語プレビュー Extension

はじめに

Swift UI 最高ですよね！

非常に直観的で、コードとUIが直結しています

Swift　UI　での開発時、多言語（と言っても英語と日本語だけだけど）でプレビューが表示したくなったので、簡単に書けるようにしました

通常のプレビュー

こんな感じのコードのとき

import SwiftUI

struct ExampleView: View {
    var body: some View {
        Text("hello")
            .font(.title)
    }
}

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleView()
    }
}

以下のように言語設定していたとして

• Localizable.strings (English)

  "hello" = "Hello";

• Localizable.strings (Japanese)

  "hello" = "こんにちは";

プレビューは以下のようになります

これだと英語のときは分かっても、日本語のときどうなるか分かりません

ちゃんと .strings に設定しているか、折り返しなどでおかしくなっていないか、など心配です

Extension

毎回言語を指定すると大変なので、以下のような Extension を用意します

import SwiftUI

extension View {
    func en() -> some View {
        self.environment(\.locale, .init(identifier: "en"))
    }

    func ja() -> some View {
        self.environment(\.locale, .init(identifier: "ja"))
    }
}

そして、プレビューを以下のように変更します

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleView().en()
        ExampleView().ja()
    }
}

そうするとプレビューで各言語版が縦に並んで表示されます

モジュール化

言語が増えてきたりすると、毎回 .en() と .ja() を書くのも面倒だし漏れそうです

というわけで、以下のようにモジュール化します

import SwiftUI

struct MultiLanguagePreview<Content>: View where Content: View {
    var content: () -> Content

    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }

    var body: some View {
        SwiftUI.Group {
            VStack(content: self.content).en()
            VStack(content: self.content).ja()
        }
    }
}

struct MultiLanguagePreview_Previews: PreviewProvider {
    static var previews: some View {
        MultiLanguagePreview {
            Text("hello")
        }
    }
}

プレビューを以下のように変えれば、それだけで多言語プレビューができるようになります

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        MultiLanguagePreview {
            ExampleView()
        }
    }
}

まとめ

Extension を使うことで、プレビューの記述をスッキリさせることができました

今後も余裕のあるときに便利な Extension を紹介していきたいと思います