【JavaScript】ジェネレータを使って月の表示をループする

JavaScriptにはジェネレータという機能があります。今回はジェネレータを使って簡単なサンプルを作ってみます。

作るもの

1月⇒2月⇒3月…と表示していき、12月の次はまた1月に戻るようなものを作ります。

ジェネレータ

ジェネレータのコードは以下のようになります。function*のようにアスタリスクをつけるとジェネレータになります。

function* createLoopMonth(){
  let month = 1 //(1)
  while(true){ //(2)
    yield month + '月' //(3)
    if(month <= 11){ //(4)
      month += 1
    }else{
      month = 1
    }
  }
}

(1)初期値のセット

最初は1月なので初期値として1をセットしておきます。

(2)無限ループするようにしておく

何度でも呼び出せるように、無限ループにしておきます。

yieldキーワードによって、要求されるまで処理は停止されるので、実際に無限ループが発生することはありません。

(3)yieldキーワードで値を返す

ジェネレータに対して値を要求すると、yieldキーワードによって値が返されます。

(4)次に返す値をセットしておく

yieldキーワードによって例えば「1月」が返されたら、次は「2月」を返す必要があります。そのためmonth変数を次の月に書き換えておきます。

呼び出す

このジェネレータを使って実際に値を呼び出すコードは以下の通りです。next()で次の値を要求します。

let monthGenerator = createLoopMonth()
console.log(monthGenerator.next())
console.log(monthGenerator.next())
console.log(monthGenerator.next())
console.log(monthGenerator.next())
console.log(monthGenerator.next())
console.log(monthGenerator.next())
console.log(monthGenerator.next())
console.log(monthGenerator.next())
console.log(monthGenerator.next())
console.log(monthGenerator.next())
console.log(monthGenerator.next())
console.log(monthGenerator.next())
console.log(monthGenerator.next())

結果は以下のようになります。

{ value: '1月', done: false }
{ value: '2月', done: false }
{ value: '3月', done: false }
{ value: '4月', done: false }
{ value: '5月', done: false }
{ value: '6月', done: false }
{ value: '7月', done: false }
{ value: '8月', done: false }
{ value: '9月', done: false }
{ value: '10月', done: false }
{ value: '11月', done: false }
{ value: '12月', done: false }
{ value: '1月', done: false }

これで、好きなときにnext()を呼び出すことで、月をループして表示させることができるようになりました。

まとめ

ジェネレータはとても便利な機能なので、色々使い道を探してみてください！