swift_swiftui

SwiftUI

このスキルでは、宣言型ユーザーインターフェースを構築するための SwiftUI フレームワークの概念を扱います。

概要

SwiftUI は、リアクティブで状態駆動型のアプローチを用いて、すべての Apple プラットフォーム向けのユーザーインターフェースを構築する Apple の最新の宣言型フレームワークです。

参照資料

• プロパティラッパー - @State、@Binding、@ObservedObject、@StateObject、@Environment

クイックリファレンス

状態管理の判断ツリー

Need local mutable state?
├── YES → Is it a value type?
│   ├── YES → Use @State
│   └── NO → Use @StateObject
└── NO → Shared from parent?
    ├── YES → Is it value type?
    │   ├── YES → Use @Binding
    │   └── NO → Use @ObservedObject
    └── NO → Use @Environment

プロパティラッパー

ラッパー	データを所有	データ型	用途
@State	はい	値型	ローカル UI 状態
@Binding	いいえ	値型	親との共有状態
@ObservedObject	いいえ	参照型	注入された依存関係
@StateObject	はい	参照型	所有するビューモデル
@Environment	いいえ	任意	共有リソース

一般的な使用パターン

// Local state
struct CounterView: View {
    @State private var count = 0
    
    var body: some View {
        Button("Count: \(count)") { count += 1 }
    }
}

// Shared state (parent to child)
struct ParentView: View {
    @State private var isOn = false
    
    var body: some View {
        ChildView(isOn: $isOn)
    }
}

struct ChildView: View {
    @Binding var isOn: Bool
    
    var body: some View {
        Toggle("Enable", isOn: $isOn)
    }
}

// Observable object
class ViewModel: ObservableObject {
    @Published var items: [Item] = []
}

struct ContentView: View {
    @StateObject private var viewModel = ViewModel()
    
    var body: some View {
        List(viewModel.items) { item in
            Text(item.name)
        }
    }
}

// Environment values
struct EnvironmentView: View {
    @Environment(\.colorScheme) var colorScheme
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        Text(colorScheme == .dark ? "Dark" : "Light")
    }
}

ベストプラクティス

1. ローカル UI 状態には @State を使用する - トグル、テキストフィールド、カウンター
2. 共有する場合は状態を上位に引き上げる - 信頼できる唯一の情報源
3. 所有するビューモデルには @StateObject を使用する - ビューが再作成されても維持される
4. 子ビューには @Binding を渡す - 双方向のデータフロー
5. @State は最小限にする - UI に必要なものだけを保存する
6. システム値には @Environment を使用する - 配色、ロケールなど
7. メインスレッドでアクセスする - すべてのプロパティラッパーには @MainActor が必要です
8. アンダースコアを付けて初期化する - _count = State(initialValue:)

よくある落とし穴

落とし穴	解決策
@State を直接初期化する	_property = State(initialValue:) を使用する
init で @ObservedObject を作成する	代わりに @StateObject を使用する
バックグラウンドスレッドで変更する	メインキューにディスパッチする
Binding の代わりに @State を渡す	Binding には $property を使用する

詳細情報

包括的な SwiftUI ドキュメントについては、https://swiftzilla.dev をご覧ください。