Next.js(React)に最軽量＆高機能スライダープラグインSplideを導入してみる

スライダープラグインは何を使うべきか

フロントエンドエンジニアのおとのです🙆‍♂️

Webサイトに以下のようなスライダーを埋め込む際、Web制作のコーダーやマークアップエンジニア、フロントエンドエンジニアは外部プラグインを利用して実装することが多いかと思われます。

jQueryが全盛期だった時には、Slickが多く利用されていた印象です。あらゆるオプションが用意されており、さまざまなカスタマイズが可能で、私もよく使ってきました。

また、IEのサポートが終了してからSwiperが利用されるようになった印象があります。こちらも複数のオプションがあり、比較的モダンなCSS（flex等）が組み込まれていることから、slickよりもカスタマイズが容易であるように思えます。jQueryに依存していないのも大きなメリットですね。

今までのスライダープラグインの問題

ただ、スライダープラグインは決して容量が軽いものではありません。Core Web VitalsをチェックできるPageSpeed Insights（Lighthouse）でも、要改善項目と指摘されることが多いです。

近年ではCSSアニメーションを使ったスライダーの実装も少しずつ増えてきた印象ですが、クライアントが要求するような動きや機能をCSSだけで実現するのは未だ難しく、JSで自作するのも工数がかかることから、外部のスライダープラグインを導入するのは自然の流れだと思います。

アクセシビリティに配慮した軽量・高機能スライダーSplide

今回は、軽量かつ高機能、アクセシビリティまで配慮したスライダーを実装できるSplide（MITライセンス）を紹介します。

2022年時点で、Slickは約53KB（+jQuery約90KB）、swiperは約144KBですが、Splideに関しては約32KBと非常に軽量で、他ライブラリに依存関係がないことも大きな強みです。

https://ja.splidejs.com/

スライダーアイテム間の操作がキーボードで操作可能なことや、DOMの動的な変更をスクリーンリーダーに読み込ませるライブリーバージョン等が標準搭載されており、アクセシビリティが非常に考慮されています。

おまけに高機能であることから、現在、月間3億以上ヒットするライブラリにまで成長しており、更新も活発に行われているため、信頼して利用できます。

今、もっとも熱いスライダープラグインかもしれません・・・！

セットアップ

実際にSplideをNext.js（React+TypeScript）アプリケーションで導入していこうと思います。

Reactに対応したSplideをインストール

以下コマンドを実行し、Reactに対応したSplideをインストールしてください。

yarn add @splidejs/react-splide

※ 2022年10月時点の最新Verを参照しています。
https://ja.splidejs.com/guides/version4/

Splideでスライダーを実装する

実際にスライダーを埋め込むコンポーネントとして、今回はslider.tsxを作成します。

src/components/molecules/Slider/Slider.tsx

import { Splide, SplideSlide } from "@splidejs/react-splide";
import '@splidejs/splide/css'; // デフォルトのテーマを読み込んでいます（コアスタイルのみ読み込む設定も可能）

export const Slider = () => {
  return (
    <>
      <Splide
        aria-label="私のお気に入りの画像集"
        options={{
          autoplay: true, // 自動再生を有効
          interval: 3000, // 自動再生の間隔を3秒に設定
        }}
      >
        <SplideSlide>
          <img className="slide-img" src="https://www.pakutaso.com/shared/img/thumb/shikun20220402_114719-2_TP_V.jpg" alt="かわいい猫の画像 part1" />
        </SplideSlide>
        <SplideSlide>
          <img className="slide-img" src="https://www.pakutaso.com/shared/img/thumb/shikun20220402_122123_TP_V.jpg" alt="かわいい猫の画像 part2" />
        </SplideSlide>
        <SplideSlide>
          <img className="slide-img" src="https://www.pakutaso.com/shared/img/thumb/sikun_20220402-180657-2_TP_V.jpg" alt="かわいい猫の画像 part3" />
        </SplideSlide>
      </Splide>

      {/* 画像の高さを揃えて表示させるために以下スタイルを適用 */}
      <style jsx>{`
        .slide-img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      `}</style>
    <>
  );
};

上記のSliderコンポーネントをページで読み込んで画面で表示すると、以下の動きが確認できているはず。以下gifは若干もっさりしてますが、実際に画面で見てもらうとスライダーが綺麗に動いていることが確認できるはずです。

※高さの違う画像をスライダーで読み込む場合、画像によっては下に余白が表示されてしまうことがあるため、今回はstyled-jsxでスタイルを調整しています。お好きなCSSライブラリを使って調整してください。

今回は自動再生のオプションを設定していますが、他にもさまざまなオプションが用意されており、矢印や再生ボタン、プログレスバー等の実装も容易なことから、Splideはカスタマイズ性が非常に高いことが伺えます。

オプションの設定等は以下の記事を参考にさせていただきました。
https://on-ze.com/archives/9112

今回は以上になります。

ここまで読んでいただき、ありがとうございます🙏