JavaScriptには、非同期プログラミングを行うための機能として、コールバック、Promise、そしてasync/awaitがあります。今回は、JavaScriptのasync/await構文について、そのメリットとデメリットを解説していきます。
async/awaitとは
async/awaitは、ES2017で導入された非同期プログラミングを簡単に行うための構文です。async/awaitは、Promiseの上に構築されています。asyncは、非同期関数を定義するためのキーワードで、awaitは、Promiseが解決されるまで、非同期処理の実行を一時停止するキーワードです。
async/awaitのメリット・デメリットは以下のページにまとめました。
async/awaitの基本的な使い方
async/await構文を使うには、関数にasyncキーワードを付ける必要があります。そして、awaitキーワードを使って、Promiseの結果を取得することができます。awaitキーワードを使うことで、Promiseがresolve（成功）するまで、その行で処理が停止されます。そして、resolveされたPromiseの値を返します。
以下に例を示します。ここでは、非同期処理であるsetTimeoutを使って、2秒後にメッセージを表示する関数を定義しています。
function waitTwoSeconds() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('2秒経過しました！');
}, 2000);
});
}この関数をPromiseを使って実行すると、以下のようになります。
waitTwoSeconds().then((result) => {
console.log(result); // '2秒経過しました！'
});次に、async/awaitを使って同じ処理を行う場合を見てみましょう。
async function waitTwoSecondsAsync() {
const result = await waitTwoSeconds();
console.log(result); // '2秒経過しました！'
}上記のコードでは、waitTwoSecondsAsync関数がasyncキーワードで定義されています。そして、awaitキーワードを使ってwaitTwoSeconds関数の処理が完了するまで待ち、その結果を変数resultに代入しています。そして、resultの値をコンソールに表示しています。
このように、async/await構文を使うことで、コードが読みやすくなり、非同期処理の結果を簡単に操作することができます。
async/awaitで複数の非同期処理を実行する方法
async/await構文を使うことで、複数の非同期処理を簡単に実行することが
できます。複数の非同期処理を実行する場合、Promise.allメソッドを使うことができます。Promise.allメソッドは、複数のPromiseを受け取り、全てのPromiseの処理が終わるまで待ち、全てのPromiseの結果を配列で返します。この配列の順番は、Promise.allメソッドに渡したPromiseの順番と一致します。
以下に例を示します。ここでは、非同期処理であるsetTimeoutを使って、それぞれ2秒、3秒、1秒後にメッセージを表示する関数を定義しています。
function waitTwoSeconds() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('2秒経過しました！');
}, 2000);
});
}
function waitThreeSeconds() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('3秒経過しました！');
}, 3000);
});
}
function waitOneSecond() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('1秒経過しました！');
}, 1000);
});
}これらの関数をPromise.allメソッドを使って実行すると、以下のようになります。
async function waitAll() {
const results = await Promise.all([waitTwoSeconds(), waitThreeSeconds(), waitOneSecond()]);
console.log(results); // ['2秒経過しました！', '3秒経過しました！', '1秒経過しました！']
}上記のコードでは、Promise.allメソッドに3つのPromiseを渡し、全てのPromiseの処理が終わるまで待ち、結果を配列で受け取っています。そして、配列の内容をコンソールに表示しています。
このように、async/await構文とPromise.allメソッドを使うことで、複数の非同期処理を簡単に実行することができます。
まとめ
以上が、JavaScriptのasync/await構文についての使い方とサンプルコードの説明でした。async/await構文を使うことで、非同期処理の結果を簡単に操作することができ、コードが読みやすくなります。ぜひ、実際に使ってみてください。