学ぶ非同期JavaScript入門 | 非同期JavaScriptとAPI統合

メニューを表示するにはスワイプしてください

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

非同期プログラミングは、コードがブロックされない操作を実行できるようにする手法。同期プログラミングでは、各操作が前の操作の完了を待ってから次に進むのに対し、非同期プログラミングでは、前のタスクが終了するのを待たずに他のタスクを進めることが可能。

APIからのデータ取得、ユーザー入力の待機、タイマーの設定など、時間のかかる処理を行う必要があるウェブ開発において重要な概念。

1 と 2 がサーバーリクエスト、3、4、5 がユーザー操作の処理など他の操作であるプログラムを開発していると想定。

同期モデルでは、タスク 1 と 2 が完了するまで 3、4、5 の実行がブロックされる。例えば、ユーザーがコメントを投稿（1）し、その後サイドバーを開こうとすると（3）、コメント処理が終わるまでインターフェースがフリーズし、遅延が発生する。

非同期モデルでは、サーバーリクエスト（1 と 2）がプログラムをブロックしない。レスポンスを待っている間も、プログラムは他のタスク（3、4、5）を継続できる。これにより、ユーザーはコメント投稿後すぐにサイドバーとやり取りでき、応答性が向上する。

同期処理と非同期処理の違い

同期プログラミング

同期プログラミングでは、タスクが順番に実行されます。各タスクは、次のタスクが開始する前に完了しなければなりません。もし1つのタスクが長時間かかる場合（例：大きなファイルのアップロード）、それ以降のすべてのタスクがブロックされ、アプリケーションが応答しなくなることがあります。


              123
            
console.log('Task 1: Start');
for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task
console.log('Task 2: After long task');

この例では、タスク2は長時間実行されるタスク（ループ）が終了した後にのみ実行されます。これによりコードの実行がブロックされ、ブラウザがフリーズする可能性があります。

非同期プログラミング

非同期プログラミングでは、タスクを開始しても他のコードをブロックせずに後で実行できます。これにより、長時間かかる操作（例：データ取得）の完了を待つ間も他のタスクを継続できます。ネットワークリクエストやタイマーなどのタスクが、アプリケーションの他の処理の流れを止めないようにします。

index.html

index.css

index.js

この例では、タスク1は即座に実行され、タスク3も即座に実行されますが、タスク2は2秒後に実行されます。非同期動作により、プログラムはタスク2の完了を待たずに処理を続行できます。

非同期処理の実世界での例

APIからのデータ取得

JavaScriptで最も一般的な非同期処理の一つが、APIを利用してリモートサーバーからデータを取得することです。JavaScriptはAPIにデータをリクエストしますが、サーバーからの応答を待たずに他のコードが実行され続けます。データが利用可能になると、コールバックやPromiseを使って処理されます。

index.html

index.js

同期コード: id="syncMessage" を持つ段落は、非同期フェッチの開始直後に同期コードが実行されることを示しています。プログラムはAPIデータの待機中に一時停止せずに進行します。
非同期フェッチ: データの取得が完了すると、id="apiOutput" を持つ段落が更新され、非同期タスクの完了が示されます。

タイマー（setTimeout と setInterval）

JavaScript の setTimeout() および setInterval() は、遅延後または一定間隔でタスクを実行するためによく使用されます。これらの関数は他のコードの実行を妨げません。指定した遅延や間隔の後にタスクが実行される一方で、他のコードは継続して実行されます。

index.html

index.js

同期コード: id="syncMessage" の段落は直ちに更新され、同期部分のコードがタイマーを待たずに実行されることを示す。
非同期タイマー: 3秒後、setTimeout() のコールバックが完了し、id="timerOutput" の段落が更新されてタイマーの終了を示す。

ユーザー入力イベントの処理

JavaScriptは、ユーザーの操作（クリック、フォーム送信、キー入力など）に対して、他のコードをブロックせずに非同期でイベント発生を待機する。イベントリスナーはノンブロッキングであり、ユーザー入力を待つ間もプログラムの他の部分は実行を継続できる。

index.html

index.js

同期コード: id="syncMessage" の段落は、同期コードがイベントリスナーの設定直後に即座に実行されることを示しています。ユーザーがボタンをクリックするのを待ちません。
非同期イベント処理: ボタンのイベントリスナーはユーザーがクリックしたときに発火し、id="eventOutput" の段落が更新されます。

すべて明確でしたか？

フィードバックありがとうございます！

セクション 4. 章 1

AIに質問する

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 4. 章 1