最新Javascript(ES6)でモダンプログラミング【ジェネレータ編】

Contents

1 ES6(ES2015)とは
2 単純で簡単な方法
3 for of
4 ジェネレータ
5 その他

ES6(ES2015)とは

先日策定された、ECMASCriptの6th Editionのことであり、当初はES6と呼ばれているが、正式名称をECMASCript2015(ES2015と呼ばれる)とし、今後は年単位のリリースを予定しているとのこと
[公式サイト]http://www.ecma-international.org/ecma-262/6.0/index.html
引用：http://qiita.com/tuno-tky/items/74ca595a9232bcbcd727

今回はES6で追加された新しい機能を使って繰り返し処理をやってみようと思います。

単純で簡単な方法

一番単純な for文 を使った方法です。

let numbers = [0, 1, 1, 2, 3, 5, 8, 13];
for (let index=0; index < numbers.length; index++) {
 console.log(`This number is: ${numbers[index]}`);
}

次に forEach を使った書き方です。
さっきのより、シンプルになって見やすいですね！

let numbers = [0, 1, 1, 2, 3, 5, 8, 13];
numbers.forEach((number) => {
  console.log(`This number is: ${number}`);
});

for of

次にES6から追加された for of を使って書いてみます。

let numbers = [0, 1, 1, 2, 3, 5, 8, 13];
for (let number of numbers) {
  console.log(`This number is: ${number}`);
}

書く量はそんなに変わってないですが、何よりわかりやすいですよね。
コードはわかりやすいのが一番です。

ジェネレータ

for ofを使って繰り返し処理をする時に
arrayしか使えないというわけではありません。
ジェネレータ関数を利用し自作のイテレータを作成することができます。

ジェネレーター…　？
イテレータ…？

という方は、こちらの記事で詳しく解説されています。
興味のある人は、ぜひ呼んでみることをオススメします。

Qiita: JavaScript のイテレータを極める！

Qiita: JavaScript のジェネレータを極める！

//ジェネレータ関数
function * numbers() {
  yield 0;
  yield 1;
  yield 1;
  yield 2;
  yield 3;
  yield 5;
  yield 8;
  yield 13;
}

let number = numbers();

console.log(number.next().value);
console.log(number.next().value);
console.log(number.next().value);
console.log(number.next().value);
console.log(number.next().value);

ジェネレータを作ってnext()を実行すると
yieldで一旦処理が止まり、値を返します。
もう一度、yieldを実行すると次の値が返されます。

こうすると、最後のyieldが呼ばれるまで、繰り返します。

//ジェネレータ関数
function * numbers2() {
  yield 0;
  yield 1;
  yield 1;
  yield 2;
  yield 3;
  yield 5;
  yield 8;
  yield 13;
}

 for (let number of numbers2()) {
   console.log(`This number is: ${number}`);
 }

でも、これだとあんまりスマートな書き方ではないですね。
実際は次のようにジェネレータ関数の中で次の値を計算してyieldで返すのがgoodです。

//ジェネレータ関数
 function *fibonacci() {
   var n1 = 0;
   var n2 = 1;
   while(true) {
     yield n1; // yield the first number.

     // Calculate the next Fibonacci number
     [n1, n2] = [n2, n1 + n2]; // Destructuring assignment!
   }
 }

 for (let number of numbers2()) {
   console.log(`This number is: ${number}`);
 }

cool ですね！！！