---
title: "React のスクロール可能なタブ — Material UI 不要"
description: "React でネイティブスクロールを使うスクロール可能なタブ：アクティブなタブが自動的に中央に来て、矢印は必要なときだけ表示、タブの中身は自由形式。ライブデモとソース付き。"
canonical: "https://react-horizontal-scrolling-menu.dev/ja/scrollable-tabs"
image: "https://react-horizontal-scrolling-menu.dev/og.png"
---

# ブラウザのようにスクロールする React のスクロールタブ

タブの並びは、プロダクトが 6 個を超えたとたんに収まらなくなります。解決策はフォントを小さくすることではなく、スクロールする帯にすることです：はみ出し分はブラウザに任せ、タブをクリックすると中央に寄り、矢印は行き先がある時だけ表示されます。

Overview

Getting started

Visibility

Arrows

Drag to scroll

RTL

apiRef

Helpers

TypeScript

Testing

Changelog

FAQ

端に近いタブをクリックしてみてください — 自動的に中央までスクロールします。

[この例を Storybook でライブ編集](https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/?path=/story/examples-centeronclick--center-on-click)

## 重要な挙動はただ 1 つ：選択時に中央へ

スクロール可能なタブの帯は、端のタブをクリックしたときに何が起きるかで成否が決まります：両側の隣接タブが見えるように、中央へ滑らかに移動するべきです。ここでは呼び出しはたった 1 つ — `scrollToItem(el, 'smooth', 'center')` — [center-on-click の例](https://react-horizontal-scrolling-menu.dev/ja/examples/center-on-click.md) に組み込まれています。マウント時にアクティブなタブを復元するのも同じ呼び出しで、`'auto'` を使ったものが [位置の保存と復元](https://react-horizontal-scrolling-menu.dev/ja/examples/save-restore-position.md) にあります。

矢印は同じ可視性データから来ています：`useLeftArrowVisible` は最初のタブが画面外にある間だけ false になるので、左矢印はまさに役立つときにレンダリングされます。計測コードも、自前の resize observer も不要です。

## MUI のスクロールタブでは物足りなくなってきたら

Material UI の `variant="scrollable"` タブは、Material のデザインシステムの中では正しい答えです — あなたの「タブ」がタブでなくなるまでは。MUI は帯を Tabs のセマンティクスに溶接しています：`value`/`onChange` のペア、タブパネル、そしてモバイルではデフォルトで非表示になるスクロールボタン。行にチップやカード、アバター、混在コンテンツを入れたい瞬間、ドラッグスクロールが必要な瞬間、どのアイテムが見えているか知りたい瞬間から、あなたはコンポーネントを使うのではなく、それと戦うことになります。

このライブラリはその下の層です：可視性トラッキング付きのスクロールする行で、「タブ」が何であるべきかについての意見は持ちません。あなたのタブは `itemId` を持つ任意のコンポーネントです — Tailwind でも、MUI 自身の `styled` でも、素の CSS でもスタイリングできます。選択状態はあなたの手元に残ります。上のデモが 1 つの `useState` に保持しているのとまったく同じです。

## アクセシビリティはほぼ無料 — 2 つの隙間に注意

帯はネイティブのスクロールコンテナなので、キーボードフォーカス、スクリーンリーダーの読み上げ順序、RTL はすべてプラットフォームから得られます — タブ間をフォーカス移動するとコード不要で自動的にスクロールして見えるようになり、[RTL](https://react-horizontal-scrolling-menu.dev/ja/examples/rtl.md) も設定不要です。他のタブ UI と同様、2 つだけはあなたの責任です：ARIA パターンを選ぶこと（実際のパネルが切り替わるなら `role="tablist"`、「タブ」がナビゲーションならば `aria-current`）、そして [ドラッグスクロール](https://react-horizontal-scrolling-menu.dev/ja/examples/mouse-drag.md) レシピのクリック抑制を保ち、ドラッグの終了がタブを誤って有効化しないようにすることです。

## パターン、最小構成

タブは `itemId` を持つ普通のボタンで、選択すると中央に来ます。これがアイデアの全体です — 上のデモはスタイリングとドラッグを追加しています。

ScrollTabs.tsx

```
function ScrollTabs({ tabs }: { tabs: string[] }) {
  const [active, setActive] = React.useState(tabs[0]);
  return (
    <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
      {tabs.map((tab) => (
        <Tab itemId={tab} key={tab} label={tab}
          active={tab === active} onSelect={() => setActive(tab)} />
      ))}
    </ScrollMenu>
  );
}

function Tab({ itemId, label, active, onSelect }: TabProps) {
  const api = React.useContext<publicApiType>(VisibilityContext);
  return (
    <button
      aria-current={active}
      onClick={(ev) => {
        onSelect();
        // The behavior that makes tabs feel native: selecting an
        // edge tab glides it to the center of the strip.
        api.scrollToItem(ev.currentTarget, 'smooth', 'center');
      }}
    >
      {label}
    </button>
  );
}
```

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

[scroll-tabs](https://react-horizontal-scrolling-menu.dev/r/scroll-tabs.json) レジストリアイテムはこのパターンをデータ駆動で提供します — `tabs`、`value`、`onValueChange` を渡す — あなたの `components/ui/` に置く編集可能なコンポーネントとして：

shadcn

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

## 関連する例

-   [クリックした項目を中央にscrollToItem に inline: center——スクロール可能なタブのパターン。](https://react-horizontal-scrolling-menu.dev/ja/examples/center-on-click.md)
-   [スクロール位置の保存と復元アンマウントやページ再読み込みをまたいでスクロールオフセットを保持。](https://react-horizontal-scrolling-menu.dev/ja/examples/save-restore-position.md)
-   [マウスでドラッグしてスクロール項目のクリックを壊さないマウスドラッグ。](https://react-horizontal-scrolling-menu.dev/ja/examples/mouse-drag.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>