# Fumadocs (Framework Mode, TanStack Start): 検索
URL: /ja/docs/tanstack-start/search
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/search/index.ja.mdx

ドキュメントサイトに検索機能を実装します

## 検索 UI [#search-ui]

ドキュメント検索の UI をカスタマイズする方法については、[検索 UI](/docs/ui/search) を参照してください。

## 検索クライアント [#search-client]

使用する検索エンジンに応じて、検索クライアントを選択・設定できます。デフォルトは ZBSearch です。

- [ZBSearch(デフォルト)](/ja/docs/tanstack-start/search/orama): ZBSearch を基盤とするデフォルトの検索エンジンです。
- [Algolia](/ja/docs/tanstack-start/search/algolia): Fumadocs UI で Algolia を使用する方法。
- [FlexSearch](/ja/docs/tanstack-start/search/flexsearch): 高速で軽量な検索エンジンです。
- [Meilisearch](/ja/docs/tanstack-start/search/meilisearch): Fumadocs UI で Meilisearch を使用する方法
- [Mixedbread](/ja/docs/tanstack-start/search/mixedbread): Fumadocs UI で Mixedbread を使用する方法
- [Orama Cloud](/ja/docs/tanstack-start/search/orama-cloud): Fumadocs UI で Orama Cloud を使用する方法。
- [Typesense](/ja/docs/tanstack-start/search/typesense): Fumadocs UI で Typesense を使用する方法です。
- [カスタム検索](/ja/docs/tanstack-start/search/custom): その他の検索ソリューションを利用する場合の設定です。

### 検索フック [#search-hooks]

検索クライアントには、`useFetchSearch()` や `useAlgoliaSearch()` などの React フックが用意されています。これらのフックは `<SearchDialog />` の props を返します。

```tsx
import { useFetchSearch } from 'fumadocs-core/search/client';

const search = useFetchSearch();

<SearchDialog {...search} {...props} />;
```

これらのフックは、検索入力用の `search` と `onSearchChange` に加えて、次の値を返します。

* `data`: 最後に成功した検索です。再検索中やエラー発生後も保持されます。
  * `items`: その検索結果です。各結果のコンテンツは [hast](https://github.com/syntax-tree/hast) としてもパースされ、`hastContent` に格納されます。テーブルの行は 1 つの `table` アイテムにまとめられます。
  * `query`: 検索に使用されたクエリです。
* `error`: 最後の検索が失敗した場合に設定されます。
* `isLoading`: `search` に対する検索が処理中かどうかを示します。

他の検索エンジンを使用する場合は、メモ化した検索関数を `experimental_useSearch()` に渡してください。関数が変更されると、再検索が実行されます。

```tsx
'use client';
import { useCallback } from 'react';
import { experimental_useSearch } from 'fumadocs-core/search/client';
import type { SortedResult } from 'fumadocs-core/search';

export function useMySearch(locale: string) {
  const search = useCallback(
    async (query: string): Promise<SortedResult[]> => {
      const res = await fetch(`/api/my-search?${new URLSearchParams({ query, locale })}`);
      return res.json();
    },
    [locale],
  );

  return experimental_useSearch(search);
}
```

### コミュニティによるインテグレーション [#community-integrations]

コミュニティがメンテナンスしているインテグレーションの一覧です。

* [Trieve Search](/docs/headless/search/trieve)
* [Typesense Search](/docs/headless/search/typesense)