swiftui-patterns

SwiftUI Patterns

Appleプラットフォーム上で宣言的でパフォーマンスの高いユーザーインターフェースを構築するためのモダンなSwiftUIパターン。Observationフレームワーク、ビュー構成、型安全なナビゲーション、パフォーマンス最適化をカバーします。

アクティベーションタイミング

• SwiftUIビューの構築と状態管理（@State、@Observable、@Binding）
• NavigationStackを使用したナビゲーションフローの設計
• ビューモデルとデータフローの構造化
• リストや複雑なレイアウトのレンダリングパフォーマンス最適化
• SwiftUIにおける環境値と依存性注入の利用

状態管理

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

状況に最も適したシンプルなラッパーを選んでください：

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

@Observable ViewModel

ObservableObjectではなく@Observableを使用してください。これはプロパティレベルの変更を追跡するため、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に置き換えてください：

// 注入
ContentView()
    .environment(authManager)

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

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

ビュー構成

サブビューの抽出による無効化の制限

ビューを小さく焦点を絞った構造体に分割してください。状態が変化しても、その状態を読み取るサブビューのみが再レンダリングされます：

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)
    }
}

パフォーマンス

大規模コレクションにはLazyコンテナを使用する

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 {
        // 複雑なチャートレンダリング
    }
}

プレビュー

高速なイテレーションのために、インラインモックデータを使用した#Previewマクロを使用してください：

#Preview("空の状態") {
    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))
}

#Preview("データ読み込み済み") {
    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))
}

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

• 新しいコードでObservableObject / @Published / @StateObject / @EnvironmentObjectを使用すること — @Observableに移行してください
• 非同期処理を直接bodyやinitに記述すること — .task {}または明示的なロードメソッドを使用してください
• データを所有していない子ビュー内でビューモデルを@Stateとして作成すること — 代わりに親から渡してください
• 型消去のためにAnyViewを使用すること — 条件付きビューには@ViewBuilderまたはGroupを優先してください
• actorとの間でデータを受け渡す際にSendable要件を無視すること

参考文献

アクターベースの永続化パターンについては、スキル: swift-actor-persistence を参照してください。 プロトコルベースのDIとSwift Testingによるテストについては、スキル: swift-protocol-di-testing を参照してください。