XcodeのCanvasとは — SwiftUIエディタとプレビューの操作

XcodeのCanvasとは？

Canvas はXcodeに組み込まれたプレビューエディタで、Xcode 11でSwiftUIとともに初めて導入されました。コードの横にあるエディタの右パネルに表示され、現在のSwiftUI Viewのライブプレビューを表示します。Canvasはリアルタイムで動作し、コードの変更は手動で再コンパイルしなくても即座にプレビューに反映されます。

アーキテクチャ的には、Canvas は個別のプロセス（Preview Provider Extension）であり、XcodeがCanvasを開くときに起動します。このプロセスはコンパイルされたPreviewProviderをロードし、Metalを介して結果をレンダリングし、エディタパネルに表示します。PreviewProviderが実装されていない場合、Canvasは “Preview paused — No preview provider found” というプレースホルダを表示します。

Canvasのインターフェース

Canvasのインターフェース には、デバイス選択、向き、カラースキーム、スケールのオプションを備えたツールバーが含まれています。Live Preview、Selectable、Embed In Diagramの各ボタンでインタラクションモードを切り替えます。Canvasは分割ビューをサポートしており、同じワークスペース内の異なるファイルに対して複数のCanvasを開くことができます。

インタラクティブCanvasの仕組み

Live Preview はCanvasの主要な機能であり、プレビューをインタラクティブにします。このモードでは、Canvasは個別のプロセスでViewをレンダリングし、ジェスチャ（タップ、スワイプ、スクロール）をSwiftUIランタイムに戻します。ユーザーはシミュレータを起動せずにボタンを押したり、テキストフィールドに入力したり、ナビゲーションをテストしたりできます。

SwiftUI はCanvas内のジェスチャを実際のデバイスと同じイベントシステムを介して処理します。違いはパフォーマンスにあります。CanvasはMetalを介してソフトウェアレンダリングを使用するのに対し、シミュレータはホストグラフィックスを使用します。つまり、Canvasでの複雑なアニメーションは遅く動作したり、視覚的に異なって見えたりする可能性があります。

Canvasの更新プロセス

Canvasの更新 は3つの段階で行われます。まず、Xcodeがファイルの変更を検出し、変更されたPreviewProviderのみをインクリメンタルにコンパイルします。次に、新しいバイナリモジュールがPreviewProviderExtensionプロセスにロードされます。最後に、SwiftUIがViewを再作成し、Metalを介してレンダリングします。サイクル全体は、Viewの複雑さに応じて0.5〜2秒かかります。

struct TappableButton: View {
    @State private var count = 0
    
    var body: some View {
        Button("Tapped \(count) times") {
            count += 1
        }
        .buttonStyle(.borderedProminent)
    }
}

struct TappableButton_Previews: PreviewProvider {
    static var previews: some View {
        TappableButton()
    }
}

インタラクティブ性：Live Previewを実行すると、Canvasのボタンは実際のボタンのように機能し、タップするたびにカウンタが増加し、押下アニメーションが表示されます。これにより、シミュレータなしでボタンのロジックをテストできます。

Canvasの設定

Canvasの基本設定 は、Editor → CanvasメニューまたはCanvasツールバーのボタンから利用できます。主なオプションには、デバイスの選択、向き、ダークテーマ、Dynamic Typeスケールが含まれます。永続的な設定には、コード内でPreviewProvider修飾子を使用します。

詳細設定 には以下が含まれます：Auto Activate Preview — SwiftUIファイルを開くときの自動Canvas有効化；Live Preview — ジェスチャモード；Draw Live Edges — ビューの境界を表示；Show Preview Sizes — プレビュー領域のサイズ。Xcodeはこれらの設定をワークスペース/プロジェクトファイルにポータブルに保存します。

PreviewProviderによる設定

プログラムによる設定 により、Canvasをより正確に制御できます。プレビューに適用された修飾子はツールバーの設定を上書きし、コードに保存されるため、チームメンバー全員がgitを介して確認できます。

struct SettingsView_Previews: PreviewProvider {
    static var previews: some View {
        SettingsView()
            .previewDevice("iPhone 16 Pro")
            .previewLayout(.device)
            .preferredColorScheme(.dark)
            .dynamicTypeSize(.xxxLarge)
            .previewDisplayName("Dark + XL Text")
    }
}

previewLayout を .device とともに使用するとデバイスの全画面が表示され、.sizeThatFits を使用するとコンテンツに合わせたサイズのコンパクトなプレビューが表示されます。ウィジェットや小さなコンポーネントには .sizeThatFits を使用してください。エディタのスペースを節約できます。

Canvasの使用例

例1：適応性のテスト。複数のデバイスとカラースキームでForEachを使用して、すべての画面でインターフェースが適切に表示されることを確認します。Canvasはすべてのプレビューを同時に更新するため、シミュレータを起動する前にレイアウトの問題を発見できます。

例2：データを使ったプレビュー。動的コンテンツ（リスト、プロフィール、カード）を表示するViewの場合は、プレビュー内で異なるデータを持つ複数のインスタンスを作成します。これはシミュレータで画面を切り替えてデータを入力するよりも高速です。

異なる状態でのプレビュー

プレビューグループ はGroupやForEachを介して、1つのパネルにすべてのコンポーネント状態を表示できます。リストの場合、これは特に便利です。空のリスト、ローディング、エラー、データが入ったリストがすべて同時に表示されます。

struct LoadingStateView: View {
    let state: LoadingState
    
    var body: some View {
        switch state {
        case .loading:
            ProgressView()
        case .loaded(let items):
            List(items, id: \.self) { Text($0) }
        case .error(let message):
            Text(message).foregroundColor(.red)
        }
    }
}

struct LoadingStateView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LoadingStateView(state: .loading)
                .previewDisplayName("Loading")
            LoadingStateView(state: .loaded(["Item 1", "Item 2"]))
                .previewDisplayName("Loaded")
            LoadingStateView(state: .error("Failed to load"))
                .previewDisplayName("Error")
        }
    }
}

Canvas vs シミュレータ — 比較

Canvasとシミュレータ は互いに補完し合うものであり、置き換えるものではありません。Canvasはレイアウト時の迅速な反復に最適で、コードを編集すると即座にフィードバックが得られます。シミュレータは最終確認に必要です。実際のパフォーマンス、カスタムジェスチャ、システムアラート、ハードウェア機能（カメラ、センサー）との統合を確認します。

WWDC 2024 によると、AppleはCanvasを初期開発段階のツール、シミュレータを統合テスト用のツールとして位置づけています。UI開発時間の60％をCanvasで、40％をシミュレータまたは実機でのテストに充てることが推奨されています。

推奨：Canvasでデザインし、シミュレータでテストします。ボタンやナビゲーションのジェスチャロジックにはLive Previewを使用しますが、アニメーション、ネットワークリクエスト、ハードウェア機能の最終テストはシミュレータまたは実機で行ってください。

Canvasを使うコツ

コツ1：選択モードを使用する。選択モード（カーソルアイコン）では、プレビューの任意の要素をクリックして、インスペクタでその階層、修飾子、フレームを確認できます。これはレイアウトのデバッグに便利で、print文を使わずにパディング、オフセット、要素サイズを即座に確認できます。

コツ2：Embed In Diagram。Canvasは要素をグループ化できます。2つ以上のViewを選択し、Embed In Diagramをクリックすると、CanvasがVStack/HStack/ZStackを作成し、コードを自動的に再構築します。これにより、手動で括弧を入力せずに複雑な階層を高速に作成できます。

コツ3：Canvasプレビューキャッシュをクリアする。Canvasの更新が停止した場合は、Product → Preview Cacheをクリアしてください。XcodeはキャッシュされたPreviewProviderバイナリを削除し、ゼロから再構築します。これでCanvasのフリーズ問題の90％が解決します。

Canvasの速度最適化

Canvasが遅い 原因は通常、プレビューの数が多すぎることです。複雑なViewの場合は、6〜8個のグループではなく、1つのプレビューのみを使用してください。ジェスチャのないViewではLive Previewをオフにしてください。静的モードの方がレンダリングが高速です。PreviewProviderが実際のネットワークリクエストではなくモックを使用していることを確認してください。

// Quick debug: minimal preview
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // compact mode
    }
}

previewLayout(.sizeThatFits) はCanvasの最速モードで、デバイスの枠なしにViewのコンテンツのみをレンダリングします。日常的なレイアウト作業ではこれを使用し、最終確認でのみ .device を有効にしてください。