JavaScript での非同期プログラミング

JavaScript はシングルスレッド言語なので、一度に 1 つのタスクしか処理できません。これにより、スクリプトが完了するまで他のタスクの実行がブロックされるため、複雑なタスクの待機時間が長くなる可能性があります。これに対処するために、JavaScript は非同期プログラミングを提供します。これにより、スクリプトは、非同期タスクが完了するまで待機している間、他のタスクの実行を継続できます。このブログでは、JavaScript での非同期プログラミングの基本と、コールバック関数、Promise、async/await を使用してそれを実現する方法について説明します。

コールバック関数

コールバック関数は、別の関数に引数として渡され、メイン関数の完了後に実行される関数です。コールバックは、次のステップを実行する前にタスクが完了するのを待つために非同期プログラミングで使用されます。

たとえば、次のコードを考えてみましょう:

function slowTask(callback) {
  setTimeout(() => {
    console.log("Slow task completed.");
    callback();
  }, 1000);
}

function runProgram() {
  console.log("Program started.");
  slowTask(() => {
    console.log("Callback function executed.");
  });
  console.log("Program ended.");
}

runProgram();

この例では、slowTask 関数は引数としてコールバックを受け取ります。 lowTask 関数は、setTimeout を使用してタスクの実行を 1 秒遅延します。 runProgram 関数は、slowTask を呼び出し、コールバック関数を引数として渡します。 runProgram 関数は、「プログラムの開始」と「プログラムの終了」も記録します。 lowTask 関数が完了すると、「スロータスク完了」が記録され、コールバック関数が実行され、「コールバック関数が実行されました」が記録されます。
出力は次のようになります:

Program started.
Program ended.
Slow task completed.
Callback function executed.

約束

Promise は、JavaScript での非同期プログラミングへのより現代的なアプローチです。 Promise は非同期操作の結果を表し、保留、履行、または拒否の 3 つの状態のいずれかになります。 Promise は Promise コンストラクターを使用して作成でき、その状態は then メソッドと catch メソッドを使用して決定できます。

例:

const slowTask = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Slow task completed.");
  }, 1000);
});

function runProgram() {
  console.log("Program started.");
  slowTask
    .then((result) => {
      console.log(result);
    })
    .catch((error) => {
      console.error(error);
    });
  console.log("Program ended.");
}

runProgram();

この例では、slowTask は 1 秒後に解決され、「遅いタスクが完了しました。」という結果が得られる Promise です。 runProgram 関数は、slowTask を呼び出し、promise が満たされたときに then メソッドを使用して結果をログに記録します。

The output will be:
Program started.
Program ended.
Slow task completed.

非同期/待機

Async/await は、JavaScript で非同期操作を処理する最新かつ最も読みやすい方法です。これにより、開発者は同期コードのように見える非同期コードを作成できるため、理解と保守が容易になります。 async キーワードは非同期関数を宣言するために使用され、await キーワードは Promise が解決されるのを待つために使用されます。

JavaScript での async/await の使用例を次に示します。

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

fetchData();

この例では、async キーワードを使用して fetchData 関数が非同期として宣言されています。この関数は fetch を使用して API からデータを取得し、await を使用してフェッチ操作が完了するのを待ちます。解決された応答は、response.json() を使用して JSON オブジェクトに変換されます。 await キーワードは、JSON 変換が完了するまで待機するために使用され、最終結果がコンソールに記録されます。

非同期関数内のコードは非同期で実行されますが、関数の外側のコードは同期的に実行されることに注意することが重要です。また、await キーワードは非同期関数内でのみ使用できます。

結論として、JavaScript での非同期プログラミングを使用すると、スクリプトは非同期タスクが完了するのを待っている間も他のタスクの実行を続けることができます。コールバック関数、Promise、async/await は、JavaScript で非同期プログラミングを実現する 3 つの方法です。コールバック関数は非同期操作を処理する最も単純かつ基本的な方法ですが、Promise はより現代的で柔軟なアプローチを提供します。 Async/await は、非同期操作を処理するための最も読みやすい方法を提供し、最新の JavaScript プログラミングに推奨される方法です。 JavaScript の非同期プログラミングを理解することは、効率的で応答性の高いアプリケーションを作成するために重要であり、JavaScript 開発者にとって必須のスキルです。

以上がJavaScript での非同期プログラミングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。