Embla vs Swiper：作るものに合わせて選ぶ
どちらも優れた、活発にメンテナンスされているカルーセルエンジンで、両者の選択は本当に僅差です。結局は 1 つの軸に集約されます：Swiper はあらゆる機能を最初から搭載し、Embla はその上に自分で組み立てる小さなヘッドレスエンジンを提供します。このページは、どちらとも競合しないライブラリのメンテナーが書いています — それは、実はカルーセルではなかったと判明したビルド向けの、下部にある第三の答えでもあります。
| Embla | Swiper | |
|---|---|---|
| それは何か | ヘッドレスカルーセルエンジン | フル装備のスライダー/カルーセルフレームワーク |
| バンドルサイズ（コア、min+gzip） | ≈8 kB | ≈40 kB（モジュールに応じて増加） |
| スタイリングとマークアップ | 完全にあなた次第 — 何も同梱されません | 独自の DOM 構造と CSS、テーマ対応 |
| エフェクト（フェード、キューブ、カバーフローなど） | コミュニティプラグイン、または自作 | 組み込み済み、成熟 |
| オートプレイ、ページネーション、サムネイル | 公式プラグイン | 組み込みモジュール |
| React との統合 | ファーストクラスのフック（useEmblaCarousel） | バニラコアをラップしたコンポーネント |
| エコシステムに関する補足 | shadcn/ui のカルーセルの内部エンジン | ウェブで最も使われているスライダー |
| 向いている用途 | カスタムデザインのカルーセル、デザインシステム | 画像中心のスライダー、機能豊富なギャラリー |
バンドルサイズはおおよそのコアサイズです — 最新の数値は bundlephobia で確認してください。Swiper はインポートするモジュールに応じて増加します。
デザインの制御が重要なら Embla を選ぶ
Embla が提供するのはスナップの物理演算、ドラッグ処理、スライドモデルだけ — マークアップも CSS も矢印もありません。それこそが強みです：デザインシステムの中では、見えるものすべてがあなたのもので、エンジンがあなたのスタイルと衝突することはありません。shadcn/ui がカルーセルの土台に使っているのも Embla で、そこから最適な使いどころが見えてきます：カルーセルライブラリではなく自分たちのプロダクトのように見せたいチームです。
その代償は、スライド以外のあらゆる機能がアドオンか自作になることです：オートプレイとクラス名は公式プラグインで、ページネーションのドット、サムネイル、エフェクトは自分で書く必要があります。
機能がそろった状態が欲しいなら Swiper を選ぶ
Swiper はフル装備の答えです：フェード、キューブ、カバーフローのエフェクト、仮想スライド、ズーム、パララックス、サムネイルギャラリー、a11y モジュール、複数スタイルのページネーション — すべて自分で作るのではなく設定するだけです。今四半期にそのうち 3 つが必要なら、Swiper のサイズはそれだけの価値を何度も生みます。
その代償は Embla の逆です：Swiper の DOM、テーマ対応が必要な CSS、React 用にラップされたバニラ JS のコアを引き継ぐことになります — キロバイトの面でも表面積の面でも重くなります。
どちらを選ぶ前にも問うべきこと
どちらのライブラリも、あなたがスライドを見せていることを前提としています — 一度に 1 つ、あるいは 1 ページ分のものを、スナップと位置感覚とともに。実際の「カルーセル」の多くはそれとはまったく違います：カテゴリー行、ロゴの帯、タブバー、チップフィルター — ユーザーが眺めて選ぶ、クリック可能なアイテムの行です。それらが欲しいのはネイティブスクロール（慣性、スクロールバー、ホイール、アクセシビリティが無料で手に入る）と、どのアイテムが画面内にあるかを知ることであり、Embla も Swiper もアイテムごとの可視性はモデル化していません — スライドはアイテムではないからです。
この形には第三の選択肢があります：react-horizontal-scrolling-menu（≈5.7 kB）はネイティブスクロールに乗り、useIsVisible、scrollToItem、そしてエッジ対応の矢印を提供します。Netflix 風の行、タブの帯、チップバー として見てみるか、両者との 完全な比較表 をご覧ください。