JavaScriptで非同期呼び出しの応答（結果）を返す方法を徹底解説

はじめに：非同期処理の結果を受け取るには？

JavaScriptには、非同期呼び出しから応答（結果）を受け取る方法が複数存在します。まず、問題の本質を整理してみましょう。

たとえば、fooという非同期関数があり、しばらく時間が経ってからデータを返すとします。このとき、結果を受け取る方法は主に2つあります。

• コールバック方式： 準備ができた時点で実行されるコールバック関数を引数として渡す
• Promise方式： 非同期処理の完了を表すPromiseオブジェクトを返す

方法1：コールバック関数を使う

例として、setTimeout関数はコールバックを受け取り、指定した時間の経過後にそれを実行します。コールバック方式を採用する場合、次のように関数を渡します。

サンプルコード

function myFunc(cb) {
    setTimeout(() => cb(100), 1000);
}
myFunc((a) => console.log(a));

出力結果

100

このコードでは、setTimeoutにコールバックを渡しており、1000ミリ秒（1秒）後に実行されます。その内部の関数が実行されると、値100とともに引数で渡されたコールバック（cb）が呼び出され、コンソールに出力される仕組みです。

方法2：Promiseを使う

同じことはPromiseを使っても実現できます。非同期処理をPromiseでラップし、関数の戻り値でPromiseをresolveします。その後、thenメソッドをチェーンすることで、非同期処理の結果を受け取るコールバックを登録できます。

サンプルコード

new Promise(resolve => setTimeout(() => resolve(100), 1000))
    .then(console.log);

出力結果

100

この例では、1秒後にresolve(100)が呼ばれ、Promiseが履行（fulfilled）されたタイミングでthenに登録したconsole.logが実行されます。

補足：async/awaitでさらに読みやすく

近年のモダンなJavaScriptでは、async/await構文を使うことで、Promiseベースの非同期処理を同期的なコードのように直感的に記述できます。

async function main() {
    const result = await new Promise(resolve => setTimeout(() => resolve(100), 1000));
    console.log(result);
}
main(); // 100

awaitを使うことで、Promiseの解決を待ってから次の行を実行できるため、ネストが深くなりがちなコールバックやthenチェーンよりも可読性が向上します。

まとめ

• 非同期処理の結果を受け取るには「コールバック」と「Promise」の2つの方法がある
• コールバックはシンプルだが、ネストが深くなりやすい（コールバック地獄）
• Promiseはthenチェーンで処理をつなげられ、エラーハンドリングも容易
• モダンなコードではasync/awaitを組み合わせるのが主流