JavaScript 非同期プログラミングの理解: コールバック、Promise、および Async/Await

JavaScript の非同期の性質は、ユーザーフレンドリーで応答性が高く、効率的なアプリを作成するために不可欠です。ナビゲーションを成功させるには、コールバック、Promise、async/await などの非同期プログラミングの基本的な考え方を理解することが重要です。このマニュアルでは、これらのアイデアを詳細に分析し、その用途、利点、欠点を検討します。

---

非同期プログラミングと同期プログラミング

同期プログラミング:

• 同期プログラミングでは、タスクは順番に実行されます。プログラムはタスクが完了するのを待ってから、次のタスクに進みます。
• このアプローチは、特にネットワーク リクエストやファイル処理などの時間のかかる操作の際に、非効率につながる可能性があります。

同期コードの例:

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

非同期プログラミング:

• 非同期プログラミングではタスクを独立して実行できるため、プログラムは一部のタスクが完了するのを待っている間に他の操作の実行を継続できます。
• これは、待機中にユーザー インターフェイスがフリーズする可能性があるサーバーからのデータのフェッチなどのタスクに特に役立ちます。

---

なぜ非同期プログラミングが必要なのでしょうか?

1. 応答性: 長時間の操作中に UI が応答しなくなるのを防ぎます。
2. 効率: 複数の操作の同時実行を可能にし、リソースの使用量を最適化します。
3. ユーザー エクスペリエンス: スムーズで中断のないワークフローを確保することで、インタラクションを強化します。

---

コールバック

定義: コールバックは、別の関数に引数として渡され、タスクの完了後に実行される関数です。

例:

function fetchData(callback) {
    console.log("Fetching data...");
    setTimeout(() => {
        const data = "Data received"; // Simulate fetched data
        callback(data); // Execute the callback with the data
    }, 2000);
}

fetchData((data) => {
    console.log(data); // Logs after data is fetched
});

説明:

• fetchData 関数は、setTimeout を使用して遅延をシミュレートします。
• 遅延が終了すると、フェッチされたデータを使用してコールバックが実行されます。

コールバックに関する問題:

• コールバック地獄: 複数の非同期操作が相互に依存している場合、深くネストされたコールバックにより、コードの読み取りと保守が困難になります。

---

約束

定義: Promise は、非同期操作の最終的な完了 (または失敗) とその結果の値を表すオブジェクトです。

メリット:

• 非同期操作のチェーンを簡素化します。
• コールバックと比較して、より優れたエラー処理を提供します。

例:

function fetchData() {
    return new Promise((resolve, reject) => {
        console.log("Fetching data...");
        setTimeout(() => {
            const data = "Data received";
            resolve(data); // Resolve the promise with data
        }, 2000);
    });
}

fetchData()
    .then(data => {
        console.log(data); // Logs after promise is resolved
    })
    .catch(error => {
        console.error(error); // Handles errors
    });

説明:

• Promise は、成功の場合は .then() を、エラー処理の場合は .catch() を連鎖させることで読みやすさを向上させます。
• コールバックに特有の入れ子構造を排除します。

---

非同期/待機

定義: Async/await は Promise の上に構築された糖衣構文であり、同期コードのように見え、動作する非同期コードを作成できます。

メリット:

• コードの可読性と保守性が向上します。
• 非同期ロジックをより直接的に処理します。

例:

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

説明:

• async キーワードは、関数に非同期コードが含まれていることを示します。
• await キーワードは、Promise が解決されるまで実行を一時停止し、非ブロッキングのままでコードが同期しているように見えます。

---

重要なポイントのまとめ

1. 同期と非同期:

   • 同期コードはタスクが完了するまで実行をブロックします。
   • 非同期コードにより、他のタスクを同時に実行できます。

2. コールバック:

   • 非同期結果を処理するために渡される関数。
   • 複雑な依存関係によりコールバック地獄に陥る可能性があります。

3. 約束:

   • チェーンとエラー処理をサポートする、コールバックのよりクリーンな代替手段。

4. 非同期/待機:

   • 非同期コードをより読みやすく、保守しやすくします。

---

これらの戦略を理解して活用することで、効果的で使いやすい JavaScript アプリケーションを開発できます。簡単なタスクを管理する場合でも、複雑なワークフローを作成する場合でも、熟練した JavaScript 開発者になるには、非同期プログラミングを学習することが不可欠です。

Github Linkedin スレッドでフォローしてください

以上がJavaScript 非同期プログラミングの理解: コールバック、Promise、および Async/Awaitの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。