jQuery SlickからReact Slickに移行作業をしたので改めて整理する

こんにちは、デザイン事業部の長谷です。今回は最近jQueryからReact Slickに移行作業をしたので、その体験を踏まえたReact Slickについての記事になります。

目次

• React Slick とは
• React Slick のクイックスタートと基本的な使い方
• jQuery Slick から React Slick への移行
  • 移行の検討ポイント
  • 設定の対応関係
  • 実装例の比較
  • ul/li 構造の差分と対処（dots の UL とスライド用 UL）
  • 移行時の注意点（CSS・SSR）
• ハイブリッド環境のトラブルシュート（PHP×React）
• React Slick を使用する際の注意点
• 実装例集
  • 基本的なスライドショー
  • レスポンシブ対応
  • カスタム矢印／ドット（フォント非依存）
• まとめ
• おまけ・他ライブラリの検討

React Slick とは

jQueryからReactへの移行で、スライダーの実装に悩んでいませんか？

従来のjQuery Slickに慣れ親しんだ開発者にとって、React環境でスライダーを実装する際に「使い慣れた機能はそのまま使えるのか？」「設定方法は大きく変わるのか？」といった疑問が生まれるのは自然なことです。

React Slickは、jQuery Slick の機能を React エコシステムに移植したスライドショー/カルーセルライブラリです。元の jQuery Slick と同様の豊富な機能とオプションを提供しつつ、React の宣言的な開発スタイルに適合します。

主な特徴

• 豊富なオプション: 100+ の設定
• レスポンシブ対応: ブレークポイント別の設定
• アクセシビリティ: 基本的な WAI-ARIA 対応
• カスタマイズ性: CSS/JS で柔軟に拡張
• 軽量: 約 14.5KB（gzip 後）

React Slick のクイックスタートと基本的な使い方

0. インストール

npm install react-slick slick-carousel
# または
yarn add react-slick slick-carousel

slick-carousel は CSS とフォント（テーマ用アイコン）のために必要です。react-slick はコンポーネント本体を提供します。

1. 基本的なセットアップ

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

function SimpleSlider() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  return ();
}
export default SimpleSlider;

2. よく使うオプション

const settings = {
  // よく上書きする値
  dots: true,
  speed: 500,
  slidesToShow: 3,

  // 既定値に近いもの
  infinite: true, // 既定: true
  slidesToScroll: 1, // 既定: 1

  // 追加機能
  autoplay: true,
  autoplaySpeed: 2000,
  pauseOnHover: true,

  responsive: [
    { breakpoint: 1024, settings: { slidesToShow: 2 } },
    { breakpoint: 600, settings: { slidesToShow: 1 } },
  ],
};

既定値メモ：dots=false / infinite=true / speed=300 / slidesToShow=1 / slidesToScroll=1。

jQuery Slick から React Slick への移行

「既存の jQuery Slick を React でも使い続けたい」──そんなケース向けに、観点ごとに整理します。

移行の検討ポイント

• React へ移行中: 既存の Slick 設定資産を活かす。
• コンポーネント化: 再利用・props での動的設定。
• 状態管理との統合: useState/useEffect 等と素直に連携。

※ 一部の周辺プラグインや高度なカスタムは移植コストが高い場合があります。React 18 互換性は要検証。

設定の対応関係

jQuery Slick

$(".slider").slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true,
  autoplay: true,
  autoplaySpeed: 2000,
  responsive: [{ breakpoint: 768, settings: { slidesToShow: 1, slidesToScroll: 1 } }],
});

React Slick

const settings = {
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true,
  autoplay: true,
  autoplaySpeed: 2000,
  responsive: [{ breakpoint: 768, settings: { slidesToShow: 1, slidesToScroll: 1 } }],
};
{/* slides */}

オプションの互換性は高い。差は「初期化方法（命令的→宣言的）」と内部 DOM 構造。

実装例の比較（動的データ）

jQuery Slick は HTML 文字列生成＋再初期化が必要になりがち。

React Slickは宣言的な更新で再初期化不要、保守性が向上。

function DynamicSlider({ slides }) {
  const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 };
  return (

    {slides.map(s => (
      <div>

        <img src="{s.image}" alt="{s.title}" />
        <h3>{s.title}</h3>
      </div>
    ))}

  );
}

ul/li 構造の差分と対処（dots の UL とスライド用 UL）

• jQuery Slick では ul > li をスライドとして使う実装が一般的。
• React Slick の内部構造は div.slick-list > div.slick-track > (children)。
• li を children にしても親に ul が無いため、セマンティクスが崩れたり、既存 CSS が効かないことがあります。

A. dots（ページネーション）の ul を固定

.my-slider .slick-dots {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  margin: 12px 0 0; padding: 0; height: auto; line-height: 1;
}
.my-slider .slick-dots li { list-style: none; margin: 0; padding: 0; }
.my-slider .slick-dots li button { width: 12px; height: 12px; padding: 0; border: 0; background: transparent; }
.my-slider .slick-dots li button:before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: #a9a9a9; }
.my-slider .slick-dots li.slick-active button:before { background: #333; }

B. スライド用 ul 前提の CSS を移植

/* 旧 CSS の幅指定や flex 指定を打ち消し、Slick の計算を優先 */
.my-slider .slick-slide { box-sizing: border-box; flex: none !important; width: auto !important; max-width: none !important; }
/* 余白は slide 側の margin と list 側の相殺で管理 */
.my-slider .slick-slide { margin: 0 8px; }
.my-slider .slick-list { margin: 0 -8px; }
/* 画像のベースライン余白対策 */
.my-slider .slick-slide img { display: block; max-width: 100%; height: auto; }

列数は slidesToShow で管理。コンテンツ幅優先なら variableWidth:true を使い、各スライド要素に明示幅を付与。

C. セマンティクスの推奨

{items.map(i => (
  <div role="listitem">{/* ... */}</div>
))}

ul/li を維持したい場合は、汎用 ul/li セレクタではなく、.slick-slide/.slick-list/.slick-track へスタイルを移す。

移行時の注意点（CSS・SSR）

• CSS の流用: クラス互換は高いが、Reset/テーマフォント/相対パスで崩れることがある。
• SSR（Next.js など）: クライアント側のみでレンダリング。

import dynamic from "next/dynamic";
const Slider = dynamic(() => import("react-slick"), { ssr: false });

React 18 互換性: 既知の差分があるため検証を推奨。

ハイブリッド環境のトラブルシュート（PHP×React）

• 読み込みを一本化: slick.css/slick-theme.css は PHP 側の か React 側の import のどちらか片方で。
• テーマフォント依存を削減: 矢印/ドットは CSS or SVG で自前描画（相対パス問題を回避）。
• 初期化タイミング: 非表示タブで初期化すると幅0計算→表示後に resize を発火 or 条件レンダリング。
• 競合を避ける: 旧 ul > li 前提 CSS を .slick-* クラスへ移植。ラッパー（例 .my-slider）でスコープ化。

React Slick を使用する際の注意点

1. SSR: クライアント限定でレンダリング。
2. メンテナンス頻度: ライブラリ更新は緩やか。長期案件では代替検討も。
3. パフォーマンス: useMemo、画像 loading="lazy"、遅延読み込みなどを組み合わせる。
4. アクセシビリティ: キーボード操作・ラベル設定、pauseOnFocus:true の活用。

実装例集

基本的なスライドショー

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

function BasicSlider({ slides }) {
  const settings = {
    dots: true,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 3000,
    pauseOnHover: true,
  };
  return (
    {slides.map(slide => (

    ))}
  );
}

レスポンシブ対応

const settings = {
  slidesToShow: 4,
  responsive: [
    { breakpoint: 1024, settings: { slidesToShow: 3 } },
    { breakpoint: 768, settings: { slidesToShow: 2 } },
    { breakpoint: 480, settings: { slidesToShow: 1 } },
  ],
};

カスタム矢印／ドット（フォント非依存）

const Arrow = ({ className, onClick, dir }) => (
);
const settings = { prevArrow: , nextArrow:  };

.my-arrow {
  background: rgba(0,0,0,.05);
  border: 0;
  border-radius: 9999px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.slick-prev:before, .slick-next:before { content: none !important; }

まとめ

今回の記事はここまでになります。

• jQuery Slick の知見を大きく活かしつつ、React では宣言的に安全に構築できる。
• ul/li 前提の CSS は .slick-* へ移植、テーマフォント依存を削減すると安定。
• SSR・パフォーマンス・アクセシビリティを最初から設計に入れると後戻りが少ない。

時間と要件によっては Swiper などの採用も有力。メンテナンス頻度やプラグイン生態系、SSR との相性、TypeScript サポート等を比較した上で選定する。要件が限定的なら、自作の軽量スライダーで最小機能に絞るのも1つの選択肢かなと思います。