非同期プログラミングは、開発者がメイン スレッドをブロックすることなく、長いネットワーク リクエスト、ファイル操作、その他の時間のかかるタスクを実行できるようにする JavaScript の重要な側面です。これにより、アプリケーションの応答性と使いやすさが確保されます。 JavaScript は、非同期操作を処理するための 3 つの主な方法、コールバック、プロミス、および非同期/待機を提供します。この記事では、これらの各メソッドを詳しく説明し、詳細な例を通じてその構文、使用法、および違いを調べます。

目次

1. 非同期プログラミング入門
2. コールバック
   • 構文と例
   • 長所と短所
3. 約束
   • 構文と例
   • 約束の連鎖
   • 長所と短所
4. 非同期/待機
   • 構文と例
   • エラー処理
   • 長所と短所
5. 比較とベスト プラクティス
6. 結論

非同期プログラミングの概要

JavaScript では、サーバーからのデータの取得、ファイルの読み取り、計算の実行など、完了までに時間がかかる操作を非同期で処理できます。これは、操作が完了するのを待っている間、JavaScript エンジンは他のタスクの実行を継続できることを意味します。これは、Web アプリケーションで効率的かつスムーズなユーザー エクスペリエンスを作成するために非常に重要です。

コールバック

構文と例

コールバックは、JavaScript で非同期操作を処理するための最も初期のメソッドの 1 つです。コールバックは、別の関数に引数として渡される単なる関数であり、非同期操作が完了すると実行されます。

function fetchData(callback) {
    setTimeout(() => {
        callback("Data fetched!");
    }, 1000);
}

function displayData(data) {
    console.log(data);
}

fetchData(displayData);

上記の例では、fetchData は setTimeout を使用して非同期操作をシミュレートします。 1 秒後、displayData 関数を呼び出し、取得したデータを引数として渡します。

長所と短所

利点:

• 小さなタスクにはシンプルで簡単です。
• 非同期操作の完了後にコードを実行する方法を提供します。

短所:

• 複数の非同期操作がネストされている場合、「コールバック地獄」が発生する可能性があり、コードの読み取りと保守が困難になります。
• エラーはコールバックごとに管理する必要があるため、エラー処理は面倒です。

約束

構文と例

Promise は、コールバックに関連する問題に対処するために ES6 (ECMAScript 2015) で導入されました。 Promise は、まだ完了していないが、将来に期待される操作を表します。保留中、履行済み、または拒否済みの 3 つの状態のいずれかになります。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("Error:", error);
    });

この例では、fetchData は「データがフェッチされました!」で解決される Promise を返します。 1秒後。 then メソッドは解決された値を処理するために使用され、catch はエラーを処理するために使用されます。

約束を連鎖させる

Promise を連鎖させて、一連の非同期操作を順番に実行できます。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

function processData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(`${data} Processed!`);
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data);
        return processData(data);
    })
    .then(processedData => {
        console.log(processedData);
    })
    .catch(error => {
        console.error("Error:", error);
    });

この例では、fetchData の後に processData が呼び出され、結果は then を使用して順番に処理されます。

長所と短所

利点:

• 非同期操作の連鎖を許可することでコールバック地獄を回避します。
• catch による組み込みのエラー処理を提供します。
• コードの可読性と保守性が向上します。

短所:

• 複数のネストされた then 呼び出しでは依然として複雑になる可能性があります。
• チェーン内のエラー処理は簡単ではない場合があります。

非同期/待機

構文と例

Async/Await は、Promises を使用して非同期コードを記述する、より読みやすく簡潔な方法を提供します。 async キーワードは非同期関数を定義するために使用され、await キーワードは Promise が解決されるまで実行を一時停止するために使用されます。

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

async function displayData() {
    const data = await fetchData();
    console.log(data);
}

displayData();

この例では、displayData はデータをログに記録する前に fetchData が完了するのを待つ非同期関数です。

エラー処理

Async/Await によるエラー処理は、try/catch ブロックを使用して実行できます。

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("Failed to fetch data!");
        }, 1000);
    });
}

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

displayData();

ここで、fetchData が失敗した場合、エラーは catch ブロックによって捕捉され、ログに記録されます。

長所と短所

利点:

• 非同期コードを簡素化し、同期コードのように見せます。
• コードの可読性と保守性が向上します。
• try/catch ブロックを使用してエラー処理を簡素化します。

短所:

• Async/Await は Promise の上に構築されているため、Promise を理解する必要があります。
• まだ比較的新しいため、一部の環境では完全にサポートされていない可能性があります。

比較とベストプラクティス

比較

• コールバック: 単純な単一レベルの非同期タスクに適していますが、複雑なシナリオではコールバック地獄につながる可能性があります。
• Promises: 可読性と管理性が向上し、非同期操作の連鎖が可能になります。 catch.
による組み込みエラー処理
• Async/Await: 非同期コードを記述するための最も読みやすく保守しやすい方法を提供します。エラー処理を簡素化し、同期コードのように見えます。

ベストプラクティス

• 非同期操作を処理する必要があるほとんどのシナリオでは、Async/Await を使用します。最高の読みやすさとシンプルさを提供します。
• 複数の非同期操作を順番に実行する必要がある場合、または Promises を返すライブラリを使用する場合は、Promises を使用します。
• レガシー コードを使用する場合、または非常に単純な非同期タスクを処理する場合を除き、コールバックを避けてください。
結論

JavaScript での非同期プログラミングは、応答性が高く効率的なアプリケーションを構築するために不可欠です。コールバック、プロミス、非同期/待機の違いを理解することで、開発者は特定のユースケースに適したツールを選択できるようになります。コールバックは非同期操作を処理する最も単純な形式ですが、コードが乱雑になる可能性があります。 Promise はより構造化されたアプローチを提供しますが、Async/Await は最もエレガントで読みやすいソリューションを提供します。ベスト プラクティスに従い、これらのツールを理解することで、開発者はクリーンで保守しやすく効率的な非同期コードを作成できます。