【ITニュース解説】How to populate your #Previews in SwiftUI

SwiftUIの#Previewマクロは、XcodeでSwiftUIビューを簡単にプレビューできる便利な機能だ。基本的な使い方は、#Previewブロックの中にプレビューしたいビューを記述するだけ。例えば、BookViewというビューをプレビューしたい場合は以下のようになる。

Copy
1#Preview {
2    BookView()
3}

さらに、プレビュー内で簡単なコードを書くことも可能だ。例えば、BookViewに渡す書籍データの配列を定義してプレビューできる。

Copy
1#Preview {
2    let books = ["Eros&Agape, by Anders Nygren", "Commentary to Galatians, by Martin Luther"]
3
4    BookView(books: books)
5}

しかし、プレビューの初期化に必要なデータをキャッシュしたい場合や、非同期処理でデータを取得する必要がある場合はどうすればいいだろうか。

当初、以下のような方法が試された。

Copy
1#Preview {
2    @Previewable @State var books: [Book]  = []
3
4    if books.isEmpty {
5        ProgressView()
6          .task {
7             books = await myAsyncFunc()
8          }
9    } else {
10        BookView(books: books)
11    }
12}

この方法は、一時しのぎの手段であり、キャッシュ機能も提供していなかった。そこで、よりAppleが推奨する方法としてPreviewModifierを使う方法がある。

PreviewModifierは、プレビューの表示をカスタマイズするためのプロトコルだ。これを利用することで、プレビューに必要なデータを非同期で取得したり、キャッシュしたりすることができる。PreviewModifierを使うには、まずこのプロトコルに準拠した構造体を定義する。

Copy
1struct BookProvider: PreviewModifier {
2    static func makeSharedContext() async -> [Book] {
3        return await myAsyncBookGenerator()
4    }
5
6    func body(content: Content, context: [Book]) -> some View {
7        BookView(books: context)
8    }
9}

makeSharedContextは、プレビューに必要なデータを生成する静的関数だ。ここでは、非同期関数myAsyncBookGenerator()を呼び出して書籍データの配列を取得している。この関数は一度だけ実行され、結果がキャッシュされる。もしデータの生成が不要な場合は、この関数を省略することもできる。デフォルトではVoid型が使われる。

body関数は、プレビューの内容をカスタマイズする関数だ。引数として、content（プレビューされるビュー）とcontext（makeSharedContextで生成されたデータ）を受け取る。ここでは、contextとして受け取った書籍データの配列をBookViewに渡して、新しいビューを返している。contentは型消去されたViewなので、直接利用することは難しい場合もある。

PreviewModifierを適用するには、#Previewマクロでtraitsパラメータを使用する。

Copy
1#Preview(traits: .modifier(BookProvider())) {
2    BookView()
3}

このように記述することで、BookProviderがBookViewのプレビューに適用され、makeSharedContextで生成された書籍データがBookViewに渡される。

PreviewModifierを使うことで、プレビューに必要なデータの非同期取得やキャッシュが容易になる。特に、APIからデータを取得して表示するような複雑なビューのプレビューを作成する際に役立つだろう。

注意点として、contentの型が型消去されているため、body関数内で直接利用することが難しい場合がある。そのため、プレビューするビューを完全に置き換えるような実装になることが多い。

この方法を使えば、より高度なプレビューのカスタマイズが可能になり、開発効率の向上に繋がるだろう。SwiftUIのプレビュー機能を使いこなして、より快適な開発ライフを送ろう。