ハイブリッドアプリを作っていて一番悩みやすいポイントは、非同期処理にあるのではないでしょうか。Web APIを使って外部からデータを取得したり、ファイルを書き込んだりする際には、この非同期処理が使われます。

async/awaitの登場によって大幅に書きやすくなっていますが、さらに改善は進んでいます。今回はfor await ofの書き方について解説します。

for await ofとは

forは皆さん使ったことがあるかと思います。whileとともに、繰り返し処理でよく使われる構文です。以下のような書き方が一般的でしょう。

1
2
3
for (let i = 0; i < 100; i++) {
 
}

この繰り返し処理の部分において非同期処理を有効にするのが for await of 構文になります。書き方としては次のようになります。

1
2
3
for await (obj of iteration) {
 
}

この for await of の書き方をもう少し詳しく見ていきましょう。

イテレーションとは何か

上記コードで使われているiterationは、イテレーションと呼びます。配列のような形でオブジェクトを複数保持していて、呼ばれる度に次のオブジェクトを返却します。オブジェクトがなくなったら終了という仕組みです。

for await of においても、forが自動的に次のデータ、次のデータと呼び出してくれることで、最終的にデータがなくなった段階で終了になります。

このイテレーションは、Generatorというオブジェクトが実体になります。Generatorオブジェクトは function* という形で定義します。見た目は関数に似ています。

1
2
3
function* gen() {
 
}

そして、値を返す時には yield という構文を使います。例えばこんなジェネレーターを定義します。

1
2
3
4
5
6
function* gen() {
  yield 'Hello'
  yield 'World'
  yield 'From'
  yield 'Monaca'
}

これを使う際には、まず関数を実行します。

1
const g = gen()

後は g.next() で結果が返ってきます。

1
2
g.next()
// {value: "Hello", done: false}

さらにもう一度実行すると、結果が次のyieldに進みます。

1
2
g.next()
// {value: "World", done: false}

done: false と書かれていますが、最後までいくと done: true になります。これで繰り返し処理が終了したというのが分かります。ではこのジェネレーターfor 文に使ってみます。

1
2
3
for (let v of gen()) {
  console.log(v)
}

そうすると結果は次のようになります。関数をfor文の中で使い、まるで配列のように返せるのが分かるかと思います。

1
2
3
4
Hello
World
From
Monaca

非同期処理でどう使うのか

このジェネレータを使ったイテレーション処理において非同期処理をサポートしたのが for await of 構文になります。

今回は処理を非同期にするために、数秒間処理待ちする関数を作ります。通常、ここはファイル書き込みであったり、fetch関数でのネットワーク処理になります。

1
const sleep = (s) => new Promise(f => setTimeout(f, s * 1000));

そしてジェネレーターを定義するのですが、asyncを使うのがポイントです。そうすればジェネレーターの中でもawaitを使えます。

1
2
3
4
5
6
7
8
9
10
async function* gen_async() {
  await sleep(1)
  yield 'Hello'
  await sleep(5)
  yield 'World'
  await sleep(2)
  yield 'From'
  await sleep(1)
  yield 'Monaca'
}

そして呼び出し側で使うのが for await of 構文になります。

1
2
3
4
5
(async () => {
  for await (const v of gen_async()) {
    console.log(v);
  }
})();

この処理は順番通り、数秒間処理待ちしながら実行されていきます。

1
2
3
4
Hello
World
From
Monaca

使い分け

非同期処理の実装としては、下記のような方法があるかと思います。

  • コールバック
  • Promise
  • async/await

コールバックはCordovaプラグインでよく使われる記述方法ですが、現状では主流ではありません。コールバック方式をPromiseに置き換える方法もよく紹介されていますので、コールバック方式のまま利用することは多くないでしょう。

Promiseはthen/catchを使った方式になります。この方法を使った場合、コードのネストが深くなってしまうという難点があります。古いWebブラウザでも使えるので安心できる反面、ハイブリッドアプリにおいてはスマートフォンの最新Webブラウザ（のレンダリングエンジン）が対象になるので、そうした面は気にすることはないでしょう。

Promiseの利点としては、Promise.allを使うことで非同期処理が並列で実行できる点にあります。つまり複数の非同期処理（ネットワーク処理、画像の取得、複数ファイルへの書き込みなど）をまとめて実行できます。これによって処理の高速化が期待できます。

async/awaitを使うのは、コードの見通しがよくなり、非同期処理がまるで通常の同期処理のように書けるのが利点です。

難点としては、関数の呼び出し元で必ずasyncと定義しないといけないこと、さらに処理が直列になってしまうことでしょう。await処理が終わるまで次の処理が行われないので、forを使ったループ処理内でのasync/awaitはお勧めされていません。

まとめ

非同期処理を分かりやすく書くことができれば、アプリのコードがぐっとメンテナンスしやすくなり、保守や開発も容易になります。

ジェネレーターオブジェクトを覚えておくと、forを使った繰り返し処理などが綺麗に書けるようになるでしょう。そして、その中で非同期処理を使う場合には for await of を使って書いてみてください。

for await...of - JavaScript | MDN