onChangeの基本と実用的な使い方をマスターしよう

onChangeは、SwiftUIで特定の状態やプロパティの変更を監視し、変更が検知されたときにアクションを実行するために使用されるモディファイアです。

iOS：17.0以上
XCode（当サイトの環境）：15.0.1

基本的な使い方
複数のプロパティの変更を監視する場合
実用的な使い方
1. 応用例：検索機能
まとめ

基本的な使い方

以下にonChangeの基本的な使い方を解説します。

パラメータ

of：変更を監視するプロパティを指定します。このプロパティが変更されると、指定されたクロージャが実行されます。
initial：初期値の変更を監視するかどうかを指定します。このパラメータはオプショナルで、デフォルトではfalseに設定されています。initialをtrueに設定すると、ビューが初期化されたときにもクロージャが実行されます。

import SwiftUI

struct OnChangeSmp: View {
    @State private var text = ""

    var body: some View {
        VStack {
            TextField("Enter text", text: $text)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())

            Text("Current text: \(text)")
        }
        .onChange(of: text, initial: false) {
            print("Text changed to: \(text)")
        }
    }
}

この例では、TextFieldに入力されたテキストが変更されるたびに、onChangeモディファイアが呼び出されます。
入力するたびにテキストの値が更新され、コンソールに出力されます。

詳細な解説

@Stateプロパティ:
- @Stateプロパティは、ビューの状態を管理するために使用されます。この例では、テキスト入力の値を保持します。
TextField:
- TextFieldはユーザーがテキストを入力するためのビューです。
- text: $textとすることで、textプロパティにバインディングされ、入力が変更されるたびにtextの値が更新されます。
onChange(of:):
- このモディファイアは、指定したプロパティが変更されるたびにアクションを実行します。
- of: textは監視対象のプロパティを指定します。

サンプルコードの動作

複数のプロパティの変更を監視する場合

複数のプロパティの変更を監視する場合、それぞれにonChangeを使用します。

import SwiftUI

struct OnChangeSmp: View {
    @State private var text = ""
    @State private var counter = 0

    var body: some View {
        VStack {
            TextField("Enter text", text: $text)
                .textFieldStyle(RoundedBorderTextFieldStyle())

            Stepper("Counter: \(counter)", value: $counter)
            
            Text("Current text: \(text)")
        }
        .padding()
        .onChange(of: text) {
            print("Text changed to: \(text)")
        }
        .onChange(of: counter) {
            print("Counter changed to: \(counter)")
        }
    }
}

この例では、textプロパティとcounterプロパティの両方の変更を監視しています。それぞれの変更に対して異なるアクションを実行できます。

実用的な使い方

応用例：検索機能

検索機能を実装する場合、onChangeを使用してリアルタイムに検索結果を更新できます。

import SwiftUI

struct OnChangeSmp: View {
    @State private var searchText = ""
    @State private var results: [String] = []
    private let allItems = ["Apple", "Banana", "Cherry", "Date", "Fig", "Grape"]

    var body: some View {
        NavigationStack {
            List(results, id: \.self) { item in
                Text(item)
            }
            .searchable(text: $searchText)
            .onChange(of: searchText) {
                searchItems(query: searchText)
            }
        }
    }

    private func searchItems(query: String) {
        if query.isEmpty {
            results = allItems
        } else {
            results = allItems.filter { $0.lowercased().contains(query.lowercased()) }
        }
    }
}

この例では、ユーザーがテキストフィールドに入力するたびにsearchItems(query:)が呼び出され、resultsが更新されます。Listはresultsを表示し、リアルタイムで検索結果を反映します。