SwiftUI＋TCAで作るリアルタイム検索機能：debounceを使って効率的な検索を実現しよう

はじめに

SwiftUIとTCA (The Composable Architecture) を使用して、リアルタイム検索機能を実装する方法について説明します。本記事では、TCAのアーキテクチャについての基本的な知識があることを前提に進めていきます。

リアルタイム検索

検索機能を実装する上で重要なのは、ユーザーが素早く目的の情報を見つけられるようにすることです。そのためには、ユーザーが入力した検索キーワードに合わせて、リアルタイムに検索結果を返すことが必要です。しかし、ユーザーが入力するたびに検索処理を実行してしまうと、端末やサーバーに負荷がかかってしまうことがあります。

debounce

そこで、debounceを使って、一定時間以内に連続して入力された場合には、最後に入力されたキーワードを検索キーワードとして採用し、それ以外の場合には検索処理を実行しないようにします。これにより、検索処理を効率的に実行することができます。

コード例

実際にSwiftUIとTCAでdebounceを使った検索機能を実装するには、以下のようなコードを書きます。

import SwiftUI
import ComposableArchitecture

struct Search: ReducerProtocol {
    struct State: Equatable {
        var searchText = ""
    }

    enum Action: Equatable {
        case setSearchText(String)
        case search
    }
    
    @Dependency(\.mainQueue) private var mainQueue
    
    var body: some ReducerProtocol<State, Action> {
        Reduce { state, action in
            switch action {
            case let .setSearchText(text):
                enum SetSearchTextID {}
                state.searchText = text
                return .task {
                    .search
                }
                .debounce(
                    id: SetSearchTextID.self, 
                    for: 0.5, // 0.5秒
                    scheduler: mainQueue
                )
            case .search:
                // ここに検索処理を書く
                print(state.searchText)
                return .none
            }
        }
    }
}

struct SearchView: View {
    let store: StoreOf<Search>
    
    var body: some View {
        WithViewStore(
            self.store,
            observe: { $0 }
        ) { viewStore in
            VStack {
                TextField("Search", text: viewStore.binding(
                    get: \.searchText,
                    send: { .setSearchText($0) }
                ))
            }
        }
    }
}

struct SearchView_Previews: PreviewProvider {
    static var previews: some View {
        SearchView(
            store: Store(
                initialState: Search.State(),
                reducer: Search()
            )
        )
    }
}

まとめ

検索機能の実装は、ユーザーの利便性を高める上で非常に重要な要素です。debounceを使って、入力のたびに検索処理を実行せず、一定時間以内に入力が連続した場合にのみ検索を行うことで、負荷を軽減し、スムーズなユーザーエクスペリエンスを実現できます。SwiftUIとTCAの組み合わせは、このような機能を実装するのに非常に適しています。是非、今回紹介したコードを参考にして、検索機能を実装してみてください。

---

ご覧いただきありがとうございました。

🐦 Twitter: @shota_appdev

📱 個人アプリ: Symbols Explorer