技術選定しよう！
技術選定は、重要で大変な作業ですよね。
適切な技術を選ぶためには、候補をしっかりとリストアップし、それらを比較し根拠を持って判断することが欠かせません。
そこでこの記事では、技術選定を行う際のポイントや役立つ情報について紹介しています。
それにより、担当システムに最適な選択肢を見つける手助けとなるでしょう。
ぜひこの記事を参考にして、より適切な技術選定ができるようにしてください！
今回選定する技術
今回選定するのは
「スライダー」 です！
カルーセル機能とも呼ばれています。
ZOZOTOWNなどのECサイトにも使われている主要な機能です。
候補一覧
検索でよくヒットする下記3つのライブラリをピックアップしました！
比較しよう！
対応フレームワーク （ライブラリ）
| React | Vue.js | Svelte | WebComponents | |
|---|---|---|---|---|
| swipe | ○ | ○ | × | ○ |
| react-slick | ○ | × | × | × |
| splide | ○ | ○ | ○ | × |
ダウンロード数
npm trendsによると、
現時点（2024年7月現在）でのダウンロード数は下記の順番となっています。
対応フレームワークの差異による影響はあると思いますが、swiperが圧倒的に人気です。
| ライブラリ名 | |
|---|---|
| 1 | swiper |
| 2 | react-slick |
| 3 | splide |
スター数
同じくnpm trendsによると、スター数は下記の順番となっています。
| ライブラリ名 | |
|---|---|
| 1 | swiper |
| 2 | react-slick |
| 3 | splide |
バージョン更新
splideの最終更新は2年前と久しく更新されておりません。
一方で、swiperはちょうど2日前（2024年7月現在）に更新されておりました。
ここ1年を通しても1~2ヶ月ごとに更新されており、定期的にメンテナンスされているようです。
react-slickに関しては不定期ではありますが、ここ1年を通して3回更新されております。
特徴を知ろう！
swiper
豊富なオプションが用意されており カスタマイズ性 が高い !
- トランジション効果や複数行スライドなど様々なオプションあり
- 公式Webページにデモレイアウトとサンプルコードあり
日本語 の記事が豊富 !
- 利用者が多いこともあり、日本語の記事やドキュメントが豊富
react-slick
人気の高い slick のReact版 !
- jQeryのプラグインであるslickをReactでも使用できるようモジュール化
splide
ゼロ依存のうえ 超軽量 !
- 29 KB（gzipで 12 KB）と軽量で、外部依存性はなし
まとめ
各ライブラリの特性を把握していただけましたでしょうか。
さらに、それぞれの公式Webページにはサンプルもご用意されていますので、実際に手を動かしてUI/UXを評価することもおすすめします！
要件やユースケースによって最適な選択肢は異なるかもしれませんが、この記事が技術選定の参考になれば幸いです。
最後に私が選定したライブラリを紹介し、ここで本記事を締めくくります。
筆者が選定したライブラリ
ライブラリ
- splide
ユースケース
- 画像のスライダー機能を実装する
選定理由
- 今回のユースケースはどのライブラリでもあまり差異がなさそうだったので、最も軽量であるライブラリを選定
所感
- ストレスフリーな操作感
- スライドする際のカクツキなど、パフォーマンスの点も特に気になりませんでした
- オプションが十分豊富な印象
- スライダーのテーマや1画面に表示する画像の枚数などいくつかのオプションが用意されいます
- webページのガイドがわかりやすい
- 日本語対応されている上、各オプションや機能のサンプルが用意されているためわかりやすかったです