JavaScriptで特定の処理が終わった後に実行する方法を解説！【Promise、async/await】

スポンサーリンク
2025.01.27

JavaScriptでプログラムを作成していると、「ある処理が完了してから次の処理を実行したい」という状況に出会うことがよくあります。例えば、APIからデータを取得して画面に表示する、ファイルの読み込みが完了してからデータを処理すると、非同期的な処理が必要な場面です。

しかし、JavaScriptは基本的にシングルスレッドで動作しているため、非同期処理を適切に扱わないと、意図しないタイミングで処理が実行されてしまうことがあります。そこで、本記事では、「特定の処理が終わった後に実行する方法」として、コールバック関数、Promise、async/awaitといった主な手法をわかりやすく解説していきます。

非同期処理の基本を理解し、状況に応じた最適な方法を選べるようになりましょう！

非同期処理とは？

非同期処理とは、「処理が完了するのを待たずに次の処理を進めるプログラムの動作」のことを指します。JavaScriptでは、非同期処理を扱うことで、時間がかかるタスク（例：APIのデータ取得やファイルの読み込み）を実行中に、他の処理をブロックせずに並行して実行できます。

これに対して、すべての処理が順番に実行され、1つの処理が終わるまで次の処理が進まない動作は同期処理と呼ばれます。

同期処理の例

console.log("処理を開始します");
console.log("同期処理中...");
console.log("処理が完了しました");

出力結果

処理を開始します  
同期処理中...  
処理が完了しました

同期処理では、コードが上から順に実行されるため、結果も予測しやすいです。

非同期処理の例

console.log("処理を開始します");

setTimeout(() => {
    console.log("非同期処理中...");
}, 2000);

console.log("処理が完了しました");

出力結果

処理を開始します  
処理が完了しました  
非同期処理中...

この例では、setTimeout が2秒後に「非同期処理中・・・」を出力するように指定されています。そのため、「処理が完了しました」というメッセージが先に表示されます。

非同期処理のメリット

非同期処理を使用することで、以下のような利点があります。

  • ユーザーインターフェースの応答性が向上する（ブラウザが固まらない）。
  • ネットワーク通信やファイル操作など、時間のかかる処理を効率的に扱える。

非同期処理は、JavaScriptの中核的な特徴の一つであり、特にブラウザやサーバーサイド（Node.js）の環境で重要な役割を果たします。次のセクションでは、非同期処理を実現するための具体的な方法を詳しく見ていきましょう！

主な方法とコード例

JavaScriptで「特定の処理が終わった後に別の処理を実行する」ための方法はいくつかあります。このセクションでは、以下の3つの手法を順に解説します：

  1. コールバック関数
  2. Promise
  3. async/await

１. コールバック関数

コールバック関数は、他の関数に引数として渡され、処理が完了したタイミングで呼び出される関数です。これは非同期処理を扱う最も基本的な方法です。

function doTask(callback) {
    console.log("タスクを実行中...");
    setTimeout(() => {
        console.log("タスクが完了しました");
        callback();
    }, 2000);
}

doTask(() => {
    console.log("次の処理を実行します");
});

実行結果

タスクを実行中...
タスクが完了しました
次の処理を実行します

２. Promise

Promiseは、非同期処理の成功や失敗を管理するオブジェクトです。コールバック関数に比べてコードの可読性が向上します。

function doTask() {
    return new Promise((resolve) => {
        console.log("タスクを実行中...");
        setTimeout(() => {
            console.log("タスクが完了しました");
            resolve();
        }, 2000);
    });
}

doTask().then(() => {
    console.log("次の処理を実行します");
});

実行結果

タスクを実行中...
タスクが完了しました
次の処理を実行します

ポイント

  • thenメソッドを使うことで、非同期処理が成功した後の処理を指定できます。
  • エラーハンドリングにはcatchメソッドを使用します。

３. async/await

async/await は、Promiseをよりシンプルに扱える構文です。同期処理のように書けるため、コードがさらに読みやすくなります。

async function doTask() {
    console.log("タスクを実行中...");
    await new Promise((resolve) => setTimeout(resolve, 2000));
    console.log("タスクが完了しました");
}

async function main() {
    await doTask();
    console.log("次の処理を実行します");
}

main();

実行結果

タスクを実行中...
タスクが完了しました
次の処理を実行します

ポイント

  • 関数にasyncを付けることで、awaitを使用できます。
  • awaitはPromiseの完了を待機し、後続の処理を実行します。

どの方法を使うべき？

  • 簡単な非同期処理であれば、コールバック関数が有効です。
  • 複数の非同期処理を扱う場合は、コードの可読性を考えてPromiseかasync/awaitを使用するのがおすすめです。
  • よりモダンで可読性が高いコードを目指す場合は、async/awaitを優先しましょう。

まとめ

本記事では、JavaScriptで特定の処理が完了した後に別の処理を実行する方法について、以下の3つの手法を解説しました。

  1. コールバック関数
    シンプルな非同期処理に適していますが、ネストが深くなるとコードが複雑になりがちです。
  2. Promise
    コールバック関数の欠点を解消し、チェーン構造で処理をわかりやすく記述できます。
  3. async/await
    Promiseをさらに簡潔に扱える構文で、同期処理のように直感的に非同期処理を書けるため、特にモダンなJavaScript開発では主流となっています。

非同期処理は、JavaScriptを使う上で欠かせない重要な概念です。それぞれの方法を理解し、用途に応じて適切に使い分けることで、効率的でメンテナンス性の高いコードを実現できます。

特に現在では、async/awaitが推奨される場面が多くなっていますが、コールバックやPromiseも理解しておくことで、幅広いコードに対応できるようになります。

今後、非同期処理を活用して、さらに高度なアプリケーション開発に挑戦してみてください！

スポンサーリンク

コメント