JavaScriptの非同期処理についてサンプルコード付きで解説！

2023年3月15日

URLをコピーしました！

JavaScriptの非同期処理とは、あるタスクを実行している間に、他のタスクが別の処理を実行できる方式です。
例えば、データベースから値を取得するなどの通信を伴う処理は、通信状況によって時間がかかる可能性があります。
その場合、非同期処理を使うと、通信が完了するまで待つのではなく、他の処理を進めることができます。
今回はJavaScriptの非同期処理について、簡単で分かりやすいサンプルコードを用いて解説します！

非同期処理のサンプルコード

JavaScriptでは、非同期処理を実現するために、コールバック関数やPromiseやasync/awaitなどの機能があります。

コールバック関数とは、ある関数に引数として渡されて、その関数の中で呼び出される関数です。
Promiseとは、非同期処理の結果を表すオブジェクトで、「成功」や「失敗」などの状態や値を持ちます。
async/awaitとは、Promiseをよりシンプルに書くための構文で、「async」キーワードで関数を定義し、「await」キーワードでPromiseの結果を待ちます。

管理者

シンプルなサンプルコードで解説していきます！

コールバック関数

コールバック関数とは、ある関数に引数として渡されて、その関数の処理が終わったら呼び出される関数のことです。
非同期通信に使われる場合、コールバック関数は非同期処理の結果を受け取って、その後の処理を行います。

例えば、setTimeout関数は非同期処理の代表的な関数で、指定した時間が経過したらコールバック関数を実行します。

// 2秒後に"Hello"と表示する

setTimeout(function() {

console.log("Hello");

}, 2000);

上記のコードでは、2秒後に「Hello」と表示するコールバック関数をsetTimeout関数に渡しています。

コールバック関数のサンプルコード

// 非同期処理（1秒後にHello World!と表示する）

function asyncFunc(callback) {

setTimeout(() => {

console.log("Hello World!");

callback(); // コールバック関数

}, 1000);

}

// 非同期処理（1秒後にGoodbye!と表示する）

function asyncFunc2() {

setTimeout(() => {

console.log("Goodbye!");

}, 1000);

}

// 非同期処理を順番に実行する

asyncFunc(asyncFunc2); // Hello World! -> Goodbye!

コールバック関数は非同期処理の基本ですが、複雑な処理をする場合はネストが深くなったり、エラー処理が煩雑になったりする問題があります。
もっと詳しい解説はこちら。

Qiita

[JavaScript] 非同期処理のPromise, async, awaitサンプル多めで丁寧にわかりやすく – Qiita Promiseとか非同期処理が意味不明普段プログラミングで書くのは同期処理です。コードを順番に上から下に実行していって、途中時間のかかる処理の間は動作・画面が途中で止…

そのため、Promiseやasync/awaitといったより便利な方法も開発されています。

Promise

Promiseとは、非同期処理の結果を表すオブジェクトのことです。
Promiseオブジェクトは、pending（未決定）、fulfilled（成功）、rejected（失敗）の3つの状態を持ちます。
非同期処理が完了すると、Promiseオブジェクトはその状態に応じてthenメソッドやcatchメソッドで登録したコールバック関数を実行します。

// HTTPリクエストを送る

fetch("https://example.com/api/data")

// レスポンスをJSONに変換する

.then(response => response.json())

// データを表示する

.then(data => console.log(data))

// エラーがあれば表示する

.catch(error => console.error(error));

上記のコードでは、fetch関数でHTTPリクエストを送り、その結果をPromiseオブジェクトとして受け取っています。
その後、thenメソッドでレスポンスをJSON形式に変換し、もう一度thenメソッドでデータを表示します。
もしエラーが発生したらcatchメソッドでエラーメッセージを表示します。

Promiseのサンプルコード

// 非同期処理（1秒後にHello World!と表示し、成功状態（resolve）にする）

function asyncFunc() {

return new Promise((resolve, reject) => {

setTimeout(() => {

console.log("Hello World!");

resolve(); // 成功状態

}, 1000);

});

}

// 非同期処理（1秒後にGoodbye!と表示し、成功状態（resolve）にする）

function asyncFunc2() {

return new Promise((resolve, reject) => {

setTimeout(() => {

console.log("Goodbye!");

resolve(); // 成功状態

}, 1000);

});

}

// 非同期処理を順番に実行する（thenメソッドでPromiseの結果を受け取る

asyncFunc().then(asyncFunc2) // Hello World! -> Goodbye!

async/await

async/awaitとは、非同期処理をよりシンプルに書くための構文です。
async/awaitはPromiseをベースにしていますが、thenメソッドやcatchメソッドを使わずに、同期処理のように記述できますが、async/awaitを使うには以下の2つのステップが必要です。