技術情報JavaScript中津川篤司ハイブリッドアプリを作っていて一番悩みやすいポイントは、非同期処理にあるのではないでしょうか。APIを使って外部からデータを取得したり、ファイルを書き込んだりする際には、この非同期処理が使われます。async/awaitの登場によって大幅に書きやすくなっていますが、さらに改善は進んでいます。ofの書き方について解説します。ofとはforは皆さん使ったことがあるかと思います。whileとともに、繰り返し処理でよく使われる構文です。以下のような書き方が一般的でしょう。書き方としては次のようになります。書き方をもう少し詳しく見ていきましょう。イテレーションとは何か上記コードで使われているiterationは、イテレーションと呼びます。配列のような形でオブジェクトを複数保持していて、呼ばれる度に次のオブジェクトを返却します。オブジェクトがなくなったら終了という仕組みです。おいても、forが自動的に次のデータ、次のデータと呼び出してくれることで、最終的にデータがなくなった段階で終了になります。このイテレーションは、Generatorというオブジェクトが実体になります。見た目は関数に似ています。こんなジェネレーターを定義します。'Monaca'}これを使う際には、まず関数を実行します。false}さらにもう一度実行すると、結果が次のyieldに進みます。これで繰り返し処理が終了したというのが分かります。console.log(v)}そうすると結果は次のようになります。関数をfor文の中で使い、まるで配列のように返せるのが分かるかと思います。今回は処理を非同期にするために、数秒間処理待ちする関数を作ります。通常、ここはファイル書き込みであったり、fetch関数でのネットワーク処理になります。1000));そしてジェネレーターを定義するのですが、asyncを使うのがポイントです。すればジェネレーターの中でもawaitを使えます。}})();この処理は順番通り、数秒間処理待ちしながら実行されていきます。HelloWorldFromMonaca使い分け非同期処理の実装としては、下記のような方法があるかと思います。コールバックPromiseasync/awaitコールバックはCordovaプラグインでよく使われる記述方法ですが、現状では主流ではありません。コールバック方式をPromiseに置き換える方法もよく紹介されていますので、コールバック方式のまま利用することは多くないでしょう。Promiseはthen/catchを使った方式になります。この方法を使った場合、コードのネストが深くなってしまうという難点があります。古いWebブラウザでも使えるので安心できる反面、ハイブリッドアプリにおいてはスマートフォンの最新Webブラウザ(のレンダリングエンジン)が対象になるので、そうした面は気にすることはないでしょう。Promiseの利点としては、Promise.allを使うことで非同期処理が並列で実行できる点にあります。複数の非同期処理(ネットワーク処理、画像の取得、複数ファイルへの書き込みなど)をまとめて実行できます。これによって処理の高速化が期待できます。async/awaitを使うのは、コードの見通しがよくなり、非同期処理がまるで通常の同期処理のように書けるのが利点です。難点としては、関数の呼び出し元で必ずasyncと定義しないといけないこと、さらに処理が直列になってしまうことでしょう。await処理が終わるまで次の処理が行われないので、forを使ったループ処理内でのasync/awaitはお勧めされていません。まとめ非同期処理を分かりやすく書くことができれば、アプリのコードがぐっとメンテナンスしやすくなり、保守や開発も容易になります。ジェネレーターオブジェクトを覚えておくと、forを使った繰り返し処理などが綺麗に書けるようになるでしょう。使って書いてみてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。見やすい、メンテナンスしやすいJavaScriptのために。