智彬TweetES2015に追加された非同期処理の新しい記述方法について学ぶ。今回は、ECMAScript2015(ES2015)で追加された新機能を用いてモダンな非同期処理を学んでいきます。慣れないうちは文法的に戸惑うかもしれませんが、理解してしまえば、従来よりもはるかに簡潔な記述で非同期処理を書けるようになるので、落ち着いて習得していきましょう。PromisePromiseとは非同期処理を抽象化したオブジェクト、およびそれを制御する仕組みのことを言います。Object」と呼ばれ、三種類の状態が存在します。Pendingこの状態を深く気にする必要はないのですが、この後に用語として出てきますので頭の片隅に置いておいてください。Object」が持つ状態を把握したところで、実際のコードに触れながら理解を深めていきましょう。この仕組みの登場以前のレガシーな非同期処理を見てみます。2000)これをPromiseを用いて書き直してみましょう。新しい機能だからといって難しいことはありません。コールバック完了のタイミングで引数のresolveを実行することでFulfilledの状態にしてやり、その後「.then」を使ってコールバックの処理を記述するだけです。その名のとおり、「約束」を表しています。使って約束が満たされた後の処理を行うことができます。console.log('done')})Promiseを使った書き方に直したものの、この例だとPromiseを使わない方が簡潔な気さえします。Promiseの効果を実感できる例として、コールバックの中でさらに非同期処理を行い、ネストが深くなる場合を見てみましょう。2000)ネストが一段深くなり、可読性が落ちました。これを、Promiseを用いて書き換えると下記のようになります。later')})いかがでしょうか。非同期処理なのにも関わらず、一連の処理がネストせずに同レベルで記述されているので、実行順序が非常に追いやすくなっているのがわかると思います。これまでエラー処理のないものを見てきましたが、Promiseはもちろんエラー処理も簡潔に記述できます。いつものように、Promiseを使わない例からみていきましょう。Promise」で包んで抽象化します。言っても実際にはerrorHandlerをrejectに置き換えてやるだけです。requestの部分を抽象化してやることで、下記のようにエラー処理の記述も簡潔になります。${status}`)})以上がPromiseの基本的な機能ですが、他にも便利なメソッド群が提供されているので紹介したいと思います。Promise.all引数で与えられた全てのPromiseを並列に実行し、全てが成功した時にはじめてresolveが呼ばれます。逆に言うと一つでも失敗するとrejectが呼ばれます。個別の完了時は気にせず、すべて完了したら特定の処理を行いたい場合や、可変長つまり数が決まっていない非同期処理などを記述する時に便利です。gotoTravel(value)})Promise.race引数で与えられたPromiseが一つでも成功したり失敗したりすると、resolveが実行されます。Promise.allは並列実行し全ての処理がresolveされたらthenで値が取れるのに対し、Promise.raceの場合、どれか一つがresolveされたらthenで値が取れる、という違いがあります。Promise.raceはtimeoutの実装時に使えますが、どちらか一方がresolveされたとしてもそれまでの処理が中断されたりしないので、使用にはある程度注意が必要な機能です。eat(menu)})Promise.resolvePromise.resolveには二つの役割があります。一つはresolve関数に与えた値をPromise化させることです。「jQuery.ajax()」を例にとって説明してみましょう。Object」が入っているのを確認できると思います。Object」に変換することができるのです。Objectを即座に返す機能が挙げられます。「Array.prototype.reduce」と組み合わせて非同期処理を直列実行する時や、非同期処理の中に同期処理を混ぜて書きたい時などに有効です。Objectを即座に返します。fail});Async/awaitPromiseの利便性は伝わったと思いますが、やはり.thenでネストするのは理想形とは言えません。そこで登場するのが、「Async/await」です。サンプルコードをご覧ください。later}sleepAsync()いかがでしょうか。式」を実行することで、あたかも同期処理を書くかのように記述することができます。loop内での使用も可能です。functionは、即時関数やアロー関数など使って書くこともできます。sleep(1000))})()これが実現できるのはawaitがPromiseの解決を待ってくれるからです。functionは処理を再開し、解決された値を返します。functionはPromiseを返します。下記の例を見ていただくとそれがわかるでしょう。laterまた、「Async/await」のさらなる利点として、tryとcatch節でエラー処理をまとめられる点が挙げられます。function」内でのtry-catchを忘れた時はasync関数の外側でPromiseとしてcatchする必要があるので注意してください。今回は以上で終了です。v7.6.0でも使用可能となり、非同期処理のメインストリームとなっていく可能性が高いので、状況にもよりますが使用を積極的に検討していくと良いでしょう。サイトの構築やWebアプリケーションの開発を経て、現在はテクニカルディレクターとしてフロントエンドのチームリード/制作フロー改善に従事。著書:『エンジニアのためのGitの教科書』『ブレイクスルーJavaScript』(翔泳社)『現場で役立つCSS3デザインパーツライブラリ』(MdN)ほか。第6回ES2015のモジュール管理2017/5/9ES2015に追加されたモジュール管理の機能を紹介し、現行のブラウザから使用する方法を解説する。5回ES2015が備えるモダンな非同期処理2017/3/28ES2015に追加された非同期処理の新しい記述方法について学ぶ。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。