--- title: "react-horizontal-scrolling-menu vs Swiper, Embla, react-slick" description: "正直な比較：横スクロールメニューがカルーセルライブラリに勝つ場面と、そうでない場面。Swiper、Embla、keen-slider、react-slick を並べて比較。" canonical: "https://react-horizontal-scrolling-menu.dev/ja/compare" image: "https://react-horizontal-scrolling-menu.dev/og.png" --- # カルーセルかスクロールメニューか？正直な比較 Swiper、Embla、keen-slider、react-slick はカルーセルエンジンです。スライドのセマンティクス、スナップ物理、エフェクトを得るために JavaScript でスクロールを再実装しています。react-horizontal-scrolling-menu はそのいずれでもありません。ブラウザネイティブのスクロールに乗り、項目ごとの可視性追跡を加えます。どちらが欲しいかは何を作るか次第です。そしてカルーセル用途のかなりの割合については、正直な答えは「あなたは最初からメニューを作っていた」です。 | | このライブラリ | Swiper | Embla | keen-slider | react-slick | | --- | --- | --- | --- | --- | --- | | それは何か | 可視性追跡付きのスクロールメニュー | フル機能のスライダー/カルーセルフレームワーク | ヘッドレスカルーセルエンジン | フレームワーク非依存のスライダーエンジン | jQuery の slick スライダーの React 移植 | | スクロールエンジン | ブラウザネイティブのスクロール | JS トランスフォーム + 物理 | JS トランスフォーム + 物理 | JS トランスフォーム + 物理 | JS トランスフォーム（CSS トランジション） | | バンドル（コア、min+gzip） | ≈5.7 kB | ≈40 kB | ≈8 kB | ≈7 kB | ≈15 kB + slick CSS | | 画面上の項目がどれか | 内蔵——項目ごとの useIsVisible | スライドインデックスベース | スライドインデックスイベント | スライドインデックスイベント | スライドインデックスベース | | スナップ、エフェクト、物理 | なし——意図的に | 豊富（fade、cube、coverflow…） | プラグインベース、トゥイーン可能 | あり（フリーモード含む） | Fade、センターモード | | ループ / 自動再生 | 公開 API 上のレシピ | 内蔵プロパティ | プラグイン | 内蔵オプション | 内蔵プロパティ | | スクロールバー、ホイール、キーボードフォーカス | ネイティブ——ブラウザから無料で | エミュレート / オプトインモジュール | 自作（ヘッドレス） | 自作 | 限定的 | | 最適な用途 | カテゴリー行、タブストリップ、チップフィルター | 全画面スライダー、ギャラリー | カスタムカルーセル（shadcn のデフォルト） | 最小限のカスタムスライダー | 旧 slick からの移行 | バンドルサイズは概算のコアサイズです。サイズだけで決める前に、最新の数値は bundlephobia で確認してください。 ## まず、本当の問い **カルーセル**はスライドを提示します。一度に 1 つ（または 1 ページ分）のものを、スナップ、エフェクト、そして「8 枚中 3 枚目」という位置感覚とともに見せます。**メニュー**は、ユーザーが走査して選ぶ 1 行を提示します。カテゴリーレール、タブストリップ、チップバーです。カルーセルはスライドのセマンティクスを欲しがり、メニューはネイティブスクロールを欲しがります——慣性、スクロールバー、ホイール、タッチ、キーボードフォーカスがページの残り部分とまったく同じように振る舞うこと、そしてブラウザが与えてくれない 1 つ——どの項目が画面上にあるかの把握を加えたものです。 全画面画像スライダー、ヒーローギャラリー、あるいはスナップトゥスライドの物理を伴う何かを作るなら、**カルーセルライブラリを使ってください——Embla か Swiper が優れています**。このページはもう一方のケース、つまりどのカルーセル FAQ も静かに無視しているケースのためにあります。本当はスライドではなかった、クリック可能なものの行です。 ## vs Swiper Swiper は現存する中で最も完成度の高いスライダーフレームワークです。エフェクト（fade、cube、coverflow）、仮想スライド、ズーム、パララックス、ページネーション、そして成熟したエコシステム。提供される機能を使うなら、その約 40 kB は元が取れます。トランスフォームでスクロールを再実装しているため、ネイティブのスクロールバー、ホイールの挙動、スクロールのアクセシビリティは、継承されるデフォルトではなく、あなたが設定するエミュレーションになります。 - **Swiper を選ぶ**のは、画像中心のスライダー、エフェクト、スライドらしく感じさせる必要があるもの。 - **このライブラリを選ぶ**のは、その「カルーセル」が YouTube 風のチップバーや Netflix 風のカテゴリー行であるとき。約 34 kB 少なくネイティブスクロールが得られ、さらに項目ごとの `useIsVisible` があります——Swiper はスライドが項目ではないため、これをモデル化しません。 ## vs Embla Embla は美しい物理と第一級の React アダプターを備えたヘッドレスカルーセルエンジンです。shadcn/ui がカルーセルを構築している土台であり、本物のカルーセルを完全に視覚的に制御したいときの正しいデフォルトです。ヘッドレスであることはメニューにとって両刃です。選択時のスクロールイン、項目ごとの可視性、矢印の無効化、フォーカス管理は、すべて自分で組み立てることになります。 - **Embla を選ぶ**のは、カスタムデザインのカルーセルと、小サイズのスナップ物理。 - **このライブラリを選ぶ**のは、その自作部分こそが要点であるとき。`scrollToItem`、`useIsVisible`、first/last の矢印状態、`apiRef` が動作済みで同梱されています。 ## vs keen-slider keen-slider は軽量でフレームワーク非依存のスライダーエンジンです。フレームワークをまたいで 1 つの依存で済ませたいときの、最小限のカスタムスライダーとして良い選択です。他のライブラリと同様、トランスフォームでジェスチャーレイヤーを自前で持ち、API はスライドインデックスを中心に設計されています。スライドには向いていますが、「選択したチップをスクロールして表示し、何が見えているかを教えて」には不格好です。 ## vs react-slick react-slick は jQuery 時代の slick カルーセルを React に移植したものです。今でも動きますが、別の CSS ファイルを引き込み、アーキテクチャは hooks より前のもので、メンテナンスもまばらです。離脱するチームはおおむね 2 つの陣営に分かれます。本物のカルーセル（Embla か Swiper へ）と、slick が既に入っていたために `centerMode` に曲げられてしまったナビゲーション行です。後者の陣営こそがこのライブラリのまさに形です。[中央揃えの選択](https://react-horizontal-scrolling-menu.dev/ja/examples/center-on-click.md)、[1 項目ずつの送り](https://react-horizontal-scrolling-menu.dev/ja/examples/one-item-scroll.md)、[ドラッグでスクロール](https://react-horizontal-scrolling-menu.dev/ja/examples/mouse-drag.md) を、スライダーエンジンなしで。 ## メニュー側はどんな見た目か このサイトのすべてのパターンはライブでサーバーレンダリングされ、それぞれ完全なソースが付属します。[スクロール可能なタブ](https://react-horizontal-scrolling-menu.dev/ja/examples/center-on-click.md)、[フィルターチップ](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)、そして——カルーセルエンジンが必要だと思われがちな 2 つの機能——[無限ループ](https://react-horizontal-scrolling-menu.dev/ja/examples/infinite-loop.md) と [自動再生](https://react-horizontal-scrolling-menu.dev/ja/examples/autoplay.md) は、それぞれ公開 API 上で約 60 行です。 - min+gzip 5.7 kB、TypeScript ファースト、MIT、月間約 34.7 万ダウンロード、2018 年から保守、React 16.8–19 で 1 つの安定した API。 - SSR フレンドリー：JavaScript がハイドレートする前からこの行はスクロールできます——このページと、このサイトのすべてのデモがその証明です。 [すべての例を見る](https://react-horizontal-scrolling-menu.dev/ja/examples.md) · [Storybook で試す](https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/?path=/story/examples-simple--simple) [GitHub](https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu) --- More examples: Library summary for LLMs: