検索フィールドを実装する方法を解説【searchable】

SwiftUIでは、searchableを使用することで、アプリに検索機能を簡単に組み込むことができます。
searchable修飾子を使用すると、ナビゲーションバーに検索バーが追加され、ユーザーがキーワードを入力してコンテンツを検索できるようになります。以下は基本的な使い方を示す例です。

iOS：15.0以上
XCode（当サイトの環境）：13.4.1

基本的な使い方：検索フィールドの表示
実践編：検索バーに入力した文字列でリストをフィルタリング
まとめ

基本的な使い方：検索フィールドの表示

まずは、検索用の文字列を保持するための変数を@Stateプロパティラッパーを使って定義します。そして、searchable修飾子をビューに追加して、その検索文字列にバインドします。

import SwiftUI

struct SearchSmp: View {
    @State private var searchText = ""

    var body: some View {
        NavigationStack {
            Text("Hello World")
            .navigationTitle("リスト")
            .searchable(text: $searchText, prompt: "検索")
            .onChange(of: searchText) {
                // 検索文字列が変更されたときの処理をここに書く
                print("検索文字列: \(searchText)")
            }
        }
    }
}

この例では、NavigationStack内のビューにsearchable修飾子を追加しています。
searchableの第一引数には、検索バーに入力されたテキストを保持する@State変数をバインドし、第二引数のpromptには検索バーのプレースホルダーテキストを指定します。

ユーザーが検索バーにテキストを入力すると、そのテキストはsearchText変数に自動的に反映されます。

onChange修飾子を使用して、この変数の値が変更されたときに特定の処理を行うことができます。
例えば、フィルタリング処理を行い、検索クエリに一致する結果のみをリストに表示することができます。今回は文字列を単純にprintしているのみです。

注意点：searchableを使用する際は、NavigationStackやNavigationViewが必要です。これは、検索バーをナビゲーションバーに統合するためです。

実践編：検索バーに入力した文字列でリストをフィルタリング

searchableを使用してリストの項目をフィルタリングするには、いくつも方法があると思います。今回は以下のステップで実装します。

検索テキストを保持するための状態変数を定義する：ユーザーが検索バーに入力したテキストを保持するために、@Stateプロパティラッパーを使用して変数を定義します。
表示するデータのリストを準備する：表示するデータの元となるリストを準備します。このリストから検索クエリに基づいてフィルタリングを行います。
検索テキストに基づいてデータをフィルタリングする：ユーザーが検索バーに入力したテキストに基づいて、リストから項目をフィルタリングするロジックを実装します。
フィルタリングされたリストを表示する：フィルタリングされたリストをListやForEachなどを使って表示します。

以下に具体的な例を示します。

import SwiftUI

struct SearchFilter: View {
    @State private var searchText = ""
    
    let allItems = ["Apple", "Banana", "Orange", "Grapes", "Strawberry"] // 表示するデータの元となるリスト
    var filteredItems: [String] {
        if searchText.isEmpty {
            return allItems // 検索テキストが空の場合は全ての項目を表示
        } else {
            return allItems.filter { $0.localizedCaseInsensitiveContains(searchText) } // 検索テキストに基づいてフィルタリング
        }
    }

    var body: some View {
        NavigationStack {
            List(filteredItems, id: \.self) { item in // フィルタリングされたリストを表示
                Text(item)
            }
            .navigationTitle("フルーツ")
            .searchable(text: $searchText) // 検索バーを追加
        }
    }
}

この例では、allItems配列が表示するデータの元リストです。
searchTextに何かが入力されると、filteredItems計算プロパティがフィルタリングされた項目のリストを生成します。
このフィルタリングは、配列のfilterメソッドを使用しており、各項目がsearchTextを含むかどうかを判断しています。そして、ListビューでこのfilteredItemsを表示しています。

searchable修飾子を使って検索バーを追加し、@State変数searchTextにバインドしています。これにより、ユーザーが検索バーにテキストを入力すると、リアルタイムでリストがフィルタリングされて更新されます。

この方法で、SwiftUIのsearchableを利用して、リストの項目を効果的にフィルタリングし、ユーザーに表示することができます。