既存のモノから考えるJavaScript 〜カルーセルスライダー編〜

普段コーディングをするエンジニアは必ず使ったことがあるであろう「カルーセルスライダー」。
そのほとんどは便利なプラグインにお世話になっていると思います。
有名どころだと、Slick、bxSlider、Swiperなどなど他にも数え切れません。

このブログでは、既に完成されているプラグイン参考に、一部機能の仕組みを考えてみます。
とういうことで今回は「カルーセルスライダー編」になります。

前提条件

• 3つで1グループのスライダーがあります
• 前後のグループに移動する時は、3つまとめて移動
• 任意のグループに移動する場合は、グループの1つ目のアイテム番号を指定します

↓文中に出てくる語句
※アイテム = スライダー1つ1つ
※アイテム番号 = アイテム1つ1つに割り振る連番（0から始まる）
※グループ番号 = グループ1つ1つに割り振る連番（0から始まる）

11アイテムある場合、下記の問に答えよ。
スライダーイメージ -> |||　|||　|||　||

とういうことで…

いきなりですが問題です

0.最初のアイテム番号の値は？計算せよ！

1.グループはいくつ作れるか？計算せよ！

2.最初と最後のグループ番号の値は？計算せよ！

3.グループ番号2の最初のアイテム番号は？計算せよ！

4.最後のグループに移動したい！どのアイテム番号を指定するといい？

前提条件に注意しながらして考えてみてください

最初のアイテム番号の値は？計算せよ！

解答. 0

前提条件にも書いてある通り、0です。
簡単すぎて1と予想した方もいると思いますが、Javascriptでは配列の最初は0であり他のプログラム言語でもその場合が多いです。
調べたところ1から始まる言語もあるようです。

const fruit = ['みかん', 'デコポン', 'オレンジ', '晩白柚']

この場合、fruit[0]は「みかん」ですね！
次行きましょう！

グループはいくつ作れるか？計算せよ！

解答. 4つ
簡易図. |||　|||　|||　||

前提条件から、11アイテム、1グループ3アイテムなので、
アイテム全て（11アイテム）を1グループにできる数（3アイテム）で割ると計算できますね。

11 ÷ 3 = 3 … 2

正確には余りがでますが、割り切れない場合は余りも1つのグループです。
切り上げて計算します。

まだまだ簡単ですよね？
少しずつ計算が複雑になります。

最初と最後のグループ番号の値は？計算せよ！

解答. 最初：0, 最後：3
簡易図. |||　|||　|||　||（左から0 -> 3）

前提条件があるので、考えるだけであれば簡単です。

これをJavascript的に計算すると下記のようになります。
※変数 lastGroup が結果です

const items = ['スライド1', 'スライド2', 'スライド3', 'スライド4', 'スライド5', 'スライド6', 'スライド7', 'スライド8', 'スライド9', 'スライド10', 'スライド11']
const groupingItems = 3 // グループ化するアイテム数

/* グループ数を算出 */
const itemLength = items.length // アイテム全ての数
let groupAll = itemLength / groupingItems // グループ数を算出

/* 余りを考慮して、切り上げ */
lastGroup = Math.ceil(groupAll) - 1 // 最後のグループ

console.log(lastGroup) // 3

最初は必ず0です。最後を求める計算は、
「全体÷グループ化するアイテム数」を切り上げる
と問1と同じですが、

この問では、グループ番号（0から始まる）なので、最後に -1 をします
0, 1, 2, 3 でグループ数は4つですね！

グループ番号1（グループ2つ目）の最初のアイテム番号は？計算せよ！

解答. 3
簡易図. |||　|||　|||　||

この辺から混乱してきますね、まずはプログラムから
※変数 groupFirstItem が結果です

const groupingItems = 3 // グループ化するアイテム数
const groupNumber = 1 // グループ番号1

const groupFirstItem = groupNumber * groupingItems

console.log(groupFirstItem) // 3

これはシンプルに
そのグループ最初のアイテム番号 = グループ番号 × グループ化するアイテム数
で求めることができます。
仮にグループ番号が0の場合、解は0ですがですがアイテム番号なので問題ありません。

・・・・・・・いよいよ最後です・・・・・・・

最後のグループに移動したい！どのアイテム番号を指定するといい？

解答. 9
簡易図. |||　|||　|||　||

問2で最後のグループ番号が分かったのでそれに、グループ化するアイテム数を掛けるとグループ最初のアイテム番号が取得できますね！
※変数 lastGroupFirstItemIndex が結果です

const items = ['スライド1', 'スライド2', 'スライド3', 'スライド4', 'スライド5', 'スライド6', 'スライド7', 'スライド8', 'スライド9', 'スライド10', 'スライド11']
const groupingItems = 3 // グループ化するアイテム数

/* グループ数を算出 */
const itemLength = items.length // アイテム全ての数
let groupAll = itemLength / groupingItems // グループ数を算出

/* 余りを考慮して、切り上げ */
lastGroup = Math.ceil(groupAll) - 1 // 最後のグループ

const lastGroupFirstItemIndex = lastGroup * groupingItems

console.log(lastGroupFirstItemIndex) // 3

おまけ

カルーセルスライダー系のプラグインを使ったことがある方はお馴染みだと思いますが、
slideTo(index)やgoToSlide(index)など名前は何でもいいですが、スライドのインデックス番号（ここで言うアイテム番号）を指定して、そのスライドまで移動できる便利なメソッドが大体用意されていますよね？
その仕組みも考えながら簡単なプログラムを作ってみました（最小限のスタイルでお見苦しいですが….）
JSFiddle

普段は、「ああしたい、こうしたい」からプログラムすることが多いと思います。
既存の完成されたモノの仕組みを考えながら作ることで、いつもとは違った視点でアルゴリズムを考える勉強にもなったのではないかと思います。

また、Javascriptを楽しく勉強できる方法の1つだと思います！
このブログのプログラムが最適解ではないので、「これだともっと簡単にできそう」など試行錯誤してみてください！

ではまた〜
ああ〜世界一周旅行したい！