SwiftUI パターン

Apple プラットフォーム向けの最新 SwiftUI パターン。宣言的で高性能なユーザーインターフェースの構築に対応しています。Observation フレームワーク、ビュー合成、型安全なナビゲーション、パフォーマンス最適化をカバーしています。

活性化するとき

• SwiftUI ビューの構築とステート管理時（@State、@Observable、@Binding）
• NavigationStack でナビゲーションフローを設計するとき
• ビューモデルとデータフローを構築するとき
• リストと複雑なレイアウトのレンダリングパフォーマンスを最適化するとき
• SwiftUI で環境値と依存注入を使用するとき

ステート管理

プロパティラッパーの選択

最適でシンプルなラッパーを選択してください：

ラッパー	ユースケース
@State	ビューローカルな値型（トグル、フォーム入力、Sheet 表示）
@Binding	親ビューの @State への双方向参照
@Observable クラス + @State	複数のプロパティを持つ独自モデル
@Observable クラス（ラッパーなし）	親ビューから渡された読み取り専用参照
@Bindable	@Observable プロパティへの双方向バインディング
@Environment	.environment() で注入された共有依存項目

@Observable ViewModel

@Observable（ObservableObject ではなく）を使用します。プロパティレベルの変更を追跡するため、SwiftUI は変更されたプロパティを読み取ったビューのみを再レンダリングします：

@Observable
final class ItemListViewModel {
    private(set) var items: [Item] = []
    private(set) var isLoading = false
    var searchText = ""

    private let repository: any ItemRepository

    init(repository: any ItemRepository = DefaultItemRepository()) {
        self.repository = repository
    }

    func load() async {
        isLoading = true
        defer { isLoading = false }
        items = (try? await repository.fetchAll()) ?? []
    }
}

ViewModel を使用するビュー

struct ItemListView: View {
    @State private var viewModel: ItemListViewModel

    init(viewModel: ItemListViewModel = ItemListViewModel()) {
        _viewModel = State(initialValue: viewModel)
    }

    var body: some View {
        List(viewModel.items) { item in
            ItemRow(item: item)
        }
        .searchable(text: $viewModel.searchText)
        .overlay { if viewModel.isLoading { ProgressView() } }
        .task { await viewModel.load() }
    }
}

環境注入

@EnvironmentObject を @Environment で置き換えます：

// Inject
ContentView()
    .environment(authManager)

// Consume
struct ProfileView: View {
    @Environment(AuthManager.self) private var auth

    var body: some View {
        Text(auth.currentUser?.name ?? "Guest")
    }
}

ビュー合成

無効化を制限するためのサブビュー抽出

ビューを小規模で焦点を絞った構造体に分割します。ステートが変更されたとき、そのステートを読み取ったサブビューのみが再レンダリングされます：

struct OrderView: View {
    @State private var viewModel = OrderViewModel()

    var body: some View {
        VStack {
            OrderHeader(title: viewModel.title)
            OrderItemList(items: viewModel.items)
            OrderTotal(total: viewModel.total)
        }
    }
}

再利用可能なスタイリング用 ViewModifier

struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.regularMaterial)
            .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}

extension View {
    func cardStyle() -> some View {
        modifier(CardModifier())
    }
}

ナビゲーション

型安全な NavigationStack

NavigationStack と NavigationPath を使用してプログラムによる型安全なルーティングを実装します：

@Observable
final class Router {
    var path = NavigationPath()

    func navigate(to destination: Destination) {
        path.append(destination)
    }

    func popToRoot() {
        path = NavigationPath()
    }
}

enum Destination: Hashable {
    case detail(Item.ID)
    case settings
    case profile(User.ID)
}

struct RootView: View {
    @State private var router = Router()

    var body: some View {
        NavigationStack(path: $router.path) {
            HomeView()
                .navigationDestination(for: Destination.self) { dest in
                    switch dest {
                    case .detail(let id): ItemDetailView(itemID: id)
                    case .settings: SettingsView()
                    case .profile(let id): ProfileView(userID: id)
                    }
                }
        }
        .environment(router)
    }
}

パフォーマンス

大規模コレクション用の遅延コンテナ

LazyVStack と LazyHStack はビューが表示されるときのみ生成されます：

ScrollView {
    LazyVStack(spacing: 8) {
        ForEach(items) { item in
            ItemRow(item: item)
        }
    }
}

安定した識別子

ForEach で常に安定した一意な ID を使用します。配列インデックスの使用は避けてください：

// Identifiable 準拠または明示的な id を使用
ForEach(items, id: \.stableID) { item in
    ItemRow(item: item)
}

body での高コスト操作を避ける

• body 内で I/O、ネットワーク呼び出し、高コスト計算を実行しないでください
• .task {} で非同期処理を処理します。ビューが消えるときに自動的にキャンセルされます
• スクロールビューで .sensoryFeedback() と .geometryGroup() の使用は慎重に行ってください
• リスト内での .shadow()、.blur()、.mask() の使用を最小限にしてください。画面外レンダリングをトリガーします

Equatable に準拠

body 計算が高コストなビューについて、Equatable に準拠して不要な再レンダリングをスキップします：

struct ExpensiveChartView: View, Equatable {
    let dataPoints: [DataPoint] // DataPoint は Equatable に準拠する必要があります

    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.dataPoints == rhs.dataPoints
    }

    var body: some View {
        // Complex chart rendering
    }
}

プレビュー

#Preview マクロとインラインモックデータを使用して高速反復を行います：

#Preview("Empty state") {
    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))
}

#Preview("Loaded") {
    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))
}

避けるべきアンチパターン

• 新しいコードで ObservableObject / @Published / @StateObject / @EnvironmentObject を使用しないでください。@Observable に移行してください
• 非同期処理を body や init に直接配置しないでください。.task {} または明示的な読み込みメソッドを使用してください
• データを所有しないサブビューでビューモデルを @State として作成しないでください。親ビューから渡してください
• 型を消去するために AnyView を使用しないでください。条件付きビューについては @ViewBuilder または Group を優先してください
• Actor にデータを渡す際、または Actor からデータを受け取る際に Sendable 要件を無視しないでください

参考

スキル swift-actor-persistence を参照して、Actor ベースの永続化パターンを確認してください。 スキル swift-protocol-di-testing を参照して、プロトコルベースの DI と Swift Testing を使用したテストを確認してください。