【JavaScript入門】5分で理解!async / awaitの使い方と非同期処理の書き方

こんにちは、ライターのマサトです!

今回は、Promiseを使った非同期処理を簡潔に記述することができる「async / await」について学習をしていきましょう!

この記事では、

  • 「async / await」とは?
  • 「async / await」の使い方
  • 「async / await」の並列処理

などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、「async / await」をしっかり学習して自分のスキルアップを目指しましょう!

「async/await」とは?

それでは、まず最初に「async / await」について基本的な知識から身につけていきましょう!

「async / await」は、Promiseによる非同期処理をより簡潔に効率よく記述できるのが大きな特徴です。「非同期処理」は時間の掛かる処理の結果を待たずにすぐ次の処理を実行できる仕組みですが、Promiseを使うことで簡単に実現できます。

ただ、Promiseの場合は「then」を使ってチェーンを繋いでいくので、少し単調なコードになりやすいわけです。例えば、複数のPromise処理を「then」を使って実行すると以下のようになります。

場合によっては「Promise.all()」を使うことで、もう少しだけスマートに記述できますがそれでも「then」を使った記述は必須です。

そこで、もう少し分かりやすく効率の良い書き方ができる「async / await」を使う方法について本記事で学んでいきましょう! ちなみに、Promiseについてまだ不安のある方は次の記事で基本から応用まで解説しているのでぜひ参考にしてみてください!

【JavaScript入門】誰でも分かるPromiseの使い方とサンプル例まとめ!
更新日 : 2019年2月10日

「async/await」の使い方

この章では、基本的な「async / await」の使い方について見ていきましょう!  一般的な構文から実際のプログラミング処理について学んでいきます。

基本的な構文と書き方について

まずは、もっとも基本となる構文について見ていきましょう! 「async」は「function」の前に記述するだけで非同期処理を実行できる関数を定義できます。

このようにasyncを記述しておくと、この関数はPromiseを返すようになります。また、「await」はPromise処理の結果が返ってくるまで一時停止してくれる演算子となります。

このようにPromise処理が記述された関数の前に「await」を記述するだけで、結果が返ってくるまで一時停止してくれるわけです。ただし、「await」は「async」で定義された関数の中だけでしか使えないので注意しておきましょう!

また、このような理由から「async / await」はペアで一緒に使われることが多いわけです。

「async/await」で非同期処理を記述する方法

それでは、実際のプログラミング方法を見ていきましょう! まずは、以下のようなPromise処理があるとします。

この例では、わざと3秒の時間が掛かる処理をPromise内に記述しているのが分かります。そして、引数で受け取った値(num)を2乗した結果を「resolve」で返す単純な仕組みとなっています。これを「then」を使わずに「async / await」を利用すると次のようになります。

実行結果

この例では、asyncを付与することで非同期処理の関数を作成していますね。その関数内でPromise処理を記述している「myPromise()」の前に「await」を付与しているのが分かります。

これにより、3秒後に結果が返ってくるPromise処理を一時的に待つことになり、結果を取得した瞬間に関数内の処理が続行されるのです。実行結果には引数に与えた「10」が2乗された値「100」が取得できていますね。

「then」を使わずに非同期処理を複数実行する方法

今度は、複数の非同期処理を実行する方法について見ていきましょう! まずは、従来のPromiseを利用した方法として「then」を使った場合を見てみます。

この例では、先ほど利用した3秒の時間が掛かるPromise処理を繋げて実行しています。「then」を利用することでメソッドチェーンによる記述になっているのが特徴です。また、Promise処理を繋げる場合は「then」の最後に実行するPromise関数をreturnするのを忘れないようにしなければいけません。

それでは、同じ処理を「async / await」で実行するとどうなるか見てみましょう!

実行結果

まず、非常にコードがすっきりして把握しやすくなっているのが分かりますね。asyncが付与された関数内で、実行する予定のPromise処理をすべて「await」を付けて実行しています。これにより、上から順番にPromiseの結果が返ってきてコンソールへ出力されるというわけです。

「async/await」の並列処理

この章では、「async / await」を使った並列処理の方法について見ていきましょう! 主に、Promiseを使った場合との違いについて詳しく学んでいきます。

Promise.all()を使った並列処理との違い

まずは、従来のPromise.all()を使った方法を確認してみましょう!

この例では、「myPromise()」の引数違いを3つ同時に実行しています。最後に「then」で実行結果を配列として出力するという流れになっていますね。これと同様の処理を「async / await」で実行すると次のようになります。

まず最初に、実行予定のPromise処理をすべて起動させて変数に格納します。そのあとに「await」を付与することですべてのPromise処理を並列に動かして結果を取得することができるわけです。

まとめ

今回は、Promiseを使った非同期処理を簡潔に記述できる「async / await」について学習しました。最後に、もう一度ポイントをおさらいしておきましょう!

  • asyncはfunctionの前に付与するだけでPromiseを返す非同期処理を定義できる
  • awaitはasyncが付与された関数内でのみ実行することができる
  • 並列処理を記述する場合は先にすべてのPromise処理を起動させておく

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

JavaScriptカリキュラム無料公開中!


この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。

JavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】
更新日 : 2018年12月13日

無料体験レッスン実施中

今あなたはこんな悩みをお持ちではないでしょうか?

「つまづいてばかりで学習が進まない…」
「どこまで勉強すればいいのか、終わりが見えない…」
「習得できたとしてもどうやって仕事につなげればいいのかわからない…」

プログラミング学習やキャリアに関してお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像をから詳しいサービス内容をご確認ください。

cta_js2

LINEで送る
Pocket

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説