---
title: "React のスクロールバー内フィルターチップ"
description: "React の横型フィルターチップバー：チップはネイティブにスクロールし、チップを追加すると自動で表示範囲までスクロール、ドラッグスクロールしてもクリックは壊れません。ライブデモとソース付き。"
canonical: "https://react-horizontal-scrolling-menu.dev/ja/filter-chips"
image: "https://react-horizontal-scrolling-menu.dev/og.png"
---

# React で作る、スクロールするフィルターチップバー

検索バーの下にあるチップ行 — YouTube のトピック、ストアのフィルター、タグピッカー — は、トグルボタンで埋め尽くされた 1 行のスクロールコンテナです。難しいのは残り 10% にあたる端の挙動です：画面外に現れる新しいチップ、何もトグルしてはいけないドラッグ、そして無意味なときを知っている矢印。

react

typescript

scrolling

menu

gallery

tabs

carousel

slider

accordion

lightbox

Add filter

フィルターを追加してみてください — 行が新しいチップを自動で見える位置までスクロールします。

[この例を Storybook でライブ編集](https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/?path=/story/examples-additemandscrolltoit--add-item-and-scroll-to-it)

## エッジケースこそが機能

`overflow-x: auto` を持つフレックス行なら何でもスクロールします。チップバーが真価を発揮するのは細部です：

-   **画面外に追加されたチップは、自分の存在を知らせなければなりません。** デモではレンダリング後に `apiRef.current.scrollToItem(el, 'smooth', 'end')` で新しいチップごとにスクロールしています — [add-item-and-scroll-to-it の例](https://react-horizontal-scrolling-menu.dev/ja/examples/add-item-and-scroll-to-it.md) はまさにこの配線です。
-   **スクロールはドラッグで、トグルはクリックで — 両方同時には起きません。** デスクトップのユーザーはタッチ面のようにこの行をドラッグします。チップの上で指を離しても、それを切り替えてはいけません。[ドラッグのレシピ](https://react-horizontal-scrolling-menu.dev/ja/examples/mouse-drag.md) がジェスチャーを追跡し、そのクリックだけを抑制します。
-   **矢印は役立つときだけ。** `useLeftArrowVisible` / `useRightArrowVisible` は他のすべてと同じ IntersectionObserver に配線されているので、矢印は実際の端で無効になります — チップの追加・削除後も含めて。

## 状態はあなたの手の中に

ライブラリはスクロールを担当し、選択状態は所有しません。チップはあなたのボタンです — 複数選択トグルには `aria-pressed`、単一選択には普通の state — メニュー側はそれぞれが `itemId` を持つことしか必要としません。つまりチップの状態は、URL の検索パラメータ、フォームライブラリ、サーバー駆動のフィルターモデルなど、すでにあるものと自然に組み合わさります。チップの削除は [アイテムの削除](https://react-horizontal-scrolling-menu.dev/ja/examples/add-items.md)、アニメーションで消すのは [items-animation の例](https://react-horizontal-scrolling-menu.dev/ja/examples/items-animation.md) です。

## モバイル：ボディスクロールに関する 1 つの注意

タッチスクリーンでは、バー内での横方向のスワイプが、一部のブラウザではページごと横に引きずってしまうことがあります。それを見かけたら、[prevent-body-scroll の例](https://react-horizontal-scrolling-menu.dev/ja/examples/prevent-body-scroll.md) が `touch-action` とオーバースクロールの封じ込めでそれを止める方法を示しています — CSS のみで、ジェスチャーライブラリ不要です。

## パターン、最小構成

チップは `itemId` を持つトグルボタンで、メニュー API への ref が新しく追加されたチップを見える位置までスクロールします。

ChipBar.tsx

```
function ChipBar({ options }: { options: string[] }) {
  const apiRef = React.useRef<publicApiType>(null);
  const [selected, setSelected] = React.useState<string[]>([]);

  const toggle = (id: string) =>
    setSelected((cur) =>
      cur.includes(id) ? cur.filter((c) => c !== id) : [...cur, id],
    );

  // A chip appended off-screen scrolls itself into view.
  const addChip = (id: string) => {
    toggle(id);
    requestAnimationFrame(() => {
      const el = apiRef.current?.getItemElementById(id);
      if (el) apiRef.current?.scrollToItem(el, 'smooth', 'end');
    });
  };

  return (
    <ScrollMenu apiRef={apiRef}>
      {options.map((id) => (
        <Chip itemId={id} key={id} pressed={selected.includes(id)}
          onToggle={() => toggle(id)} />
      ))}
    </ScrollMenu>
  );
}
```

## または shadcn コンポーネントとしてインストール

[chip-bar](https://react-horizontal-scrolling-menu.dev/r/chip-bar.json) レジストリアイテムは、これを制御コンポーネントとして提供します — `options`、`selected`、`onSelectedChange` — あなたの `components/ui/` に置く Tailwind スタイルとして：

shadcn

```
npx shadcn@latest add https://react-horizontal-scrolling-menu.dev/r/chip-bar.json
```

## 関連する例

-   [項目を追加してスクロールフィルターチップのパターン：追加して、ビューに引き込みます。](https://react-horizontal-scrolling-menu.dev/ja/examples/add-item-and-scroll-to-it.md)
-   [末尾が見えたらさらに読み込む最後の項目の可視性で動く無限追加。](https://react-horizontal-scrolling-menu.dev/ja/examples/add-items.md)
-   [本体のスクロールを防ぐメニュー上のホイールはページではなくメニューをスクロール。](https://react-horizontal-scrolling-menu.dev/ja/examples/prevent-body-scroll.md)

[すべての例（21 件）](https://react-horizontal-scrolling-menu.dev/ja/examples.md)

---

More examples: <https://react-horizontal-scrolling-menu.dev/examples.md>
Library summary for LLMs: <https://react-horizontal-scrolling-menu.dev/llms.txt>