ジェネレータ(Generators)は特殊な種類の関数である。通常の関数が1つの値しか返さないのに対して、ジェネレータは、実行を断続的に中止しながら、複数の値を生み出すことができる。
プロミス(Promises)は、JavaScriptに組み込みのオブジェクトであり、非同期処理の取り扱いに適している。
ジェネレータ関数
ジェネレータ関数は以下のように定義する。functionキーワードの直後に*（アスタリスク）がついているのがジェネレータ関数の 目印である。ジェネレータ関数の中ではyieldというキーワードを使って値を生成できる。
|
1 2 3 4 5 6 7 8 9 |
function* WeaponGenerator() { yield 'Katana'; yield 'Wakizashi'; yield 'Kusarigama'; } for (let weapon of WeaponGenerator()) { console.log(weapon); // Katana, Wakizashi, Kusarigama } |
イテレータオブジェクトでジェネレータを制御する
ジェネレータの呼び出しはジェネレータ関数の本文の実行を意味しない。その代わりに、イテレータオブジェクトが作成される。このオブジェクトを通してジェネレータとコミュニケーションをとることができる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function* WeaponGenerator() { yield 'Katana'; yield 'Wakizashi'; } const weaponIterator = WeaponGenerator(); const weapon1 = weaponIterator.next(); console.log(weapon1); // { value: 'Katana', done: false } const weapon2 = weaponIterator.next(); console.log(weapon2); // { value: 'Wakizashi', done: false } const weapon3 = weaponIterator.next(); console.log(weapon3); // { value: undefined, done: true } |
イテレータはジェネレータの実行をコントロールするために使用される。イテレータオブジェクトはnextメソッドを持っていて、このメソッドを通してジェネレータに値を要求できる。
|
1 |
const weapon = weaponIterator.next(); |
この呼び出しに対して、ジェネレータはyieldに達するまでコードを実行する。yieldに達すると、その時点での結果を返して、実行を中断する。この結果には、その時点での値(value)と、ジェネレータが完了したか(done)が含まれる。
現在の値の生成が終わると、ジェネレータはそこで中断する。
イテレータの繰り返し
イテレータのnextメソッドを使うことで、ジェネレータに新しい値を要求できる。また、ジェネレータが次の値を持っているか知るには、結果として取得できるオブジェクトのdoneプロパティを使用する。これらを利用すると、古典的なwhileループでイテレータから繰り返し値を取得できる。
|
1 2 3 4 5 6 7 8 9 10 11 |
function* WeaponGenerator() { yield 'Katana'; yield 'Wakizashi'; } const weaponsIterator = WeaponGenerator(); let item; while (!(item = weaponsIterator.next()).done) { console.log(item.value); // Katana, Wakizashi } |
for-ofループは、このループのシンタックスシュガーである。
|
1 2 3 |
for (let item of WeaponGenerator()) { console.log(item); } |
別のジェネレーターを生成する
ジェネレータの実行を別のジェネレータに任せたい場合もある。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function* NinjaGenerator() { yield 'Hattori'; yield 'Yoshi'; } function* WarriorGenerator() { yield 'Sun tzu'; yield* NinjaGenerator(); yield 'Genghis Khan'; } for (let warrior of WarriorGenerator()) { console.log(warrior); // Sun tzu, Hattori, Yoshi, Genghis Khan |
yeild*演算子をイテレータに使うことで、別のジェネレータから値を生成できる。
ジェネレータとやりとりする
ジェネレータから値を生み出すだけでなく、ジェネレータに値を送ることもできる。
ジェネレータ関数の引数としてデータを送る
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function* NinjaGenerator(action) { // 値を生成することで、ジェネレータは中間の計算結果を返すことができる // イテレータのnextメソッドを引数付きで呼ぶと、 // ジェネレータにデータを送り返すことができる const imposter = yield `Hattori ${action}`; // nextに送られた値がyieldされた式の値になる console.log(`imposter: ${imposter}`); yield `Yoshi (${imposter}) ${action}`; } const ninjaIterator = NinjaGenerator('skulk'); const result1 = ninjaIterator.next(); console.log(result1.value); // Hattori skulk const result2 = ninjaIterator.next('Hanzo'); // HanzoをNinjaGeneratorに console.log(result2.value); // Yoshi (Hanzo) skulk |
ジェネレータに例外を投げる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function* NinjaGenerator() { try { yield 'Hattori'; console.error("The expected exception didn't occur"); } catch (e) { console.log('Aha! We caught an exception'); } } const ninjaIterator = NinjaGenerator(); const result1 = ninjaIterator.next(); console.log(result1); // Hattori ninjaIterator.throw('Catch this!'); // Aha! We caught an exception |
ジェネレータの内部を探求する
ジェネレータは小さなプログラムのようなものであり、複数の状態を遷移するステートマシンでもある。
- 開始前(Suspended start)：ジェネレータが作成された直後の状態
- 実行中(Executing)：ジェネレータのコードが実行されている状態
- 生成停止中(Suspended yield)：実行中に、
yield式に到達し、処理が中断している状態 - 完了(Completed)：
returnに到達するかコードを最後まで実行し、値の生成が完了した状態
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function* NinjaGenerator() { yield 'Hattori'; yield 'Yoshi'; } const ninjaIterator = NinjaGenerator(); // 新しいジェネレータを作成する（Suspended start） const result1 = ninjaIterator.next(); // ジェネレータの実行を開始し、Executingに移行する // yield 'Hattori'; までを実行し、Suspended yield状態になる // 新しいオブジェクト { value: 'Hattori', done: false } を返す const result2 = ninjaIterator.next(); // ジェネレータの実行を再度開始し、Executingに移行する // yield 'Yoshi'; までを実行し、Suspended yield状態になる // 新しいオブジェクト { value: 'Yoshi', done: false } を返す const result3 = ninjaIterator.next(); // ジェネレータの実行を再度開始し、Executingに移行する // 実行するコードがないのでCompleted状態に移行する // 新しいオブジェクト { value: undefined, done: true } を返す |
ジェネレータの実行コンテキストを追跡する
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function* NinjaGenerator(action) { yield `Hattori ${action}`; return `Yoshi ${action}`; } // ninjaIterator変数はNinjaGeneratorの実行コンテキストを参照する const ninjaIterator = NinjaGenerator('skulk'); // 通常の関数と異なり、next()メソッドは実行コンテキストを生成しない // その代わりに、NinjaGeneratorの実行コンテキストで処理を続行する const result1 = ninjaIterator.next(); const result2 = ninjaIterator.next(); |
Promiseとやりとりする
Promiseは、ES2015で導入された、非同期処理を扱いやすくするための概念である。今は存在せず、将来手に入る値のプレースホルダーである。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Promiseオブジェクトのコンストラクタを呼び出し、 // resolve（成功時に実行する関数）とreject（失敗時に実行する関数）をとる // コールバック関数(executor)を渡す const ninjaPromise = new Promise((resolve, reject) => { resolve('Hattori'); // 失敗時の処理は reject(new Error('An error ...')) のように書く }); // Promiseのthenメソッドを使って、成功時のコールバック関数を渡す ninjaPromise.then(ninja => { console.log(ninja); // Hattori }); |
Promiseに渡したコールバック関数(executor)は即時実行される。
単純なコールバックの問題を理解する
私たちは、長く時間のかかる処理によってユーザの操作を妨げないために、非同期処理を行っている。非同期処理のための最も初歩的な道具はコールバック関数である。
|
1 2 3 |
getJSON('data/ninjas.json', function() { // 処理 }); |
このようなタスクの際にはエラーの発生する可能性がある。コールバック関数の問題は、try-catchのような言語の組み込み機能を使えない点だ。以下のコードではエラーはキャッチできない。
|
1 2 3 4 5 6 7 |
try { getJSON('data/ninjas.json', function() { // 処理 }); } catch(e) { // エラー処理 } |
コールバック関数を呼び出すコードはイベントループの同じステップにはないことが普通だたら、例外処理でキャッチはできず、エラーは失われる。
そのため、Node.jsの世界では、コールバック関数にerrとdataの2つの引数が渡されるような慣習が確立されている。errにnullでない値が渡された場合はエラーが発生しているということだ。
コールバック関数の第一の問題点はエラーハンドリングの難しさである。
また、長い処理の後には、取得した結果を使って何か処理を行うことが多い。この結果、別の長い処理が開始されることもある。
|
1 2 3 4 5 6 7 |
getJSON('data/ninjas.json', function(err, ninjas) { getJSON(ninjas[0].location, function(err, locationInfo) { sendOrder(locationInfo, function(err, status) { // statusについての処理 }); }); }); |
このように、連続したステップを実施するのが難しいことが、コールバック関数の第二の問題点である。
さらに、最終的な結果を得るためのステップが、依存関係にない場合もある。このような場合、実行時間を最適化するためには、並行して処理を行うのが望ましい。しかし、並行した処理をコールバック関数で実装するのはかなりトリッキーである（書籍にはコード例があるが、長いので割愛）。コールバック関数の第三の問題点は、並行処理が難しいことである。
コールバック関数は、try-catchやループのような言語の組み込み機能と併せて使うことが難しいのも欠点である。
Promiseを使ってみる
Promiseは非同期に実行するタスクの結果のプレースホルダーである。まだ手に入れておらず、将来入手できる値を意味する。Promiseはいくつかの状態をもつ。
Promiseは、Pending状態から始まる。この状態をUnresolvedと呼ぶこともある。プログラムの実行が進み、Promiseのresolve関数が呼ばれると、PromiseはFullfilled状態に移行する。このとき、望んだ値を手に入れることができる。
一方、Promiseのreject関数が呼ばれるか、例外が発生し、それがPromiseの中でハンドルされなかった場合、PromiseはRejected状態に移行する。この場合、エラーの内容を取得できる。
FullfilledおよびRejectedをまとめてResolved状態とも呼ぶ。一度Resolvedに移行すると、Unresolvedに戻ることはない。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
console.log('At code start'); const ninjaDelayedPromise = new Promise((resolve, reject) => { console.log('ninjaDelayedPromise executor'); // 500ミリ秒後にresolve setTimeout(() => { console.log('Resolving ninjaDelayedPromise'); resolve('Hattori'); }, 500); }); console.log('After creating ninjaDelayedPromise'); ninjaDelayedPromise.then(ninja => { console.log(`ninjaDelayedPromise resolve handled with ${ninja}`); }); const ninjaImmediatePromise = new Promise((resolve, reject) => { console.log('ninjaImmediatePromise executor. Immediate resolve.'); resolve('Yoshi'); }); ninjaImmediatePromise.then(ninja => { console.log(`ninjaImmediatePromise resolve handled with ${ninja}`); }); console.log('At code end'); // ↑の実行結果は↓のようになる。Promiseのresolveは即時呼び出しではなく、次のイベントループの実行まで遅延する。 // At code start // ninjaDelayedPromise executor // After creating ninjaDelayedPromise // ninjaImmediatePromise executor. Immediate resolve. // At code end // ninjaImmediatePromise resolve handled with Yoshi // Resolving ninjaDelayedPromise // ninjaDelayedPromise resolve handled with Hattori |
Promiseの却下(reject)
Promiseの実行を失敗させる（rejectする）方法は2つある。明示的に reject メソッドを実行するか、ハンドルされない例外を発生させるかである。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const explicit = new Promise((resolve, reject) => { reject('明示的なreject'); }); explicit.then(() => console.log('実行されないはず')) .catch(error => console.error(error)); const implicit = new Promise((resolve, reject) => { // 未定義変数の書き換えによる例外が発生する undeclaredVariable += 1; }); implicit.then(() => console.log('実行されないはず')) .catch(error => console.error(error)); |
このように、Promiseの中で発生したエラーを一括して処理する仕組みが存在するのがPromiseの大きな利点である。
Promiseの連鎖
then を実行すると新しいPromiseが返る。そのため、 then を繰り返すことでPromiseを連鎖させることができる。
|
1 2 3 4 |
fetch('ninjas.json') .then(response => response.json()) // レスポンスをJSON.parse()する .then(ninjas => console.log(ninjas)) // 取得したデータを出力 .catch(error => console.error(error)); |
Promiseの連鎖の中で発生したエラーは、末尾の catch で一括でキャッチできる。
複数のPromise
依存関係のない複数の非同期処理を並行して実行することもできる。
|
1 2 3 4 5 6 7 8 9 10 |
Promise.all([ fetch('ninjas.json'), fetch('mapInfo.json'), fetch('plan.json'), ]).then(results => { const ninjas = results[0]; const mapInfo = results[1]; const plan = results[2]; console.log(ninjas, mapInfo, plan); }).catch(console.error); |
Promise.all メソッドはPromiseの配列をとり、全てのPromiseが成功したら返る新しいPromiseを作成する。いずれか1つのPromiseが失敗した場合は、Promiseは失敗する。
いくつかの非同期タスクのうち、最初に完了したものの結果だけを取得したい場合は、 Promsie.raceが利用できる。
|
1 2 3 4 5 6 7 |
Promise.race([ fetch('yoshi.json), fetch('hattori.json), fetch('hanzo.json), ]).then(ninja => { console.log(ninja); }); |
ジェネレータとPromiseを組み合わせる
非同期処理を行うコードをジェネレータの中に置くことで、シーケンシャルな非同期処理をエレガントに書くことができる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
function async(generator) { const iterator = generator(); const handle = iteratorResult => { if (iteratorResult.done) return; const iteratorValue = iteratorResult.value; if (iteratorValue instanceof Promise) { iteratorValue.then(res => handle(iterator.next(res)); .catch(err => iterator.throw(err)); } }; try { handle(iterator.next()); } catch (e) { iterator.throw(e); } } async(function* () { try { const ninjas = yield fetch('ninjas.json); const missions = yield fetch(ninjas[0].missionsUrl); console.log(missions); fetch(missions[0].detailsUrl); } catch(e) { console.error(e); } }); |
async関数
JavaScriptのasync関数は、前述したPromiseとジェネレータの組み合わせを言語機能化したものである。
|
1 2 3 4 5 6 7 8 9 |
(async function() { try { const ninjas = await fetch('ninja.json'); const mission = await fetch(ninjas[0].missionsUrl); console.log(missions); } catch(e) { console.error(e); } })(); |
asyncキーワードを使って非同期関数であることを宣言すると、この中ではawaitキーワードを使って、Promiseがresolveされるのを待つことができる。
