メモブログ

技術的なことを書き連ねるブログ

jsでのカウントの処理(prevとかnext)を汎用的にする

今まで、スライダーとか

「進むボタン」「戻るボタン」
を実装する時に、

class Slider{
  constructor(){
    this.array = [
      'hoge.jpg',
      'huga.jpg',
      'baz.jpg',
    ]
    this.count = 0
    this.length = array.length    
  }
  prev(){
    if(count === 0){
      count = length - 1
    }else{
      count--
    }
    this.slider()
  }
  next(){
    if(count === length - 1){
      count = 0
    }else{
      count++
    }
    this.slider()
  }
  slider(){
  // スライダーの処理
  }
}

とかやっていてメンドくさいな、、
と思っていたんだが、
とある参考書を見て 素晴らしい書き方があったので感動でメモします。

class Slider{
  constructor(){
    this.array = [
      'hoge.jpg',
      'huga.jpg',
      'baz.jpg',
    ]
    this.count = 0
    this.length = array.length    
  }
  prev(){
    this.index = this.countChange(-1,this.index,this.length);
    this.slider()
  }
  next(){
    this.index = this.countChange(1,this.index,this.length);
    this.slider()
  }
  countChange(num,index,length){
    return (num + index + length) % length
  }
  slider(){
  // スライダーの処理
  }
}

このメソッドの計算でなるほど、、、と

  countChange(num,index,length){
    return (num + index + length) % length
  }

numは、正の方向で+1, 負の方向で-1を追加すると

(1 + 0 + 3) % 3 => 1
(1 + 1 + 3) % 3 => 2
(1 + 2 + 3) % 3 => 0
(-1 + 0 + 3) % 3 => 2
(-1 + 1 + 3) % 3 => 0
(-1 + 2 + 3) % 3 => 1

新しいindexが出る、、、

これ、今まで何回も同じ書き方してきたので、
こういう処理は簡略化出来るかちゃんと見直さなきゃダメだと実感しました。