JavaScript はシングルスレッド言語です。つまり、一度に 1 つのことしか実行できません。ただし、Web アプリケーションはサーバーからのデータの取得などのタスクを実行する必要があることが多く、これには時間がかかることがあります。 JavaScript が各タスクの完了を待ってから次に進む必要がある場合、Web アプリが遅くなり、応答しなくなる可能性があります。ここで、非同期 (非同期) JavaScript が登場します。

非同期JavaScriptとは何ですか?

非同期 JavaScript を使用すると、コードでタスクを開始し、そのタスクが完了するまで待機している間に他のタスクに進むことができます。タスクが完了すると、コードが戻って結果を処理できます。これにより、アプリの高速性と応答性を維持することができます。

非同期 JavaScript の主要な概念

1. 同期と非同期:

   • 同期: 各タスクは、前のタスクが完了するのを待ってから開始します。例えば：

    console.log("Start");
    let result = someFunction(); // This might take a while
    console.log("End");
   

   同期コードでは、someFunction() が完了した後にのみ「End」メッセージが記録されるため、処理が遅くなる可能性があります。

• 非同期: タスクは独立して開始および終了できるため、コードが待機中にスタックすることはありません。例えば：
  

   console.log("Start");
   setTimeout(() => {
       console.log("End");
   }, 2000);
  

  ここでは、「終了」メッセージが 2 秒後に記録されますが、その間、コードは他の処理を続けることができます。

1. コールバック:

   • コールバックは、別の関数に引数として渡される関数であり、タスクの完了後に実行されます。
   • 例：

    function fetchData(callback) {
        setTimeout(() => {
            let data = "Some data";
            callback(data);
        }, 2000);
    }
   
    fetchData((data) => {
        console.log(data); // This will log "Some data" after 2 seconds
    });
   

• コールバックは非同期タスクを処理する本来の方法ですが、特に管理するタスクが多い場合には複雑になる可能性があります (これは「コールバック地獄」として知られています)。

1. 約束:

   • promise は、非同期タスクの最終的な完了 (または失敗) とその結果の値を表すオブジェクトです。
   • 例：

    let promise = new Promise((resolve, reject) => {
        let success = true;
        if (success) {
            resolve("Task completed successfully!");
        } else {
            reject("Task failed!");
        }
    });
   
    promise.then((message) => {
        console.log(message);
    }).catch((error) => {
        console.log(error);
    });
   

• resolve: タスクが正常に完了すると、Promise は値を使用して「解決」されます。
• reject: タスクが失敗した場合、Promise はエラー メッセージとともに「拒否」されます。
• .then(): Promise が解決された場合に返される値を処理します。
• .catch(): Promise が拒否された場合にエラーを処理します。

1. 非同期/待機:

   • async と await は、Promise の操作をより簡単かつ読みやすくする最新の JavaScript 機能です。
   • async: async で宣言された関数は常に Promise を返します。
   • await: Promise が解決されるまで非同期関数の実行を一時停止します。
   • 例：

    async function fetchData() {
        try {
            let data = await someAsyncTask();
            console.log(data);
        } catch (error) {
            console.error("Error:", error);
        }
    }
   

• この例では、await キーワードを使用して、コードの次の行に進む前に someAsyncTask が完了するのを待ちます。タスクが失敗した場合、エラーはキャッチされ、catch ブロックで処理されます。

まとめ

• 非同期 JavaScript は、コードが複数のタスクを同時に処理できるようにすることで、アプリが遅くなったり応答しなくなったりするのを防ぎます。
• コールバックは、非同期タスクの完了後に実行される関数ですが、複雑なタスクでは面倒になる可能性があります。
• Promises は、将来完了するタスクを表す、非同期操作を処理するよりクリーンな方法を提供します。
• Async/Await は、Promise の操作をよりシンプルかつ読みやすくする最新の構文です。

非同期 JavaScript を理解することは、応答性の高い効率的な Web アプリケーションを構築するために不可欠です。非同期 JavaScript を理解すると、遅い操作の完了を待ってスタックすることなくコードがタスクを実行できるようになります。