Splideをスライダーの新たな定番としたく

# はじめに

Webページ制作において、スライダーの登場頻度は異常に高いですよね。
cssでanimationプロパティを書くより、スライダーを実装する方が多いまであります。

その上、地味に仕様決めをちゃんとしておかないと、後であーだこーだなって実装コストが高くなることも往々にしてあるかと思います。

そのため、大体の仕様を満たすことができるようにライブラリを使って実装している方がほとんどかと思います。

そして、そのスライダーライブラリのデファクトスタンダードとなっているのが、[**slick**](https://kenwheeler.github.io/slick/)と[**Swiper**](https://swiperjs.com/)でしょう。

https://kenwheeler.github.io/slick/

https://swiperjs.com/

---

そこに第三の選択肢として、[**Splide**](https://ja.splidejs.com/)**を推したい**のです。

https://ja.splidejs.com/

Qiitaで「Splide」と検索しても意外と記事がなかったので、おすすめポイントをまとめてみたいと思います。

# Splideとは

Splideは、MITライセンス下でリリースされたアクセシビリティに配慮された軽量で高機能なスライダーライブラリです。

:::note warn
記事執筆時のバージョン：4.0.0
:::

## 特長

### 1. アクセシビリティに考慮

SplideのHPではa11yが前面に押し出されてる印象を受けるため、かなりこだわって作られていることが推察できます。

Splideでは、W3C[^1] WAI内で示されている[Carousels Tutorial](https://www.w3.org/WAI/tutorials/carousels/)に沿ってアクセシビリティの向上が図られています。

スライダー自体がユーザビリティ低下問題で議論がなされていますが、アクセシビリティを高めることでユーザビリティが高まるとされ、以下の4つを満たすことでアクセシブルなスライダーを実装できるとしています。

[^1]:Web技術の標準化を行う非営利団体

- カルーセルの動きが速すぎたり、文字が読みにくくて気が散ることがあるため、ユーザーが一時停止できるようにする
- カルーセルのアイテム間の移動を含むすべての機能は、キーボードで操作できる
- カルーセルの項目の変更を、スクリーンリーダー利用者を含むすべての利用者に通知する
- キーボードでのフォーカス操作が合理的かつ理解しやすい方法で管理されている

> - Users must be able to pause carousel movement because it can be too fast or distracting, making text hard to read.
> - All functionality, including navigating between carousel items, must be operable by keyboard.
> - Changes to carousel items must be communicated to all users, including screen reader users.
> - The keyboard position (“focus”) is managed in a reasonable and comprehensible fashion.
> 
> What makes a carousel accessible? 原文ママ

Splideではこれらを満たすように設計されていますが、唯一「アクティブスライドの通知」は未対応です。
これは「いちいちスクリーンリーダが読み上げるのはうるさい（特に自動再生時）」という理由によるもので、拡張機能を実装することで対応することができるようになっています。

また、**ライブリージョン**が標準搭載されています。

ライブリージョンとは、DOMが動的に変更される箇所をスクリーンリーダなどの支援技術に伝えることができる領域のことです。
これによって、スライドした後の要素も支援技術が認識することが出来るようになります。

ここに記載したのはごく一部です。
[こちら](https://ja.splidejs.com/guides/accessibility/)でぜひ詳細をご確認ください。Splideくん、凄すぎる。

https://ja.splidejs.com/guides/accessibility/

### 2. 他ライブラリに依存なし

slickはjQuery依存ですが、Splideは他ライブラリに依存しません。

### 3. 軽量

minifyされたJavaScriptは**~~27KB~~ 29KB**で、CoreCSSを合わせても~~30KB~~ 32KBと軽量です。(v4アップデートにより2KB増加)


Swiperはバンドル版で**139KB**、slickは**43KB**(+jQuery)で、この中では最軽量です。

### 4. 相対単位に対応

`%`や`rem`という相対単位に対応しています。

slickは`px`、`%`、Swiperは`px`に対応しています。

### 5. 多くのメソッド・イベントに対応

Swiperに存在する多くのメソッド・イベントはSplideにもほぼ存在します。

```js:スライダーの状態取得
const splide = new Splide('.splide');

if (splide.state.is(Splide.STATES.IDLE)) {
  // 何かの処理
}
```

```js:スライダーの同期
const primary = new Splide('#primary');
const secondary = new Splide('#secondary');

primary.sync(secondary);
primary.mount();
secondary.mount();
```

```js:スライドの移動
const splide = new Splide('.splide');
splide.mount();

// スライド1に移動:
splide.go(1);

// 現インデックスに2足したスライドに移動:
splide.go('+2');

// 次のページに移動:
splide.go('>');

// ページ2に移動:
splide.go('>2');
```

```js:スライドが終了したときに何かを行う
const splide = new Splide('.splide').mount();

splide.on('move', function() {
  // 何かの処理
} );
```


### 6. ドキュメントが日本語対応

本ライブラリの開発者は日本人の方なので、ドキュメントが日本語完全対応です。
英語アレルギーがある方も抵抗なく学習できると思います。

slickは割と個人サイトなどで解説されていたりするので良いですが、SwiperのAPIドキュメントはフル英語なので、欲しい機能を探すときに敷居が高く感じてしまう方も多くいらっしゃったと思います。
その点Splideは詳しい説明も日本語なので嬉しいですね。

## slick / SwiperにあってSplideに無いもの

それでは、逆に他ライブラリにあってSplideには無いもの、つまり他と比較したときの短所を探してみます。

まず、slickと比べてですが、恐らくslickにあるものはSplideにあります。

次にSwiperですが、主に**演出の手軽さ**でSwiperに軍配が上がりそうです。
Splideになさそうな機能は以下の通りです。

- トランジション
  - [キューブ](https://swiperjs.com/swiper-api#cube-effect)
  - [カバーフロー](https://swiperjs.com/swiper-api#coverflow-effect)
  - [カード](https://swiperjs.com/swiper-api#cards-effect)
  - [クリエイティブ](https://swiperjs.com/swiper-api#creative-effect)
- [パララックス](https://swiperjs.com/swiper-api#parallax)
- [ハッシュナビ](https://swiperjs.com/swiper-api#hash-navigation)
- [履歴ナビ](https://swiperjs.com/swiper-api#history-navigation)

### 第三勢力 keen-sliderはまた志向が違う

https://keen-slider.io/

最近keen-sliderというライブラリを耳にすることがあります。

こちらも軽量スライダーライブラリ(14KB)で、依存なし、モバイルフレンドリーですが、カスタマイズが前提のライブラリです。
コアライブラリを用いることでこんな感じのいろいろなものが作れるよーと、[Examples](https://keen-slider.io/examples)に様々な作例があります。

軽量さではこちらの方が上ですが、a11yについては際立った記載がなく、個人的にはその点でこのライブラリを用いる理由がなく、故に今回は比較対象とはしませんでした。

# Splideを推す理由

## 導入・実装の手軽さ

導入はnpm、CDN、ホスティングから選択でき、実装時も他のライブラリと遜色ありません。

```js
// slick
$('.slick').slick();

// Swiper
new Swiper('.swiper');

// Splide
new Splide('.splide').mount();
```

## 軽量

ひとつのWebサイトでいろいろなライブラリを用いることは珍しくありません。
そのため、ひとつひとつのライブラリが軽いことに越したことはありません。

## アクセシビリティへの意識の高さ

前述の通り、W3Cの指針に沿っており、バージョン3へのアップデート時もアクセシビリティ向上を一つの目標として制作されており、今後もa11y対応が続いていくことが期待されます。

## slickに取って代わる

[GitHubのmasterブランチ](https://github.com/kenwheeler/slick/tree/master)を見ると、slickの最終更新はVer1.8.0の2022年3月現在から見て約4年前の2017年9月12日となっています。

1.9.0がrevertされているようで、npmでは1.8.1が最終バージョンとなっており、それにしても4年前の2017年10月3日なので移り変わりが激しいWeb界隈では太古と言っても過言ではないのではないでしょうか。（その分完成されているとも言えるのかもしれませんが）

「*手軽さ*」という利点でslickが長らく使われてきたように思います。

その背景にはjQueryが普及していた当時の状況も根強く関係しているのでしょう。
今となっては「脱jQuery」などと毛嫌いされることも珍しくはありません。

手軽さ、a11yの観点から、Splideはslickに取って代わる存在なのではと感じています。

# Splideの選定基準

以上、いろいろ書き連ねてまいりましたが、実際にスライダーを実装するときにはどのようにライブラリを選定するか**私の考え**を示します。

まず、**slickは選択肢に入ることはもうない**でしょう。
jQueryが既にプロジェクトに組み込まれていたとしても、ファイルサイズがSplideの方が小さく済むためです。

続いて、SwiperかSplideかですが、特別な理由がない限り**Swiperも選びません**。
どちらも同じような機能を備えていますし、a11yも考慮されているため、あとは軽量さと相対単位が使えるという点が魅力なのでSplideを使用します。

前述の通り、Swiperは最初から使える機能がSplideより多い印象です。その**機能を手軽に利用したいとき**に選択肢に入りそうです。

# まとめ

ここまで全力でSplideを推してまいりました。

:::note
Splideは他ライブラリに依存しないa11y対応されている・軽量・高機能な不足のないスライダーである！
:::

Splideは、今のところ第一候補として積極的に使っていきたいスライダーです。

使っていく中で、実はここはSwiperの方がいいかもという面が見えてくるかもしれませんので、その際はまた追記していきます。

ぜひ皆さんも候補に入れてみませんか？:relaxed: