👨

SwiftUI #Preview をアプリ内で閲覧可能にするフレームワーク

2025/03/21に公開

SwiftUIのPreviewは便利だが、クラッシュが発生する場合やより詳細にプログラムの動作を確認したい場合にはSimualtorや実機で実行を行い、ブレークポイントを使用した調査を行いたい場合もある。
しかし #Preview(PreviewProvider)はそのままではアプリでは実行することができない。

アプリ内にそれを表示するための追加の処理が必要となる。
eure/swift-storybookはそのフローを簡単にする。
swift-storybookの持つ機能の一つとして、アプリケーションが起動したタイミングで#Preview macroの定義を動的に抽出し、それを開くためのリンクのリストを構築するというもの。
UIコンポーネントの一覧を確認するという意味でも有効な手段である。

 セットアップSwiftUIのテンプレートでプロジェクトを作成
パッケージをインストール
https://github.com/eure/swift-storybook.git


Storybook() コンポーネントをルートに表示するように
import StorybookKit
import SwiftUI

struct ContentView: View {
  var body: some View {
    Storybook()
  }
}
サンプルの#Previewの追加
#Preview("Circle") {
  Circle()
    .fill(.purple)
    .frame(width: 100, height: 100)
}

 実行

セットアップ

実行

Discussion