Swiftui Patterns

by affaan-mef648e01899bNo license275K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 3 days ago

@Observableを使用した状態管理、ビュー合成、ナビゲーション、パフォーマンス最適化、モダンなiOS/macOS UIのベストプラクティスを備えたSwiftUIアーキテクチャパターン。

Instructions onlySoftware Development

AI-generated overview

Reference guidance for modern SwiftUI architecture: state management, view composition, navigation and performance.

What it does: Provides SwiftUI architecture patterns for Apple platforms, covering state management with @State, @Binding, @Observable and @Environment, view composition, type-safe NavigationStack routing, performance optimization and previews. It supplies comparison tables, code samples and a list of anti-patterns to avoid. It produces guidance and example code rather than runnable artifacts.
When to use it: Use it when building or refactoring SwiftUI views, designing navigation flows, structuring view models and data flow, or optimizing list and layout rendering performance. It also fits questions about environment values and dependency injection in SwiftUI.
Requirements: No scripts or tooling are included; it is instructions only. Applying the examples assumes an Apple-platform SwiftUI project and Xcode.

SwiftUI パターン

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

起動条件

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

状態管理

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

最も適したシンプルなラッパーを選択する：

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

@Observable ViewModel

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

swift

@Observablefinal 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()) ?? []    }}

@Observablefinal 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を使用するビュー

swift

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

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 を使用する：

swift

// InjectContentView()    .environment(authManager)
// Consumestruct ProfileView: View {    @Environment(AuthManager.self) private var auth
    var body: some View {        Text(auth.currentUser?.name ?? "Guest")    }}

// InjectContentView()    .environment(authManager)
// Consumestruct ProfileView: View {    @Environment(AuthManager.self) private var auth
    var body: some View {        Text(auth.currentUser?.name ?? "Guest")    }}

ビュー合成

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

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

swift

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

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

swift

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

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

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

@Observablefinal 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 はビューが表示される時のみ作成する：

swift

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

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

安定した識別子

ForEach では常に安定した一意のIDを使用する——配列インデックスは避ける：

swift

// Use Identifiable conformance or explicit idForEach(items, id: \.stableID) { item in    ItemRow(item: item)}

// Use Identifiable conformance or explicit idForEach(items, id: \.stableID) { item in    ItemRow(item: item)}

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

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

Equatable に準拠する

bodyの計算が高コストなビューには、不要な再レンダリングをスキップするために Equatable に準拠する：

swift

struct ExpensiveChartView: View, Equatable {    let dataPoints: [DataPoint] // DataPoint must conform to Equatable
    static func == (lhs: Self, rhs: Self) -> Bool {        lhs.dataPoints == rhs.dataPoints    }
    var body: some View {        // Complex chart rendering    }}

struct ExpensiveChartView: View, Equatable {    let dataPoints: [DataPoint] // DataPoint must conform to Equatable
    static func == (lhs: Self, rhs: Self) -> Bool {        lhs.dataPoints == rhs.dataPoints    }
    var body: some View {        // Complex chart rendering    }}

プレビュー

インラインのモックデータで #Preview マクロを使用して素早い反復を行う：

swift

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

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

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

新しいコードで ObservableObject / @Published / @StateObject / @EnvironmentObject を使用する——@Observable に移行する
body や init 内に直接非同期処理を置く——.task {} または明示的なロードメソッドを使用する
データを所有しないサブビューでViewModelを @State として作成する——代わりに親ビューから渡す
AnyView による型消去を使用する——条件付きビューには @ViewBuilder または Group を優先する
ActorとのデータのやりとりにおいてSendable要件を無視する

参照

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

Source and attribution

Source:affaan-m/eccindocs/ja-JP/skills/swiftui-patternsat commitef648e0

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from affaan-m/ecc

Vue Patterns

affaan-m

Reference guide for Vue 3 Composition API, component architecture, Pinia state, Vue Router, and Nuxt SSR patterns.

Software Development275Kupdated 3 days ago

Uncloud

affaan-m

Reference guide for managing Uncloud clusters with the uc CLI: deploying services, Caddy ingress, ports, scaling and logs.

DevOps & Cloud275Kupdated 3 days ago

Team Agent Orchestration

affaan-m

Coordinates multiple AI agents as a team using work items, Kanban states, branch isolation, and merge gates.

AI & Agents275Kupdated 3 days ago

Tasteforge Video

affaan-m

Use for file-driven multimodal image, video, and 3D-asset discovery; taste interviews; distill or apply workflows; style-pack validation; editable EDL/FCPXML export; provenance audits; and offline planning that must fail closed before provider generation.

Awaiting classification275Kupdated 3 days ago

Taste

affaan-m

Defines an angelcore / cloud-trance / hyperpop visual direction for music videos and short-form edits, with mood, editing grammar and a beat-mapped shot plan.

Design & Creative275Kupdated 3 days ago

Social Publisher

affaan-m

Schedules and publishes social media posts across 13 platforms through the SocialClaw workspace API.

Marketing & Sales275Kupdated 3 days ago

Swiftui Patterns

SwiftUI パターン

起動条件

状態管理

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

@Observable ViewModel

ViewModelを使用するビュー

環境への注入

ビュー合成

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

再利用可能なスタイルのための ViewModifier

ナビゲーション

型安全な NavigationStack

パフォーマンス

大規模なコレクションにレイジーコンテナを使用する

安定した識別子

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

Equatable に準拠する

プレビュー

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

参照

Source and attribution

More from affaan-m/ecc

Vue Patterns

Uncloud

Team Agent Orchestration

Tasteforge Video

Taste

Social Publisher

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices