SwiftUI＋TCAで作るリアルタイム検索機能

はじめに

SwiftUIとTCA (The Composable Architecture) を使用して、リアルタイム検索機能を実装する方法について説明します。

リアルタイム検索

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

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の組み合わせは、このような機能を実装するのに非常に適しています。是非、今回紹介したコードを参考にして、検索機能を実装してみてください。