SwiftUI @Observable vs @State: 2026年にどちらをいつ使うか

SwiftUIにおける@Observableと@Stateの違いを理解し、iOSアプリに最適な状態管理ツールを選択しましょう。

iOS開発者向けSwiftUIにおける@Observableと@Stateの比較

状態管理は、パフォーマンスの高いSwiftUIアプリの基盤を成しています。iOS 17以降、@Observableマクロはリアクティブモデルの作成方法を一変させ、@Stateはビューのローカル状態に欠かせない存在であり続けています。それぞれのツールをいつ使うかを理解することで、不要な再レンダリングを避け、滑らかで応答性の高いアプリを構築できます。

この記事で扱う内容

本記事では、@Observableと@Stateの内部メカニズム、根本的な違い、そして文脈に応じて適切なツールを選ぶための明確な指針を解説します。iOS 27の@Stateマクロ変更(iOS 17にバックポート済み)も含みます。

@Stateの基本

@Stateは、SwiftUIにおける最もシンプルな状態管理の形式です。このプロパティラッパーは、それを宣言したビューだけが所有する値に対して、永続的なストレージを生成します。

CounterView.swiftswift
struct CounterView: View {
    // @State creates storage managed by SwiftUI
    @State private var count = 0

    var body: some View {
        VStack(spacing: 20) {
            // The view updates when count changes
            Text("Counter: (count)")
                .font(.largeTitle)

            HStack(spacing: 16) {
                Button("- 1") {
                    count -= 1
                }

                Button("+ 1") {
                    count += 1
                }
            }
            .buttonStyle(.borderedProminent)
        }
    }
}

countへの変更があるたびにビューの再レンダリングが発生します。SwiftUIはこの値のライフサイクルを自動的に管理し、bodyの再構築をまたいで保持します。

@Stateの主な特徴

@Stateには、最適な使い方を定義づけるいくつかの特徴があります。

StateCharacteristics.swiftswift
struct FormView: View {
    // Simple local state with value types
    @State private var username = ""
    @State private var isEnabled = true
    @State private var selectedIndex = 0

    // Complex value types supported
    @State private var configuration = FormConfiguration()

    var body: some View {
        Form {
            TextField("Username", text: $username)

            Toggle("Enabled", isOn: $isEnabled)

            Picker("Option", selection: $selectedIndex) {
                Text("Option A").tag(0)
                Text("Option B").tag(1)
                Text("Option C").tag(2)
            }
        }
    }
}

// Structs work perfectly with @State
struct FormConfiguration: Equatable {
    var theme: Theme = .light
    var fontSize: CGFloat = 16
    var showNotifications: Bool = true
}

enum Theme {
    case light, dark, system
}

重要なポイントは、@Stateは値型(struct、enum、プリミティブ型)で動作することです。参照型(クラス)には別のツールが必要です。

@Observableマクロの解説

iOS 17で導入された@Observableは、任意のクラスをリアクティブなデータソースに変換します。従来のObservableObjectプロトコルと異なり、このマクロはきめ細かい観測を提供します。ビューが実際に読み取ったプロパティだけが再レンダリングを引き起こすのです。Observationフレームワークのドキュメントに完全なAPIリファレンスがあります。

UserModel.swiftswift
import Observation

// @Observable transforms the class into a reactive source
@Observable
class UserModel {
    var name: String = ""
    var email: String = ""
    var avatarURL: URL?
    var preferences = UserPreferences()

    // Computed properties work too
    var isValid: Bool {
        !name.isEmpty && email.contains("@")
    }
}

struct UserPreferences {
    var newsletter: Bool = false
    var notifications: Bool = true
    var theme: Theme = .system
}

魔法はコンパイル時に起こります。マクロが各プロパティに必要なトラッキングコードを自動生成するのです。

きめ細かな観測の実例

旧来のObservableObjectとの大きな違いは、トラッキングの粒度にあります。

GranularObservation.swiftswift
@Observable
class ProfileModel {
    var name: String = ""
    var bio: String = ""
    var followerCount: Int = 0
    var posts: [Post] = []
}

struct ProfileHeaderView: View {
    let model: ProfileModel

    var body: some View {
        VStack {
            // This view only re-renders if name or bio change
            Text(model.name)
                .font(.title)
            Text(model.bio)
                .foregroundStyle(.secondary)
        }
    }
}

struct FollowerCountView: View {
    let model: ProfileModel

    var body: some View {
        // This view only re-renders if followerCount changes
        HStack {
            Image(systemName: "person.2")
            Text("(model.followerCount) followers")
        }
    }
}

struct ProfileScreen: View {
    @State private var model = ProfileModel()

    var body: some View {
        VStack {
            // Each subview tracks only its dependencies
            ProfileHeaderView(model: model)
            FollowerCountView(model: model)

            Button("Simulate new follower") {
                // Only re-renders FollowerCountView
                model.followerCount += 1
            }
        }
    }
}
自動トラッキング

SwiftUIは各ビューのbodyを解析して、どのプロパティが読み取られているかを判断します。読み取られたプロパティだけが、変更時に再レンダリングを発生させます。

直接比較: @Observable vs @State

これらのツールの選択はいくつかの要因に依存します。以下は構造化された比較です。

ComparisonExample.swiftswift
// Scenario 1: Temporary UI state -> @State
struct ToggleExample: View {
    @State private var isExpanded = false  // @State appropriate

    var body: some View {
        VStack {
            Button(isExpanded ? "Collapse" : "Expand") {
                withAnimation {
                    isExpanded.toggle()
                }
            }

            if isExpanded {
                Text("Detailed content...")
            }
        }
    }
}

// Scenario 2: Shared business data -> @Observable
@Observable
class CartModel {  // @Observable appropriate
    var items: [CartItem] = []
    var promoCode: String?

    var total: Decimal {
        items.reduce(0) { $0 + $1.price * Decimal($1.quantity) }
    }

    var itemCount: Int {
        items.reduce(0) { $0 + $1.quantity }
    }

    func addItem(_ item: CartItem) {
        if let index = items.firstIndex(where: { $0.id == item.id }) {
            items[index].quantity += 1
        } else {
            items.append(item)
        }
    }

    func removeItem(_ item: CartItem) {
        items.removeAll { $0.id == item.id }
    }
}

struct CartItem: Identifiable, Equatable {
    let id: UUID
    let name: String
    let price: Decimal
    var quantity: Int
}

ユースケース一覧表

基準@State@Observable
データ型値型(struct、enum)クラス
スコープビュー内ローカルビュー間で共有可能
複雑さシンプルな状態複雑なビジネスロジック
ライフサイクルSwiftUIが管理明示的に管理
再レンダリングビュー全体プロパティ単位できめ細かい

iOSの面接対策はできていますか?

インタラクティブなシミュレーター、flashcards、技術テストで練習しましょう。

iOS 27の変更: マクロとしての@Stateと遅延初期化

WWDC 2026では@Stateに重要な変更が導入されました。プロパティラッパーではなくマクロとして実装されるようになったのです。この変更は、@Observableクラスで@Stateを使う際の一般的な問題点に直接対処しています。

iOS 27以前の問題

以前は、@Stateに格納された@Observableクラスは即時初期化されていました。これにより、ビューが表示される前に同じインスタンスが複数回生成される可能性がありました。

BeforeIOS27.swiftswift
// Before iOS 27: potential multiple initializations
struct StickerStoreView: View {
    // The StickerStore instance could be created eagerly
    // and recreated during parent view updates
    @State private var store = StickerStore()

    var body: some View {
        // ...
    }
}

@Observable
class StickerStore {
    init() {
        print("StickerStore initialized")
        // This could print multiple times before the view appeared
    }
}

修正: 遅延初期化

iOS 27(およびiOS 17にバックポート済み)では、@Stateに格納された@Observableクラスは遅延初期化されるようになり、ビューのライフタイム中に一度だけ初期化されます。

AfterIOS27.swiftswift
// iOS 27+: guaranteed single initialization
struct StickerStoreView: View {
    @State private var store = StickerStore()

    var body: some View {
        // store is created exactly once, when the view first needs it
        StoreContentView(store: store)
    }
}

@Observable
class StickerStore {
    var stickers: [Sticker] = []

    init() {
        print("StickerStore initialized")
        // Now prints exactly once per view lifetime
    }
}
イニシャライザパターンの変更

イニシャライザで@Stateを代入する場合、コンパイラエラーを避けるためデフォルト値を削除してください。

InitializerPattern.swiftswift
// Correct pattern when using custom initializer
struct StickerPageView: View {
    @State private var page: StickerPage  // No default value
    let title: String

    init(title: String) {
        self.page = StickerPage(title: title)
        self.title = title
    }

    var body: some View {
        // ...
    }
}

この修正により、無駄なオブジェクト割り当てが排除され、@Observableインスタンスがビューのライフサイクル全体を通じて正しく保持されるようになりました。iOS面接質問の準備をしている開発者にとって、この変更を理解していることは、現在のSwiftUI内部構造への知見を示すことになります。

高度な利用パターン

@Stateと@Observableの組み合わせ

実際のアプリでは、これらのツールは調和して共存します。@StateがローカルなUI状態を扱い、@Observableがビジネスデータをカプセル化します。

CombinedPatterns.swiftswift
@Observable
class TodoListModel {
    var todos: [Todo] = []
    var filter: TodoFilter = .all

    var filteredTodos: [Todo] {
        switch filter {
        case .all:
            return todos
        case .active:
            return todos.filter { !$0.isCompleted }
        case .completed:
            return todos.filter { $0.isCompleted }
        }
    }

    func addTodo(title: String) {
        let todo = Todo(id: UUID(), title: title, isCompleted: false)
        todos.append(todo)
    }

    func toggleTodo(_ todo: Todo) {
        guard let index = todos.firstIndex(where: { $0.id == todo.id }) else { return }
        todos[index].isCompleted.toggle()
    }
}

struct Todo: Identifiable, Equatable {
    let id: UUID
    var title: String
    var isCompleted: Bool
}

enum TodoFilter: CaseIterable {
    case all, active, completed
}

struct TodoListView: View {
    // Business data via @Observable (lazy init since iOS 27)
    @State private var model = TodoListModel()

    // Local UI state via @State
    @State private var newTodoTitle = ""
    @State private var isAddingTodo = false
    @State private var selectedTodo: Todo?

    var body: some View {
        NavigationStack {
            VStack {
                // Filter with Picker
                Picker("Filter", selection: $model.filter) {
                    ForEach(TodoFilter.allCases, id: .self) { filter in
                        Text(filter.label).tag(filter)
                    }
                }
                .pickerStyle(.segmented)
                .padding()

                // Todo list
                List(model.filteredTodos, selection: $selectedTodo) { todo in
                    TodoRowView(todo: todo) {
                        model.toggleTodo(todo)
                    }
                }
            }
            .navigationTitle("Tasks")
            .toolbar {
                Button {
                    isAddingTodo = true
                } label: {
                    Image(systemName: "plus")
                }
            }
            .sheet(isPresented: $isAddingTodo) {
                AddTodoSheet(model: model)
            }
        }
    }
}

struct TodoRowView: View {
    let todo: Todo
    let onToggle: () -> Void

    var body: some View {
        HStack {
            Image(systemName: todo.isCompleted ? "checkmark.circle.fill" : "circle")
                .foregroundStyle(todo.isCompleted ? .green : .secondary)
                .onTapGesture(perform: onToggle)

            Text(todo.title)
                .strikethrough(todo.isCompleted)
        }
    }
}

extension TodoFilter {
    var label: String {
        switch self {
        case .all: return "All"
        case .active: return "Active"
        case .completed: return "Completed"
        }
    }
}

依存性注入を伴う@Observable

より複雑なアプリでは、SwiftUIの環境を介した注入により、効果的な疎結合を実現できます。

DependencyInjection.swiftswift
@Observable
class AuthenticationService {
    var currentUser: User?
    var isAuthenticated: Bool { currentUser != nil }

    func login(email: String, password: String) async throws {
        // Authentication logic
        currentUser = User(id: UUID(), email: email, name: "User")
    }

    func logout() {
        currentUser = nil
    }
}

struct User: Identifiable, Equatable {
    let id: UUID
    let email: String
    let name: String
}

// Extension to create an environment key
extension EnvironmentValues {
    @Entry var authService: AuthenticationService = AuthenticationService()
}

// Configuration in the App
@main
struct MyApp: App {
    @State private var authService = AuthenticationService()

    var body: some Scene {
        WindowGroup {
            ContentView()
                .environment(.authService, authService)
        }
    }
}

// Usage in views
struct ProfileView: View {
    @Environment(.authService) private var authService

    var body: some View {
        if let user = authService.currentUser {
            VStack {
                Text("Hello, (user.name)")
                Button("Sign Out") {
                    authService.logout()
                }
            }
        } else {
            Text("Not signed in")
        }
    }
}

パフォーマンスと最適化

不要な再レンダリングの回避

@Observableの粒度をもってしても、特定のパターンはパフォーマンスを低下させ得ます。

PerformanceOptimization.swiftswift
// Bad pattern: reading the entire object
struct BadPatternView: View {
    let model: ProfileModel

    var body: some View {
        // Reads model.name AND model.posts even if only name is displayed
        let _ = model.posts.count  // Creates unnecessary dependency
        Text(model.name)
    }
}

// Good pattern: targeted reading
struct GoodPatternView: View {
    let model: ProfileModel

    var body: some View {
        // Tracks only name
        Text(model.name)
    }
}

// Extract into subviews to isolate dependencies
struct OptimizedProfileView: View {
    let model: ProfileModel

    var body: some View {
        VStack {
            // Each subview has its own dependencies
            ProfileNameView(model: model)
            ProfilePostsView(model: model)
            ProfileStatsView(model: model)
        }
    }
}

struct ProfileNameView: View {
    let model: ProfileModel

    var body: some View {
        Text(model.name)
            .font(.title)
    }
}

struct ProfilePostsView: View {
    let model: ProfileModel

    var body: some View {
        ForEach(model.posts) { post in
            PostRow(post: post)
        }
    }
}

struct ProfileStatsView: View {
    let model: ProfileModel

    var body: some View {
        HStack {
            StatBadge(value: model.followerCount, label: "Followers")
            StatBadge(value: model.posts.count, label: "Posts")
        }
    }
}
高コストなcomputed property

@Observable上のcomputed propertyはアクセスのたびに再評価されます。複雑な計算では、結果をstored propertyにキャッシュすることを検討してください。

Swift 6.4での高度な観測

Swift 6.4ではSE-0506が導入され、Observationフレームワークにきめ細かな連続的変更通知APIが追加されました。これらの高度なツールは、一般的なアプリ開発者ではなく、ミドルウェア開発者やウィジェットシステムの実装者を対象としています。ほとんどのアプリでは標準的な@Observableマクロパターンを引き続き使用します。Swift 6.4リリースノートにこれらの追加機能の詳細があります。

ObservableObjectからの移行

ObservableObjectを使っている既存プロジェクトでは、@Observableへの移行によりコードを簡素化できます。

MigrationExample.swiftswift
// Old pattern with ObservableObject
class OldSettingsModel: ObservableObject {
    @Published var darkMode: Bool = false
    @Published var fontSize: CGFloat = 16
    @Published var notifications: Bool = true
}

struct OldSettingsView: View {
    @StateObject private var settings = OldSettingsModel()
    // or @ObservedObject if injected

    var body: some View {
        Form {
            Toggle("Dark Mode", isOn: $settings.darkMode)
            Slider(value: $settings.fontSize, in: 12...24)
            Toggle("Notifications", isOn: $settings.notifications)
        }
    }
}

// New pattern with @Observable
@Observable
class NewSettingsModel {
    var darkMode: Bool = false
    var fontSize: CGFloat = 16
    var notifications: Bool = true
}

struct NewSettingsView: View {
    @State private var settings = NewSettingsModel()

    var body: some View {
        Form {
            Toggle("Dark Mode", isOn: $settings.darkMode)
            Slider(value: $settings.fontSize, in: 12...24)
            Toggle("Notifications", isOn: $settings.notifications)
        }
    }
}

移行のメリット:

  • 各プロパティに@Publishedを付ける必要がなくなります
  • 生成時に@StateObjectの代わりに@Stateを使えます(遅延初期化が保証されます)
  • きめ細かな観測が自動化されます
  • 可読性と保守性の高いコードになります

iOS 17以降をターゲットとするアプリでは、@Observableへの移行が推奨されます。Combine vs async/await移行ガイドでは、関連するモダナイゼーションパターンを解説しています。

実践的な意思決定ルール

適切なツールを選ぶための意思決定ガイドです。

DecisionGuide.swiftswift
/*
 RULE 1: Ephemeral UI state -> @State
 - Animations, transitions
 - Local form states
 - Temporary selections
 - Section expand/collapse
*/
struct AnimatedCard: View {
    @State private var isFlipped = false  // Local UI state
    // ...
}

/*
 RULE 2: Shared data across views -> @Observable
 - Business data models
 - Authentication state
 - Shopping cart
 - User preferences
*/
@Observable
class UserSession {  // Shared across app
    var user: User?
    var preferences: Preferences
    // ...
}

/*
 RULE 3: Simple struct with binding -> @State
 - Local configuration
 - Isolated forms
*/
struct FormData {
    var name: String = ""
    var email: String = ""
}

struct FormView: View {
    @State private var formData = FormData()  // Struct with @State
    // ...
}

/*
 RULE 4: Complex business logic -> @Observable
 - Validations
 - Network calls
 - Data transformations
*/
@Observable
class OrderProcessor {  // Complex logic
    var items: [OrderItem] = []
    var status: OrderStatus = .draft

    func validate() -> [ValidationError] { /* ... */ }
    func submit() async throws { /* ... */ }
}

参考資料

SwiftUIにおける@Observableと@Stateの選択

@Observableと@Stateの選択は、二つの基本的な問いに集約されます。データ型(値型か参照型か)と、状態のスコープ(ローカルか共有か)です。@StateはシンプルでローカルなUI状態に優れ、@Observableはきめ細かな観測を必要とする複雑なデータモデルで真価を発揮します。

意思決定チェックリスト

  • 値型と一時的なUI状態には@Stateを使う
  • ビジネスデータを持つクラスには@Observableを使う
  • 状態が複数のビューにまたがるときは@Observableを優先する
  • サブビューに切り出して再レンダリングを最適化する
  • bodyで不要なプロパティを読み取らないようにする
  • ObservableObjectから段階的に移行する
  • 依存性注入には環境を使う
  • 複雑なケースではInstrumentsでパフォーマンスを検証する

iOS 27の@Stateマクロ改善(iOS 17にバックポート済み)により、これらのツールの組み合わせはこれまで以上に信頼性が高くなりました。遅延初期化の修正により、@Observableクラスを@Stateに格納する際の一般的なバグ原因が解消されています。

今すぐ練習を始めましょう!

面接シミュレーターと技術テストで知識をテストしましょう。

今日のチャレンジ

iOS のバグを見つけられますか

実際のコード、隠れたバグ、1日1回。アカウントなしで試せます。

Anthony Fillion-Maillet

執筆

Anthony Fillion-Maillet

SharpSkill 創業者

10 年以上フルスタック開発に携わっています。SharpSkill を運営し、ここで公開される内容に責任を負っています。

2026年10月5日 更新

タグ

#swiftui
#ios
#observable
#state-management
#swift

共有

関連記事