react-slick の代替：何を作ったかで移行先を決める
react-slick は jQuery 時代の slick カルーセルを React に移植したものです。今も動作しますが、アーキテクチャはフック以前のもので、リリースはまばらで、ビルドのたびに別の CSS ファイルを引きずり込みます。適切な代替は機能よりも、あなたの使い方が 2 つの陣営のどちらに属するかで決まります。
| react-slick | Embla | Swiper | react-horizontal-scrolling-menu | |
|---|---|---|---|---|
| それは何か | jQuery slick の React 移植版 | ヘッドレスカルーセルエンジン | フル装備のスライダーフレームワーク | スクロールメニュー、ネイティブスクロール |
| メンテナンス状況 | まばら | 活発 | 活発 | 2018 年から活発 |
| バンドルサイズ（min+gzip） | ≈15 kB + slick CSS | ≈8 kB | ≈40 kB | ≈5.7 kB |
| 追加の CSS ファイルが必要か | はい（2 つ） | いいえ | はい（コア） | 1 つ、または shadcn アイテム経由の Tailwind |
| スライドのセマンティクス（スナップ、ドット、フェード） | あり | あり | あり | なし — 意図的に |
| クリック可能なアイテムの行 | centerMode で無理やり実現 | エンジンの上に自作 | 本来の用途に逆らって設定 | 中心となるユースケース |
サイズはおおよそのコアサイズです。最後の列はこのサイト自身のライブラリです — 表はそれを隠さずそのまま示しています。
陣営 1：本物のカルーセルだった場合
ヒーロースライダー、画像ギャラリー、証言のローテーション — slick のドット、フェード、オートプレイがデザインを支えていたものすべて。本物のカルーセルエンジンへ移行しましょう：
- すべてを自分でスタイリングし、小さなヘッドレスコアが欲しいなら Embla — 精神的には「モダン化された slick」に最も近い存在です。
- slick の機能リストを多用していたなら Swiper — slick のすべての機能には Swiper の対応物があり、たいてい優れています。
slidesToShow/slidesToScroll を Embla の slidesInView/slidesToScroll や Swiper の slidesPerView/slidesPerGroup にマッピングし、矢印位置調整用の CSS 上書きは削除することになるでしょう — どちらの後継ライブラリも、自分のボタンをレンダリングできます。
陣営 2：centerMode をまとったナビゲーションだった場合
もう一つの slick の使われ方は、目立たない方です：カテゴリー、ロゴ、日付、フィルターの行を、slick がすでにバンドルに入っていたという理由だけで centerMode、focusOnSelect、variableWidth を使ってカルーセルに無理やり押し込んだものです。その兆候は、あなたが何と格闘してきたかに表れます：ドラッグの後にクリックが発火する、矢印が変なタイミングで出る、計測できないアイテム、望んでいなかったスナップ。
その行はメニューだったのです。react-horizontal-scrolling-menu は、centerMode が偽装していた 3 つのこと — クリックされたアイテムを中央に置く、ドラッグ対応 でネイティブにスクロールする、どのアイテムが見えているかを報告する — を、スライダーエンジンなしの ≈5.7 kB で行います。この 2 つの最も一般的な形については スクロール可能なタブ と カテゴリーレール のページをご覧ください。
どちらの陣営でも：移行は見た目より小さい
slick の API 表面積は大きく見えますが、実際の設定を監査するとすぐに小さくなります：ほとんどのプロジェクトは一握りの props しか使っていません。実際に設定しているものを書き出し、それぞれの使い方がどちらの陣営に属するかを判断し、インスタンスごとに移行しましょう — 2 つの陣営が同じコードベースに共存することはよくあり、両方が同じライブラリに着地しなければならない決まりはありません。