JavaScriptの同期と非同期

JavaScript の同期処理と非同期処理

JavaScript はシングルスレッドで動作します。これは、一度に一つのことしか実行できないことを意味します。効率的なコードを書くためには、JavaScript がどのようにタスクを処理するかを理解する必要があります。

同期 JavaScript

同期コードは一行ずつ実行されます。各タスクは、前のタスクが完了するのを待ちます。これは「ブロッキング（blocking）」と呼ばれます。一つのタスクに時間がかかると、プログラム全体が停止してしまいます。

• 実行: 固定された順序。
• ブロッキング: あり。
• 複雑さ: 単純。
• 最適な用途: 単純な逐次タスク。

非同期 JavaScript

非同期コードは独立して動作します。タスクは待機中に他のコードをブロックしません。これは「ノンブロッキング（non-blocking）」と呼ばれます。タスクはバックグラウンドで開始され、完了時に通知されます。

• 実行: タスクが独立して実行される。
• ブロッキング: なし。
• 複雑さ: 高い。
• 最適な用途: API コール、タイマー、ファイル操作。

非同期タスクを処理する3つの方法:

1. Callbacks: タスク完了後に実行される関数。
2. Promises: 操作の完了または失敗を表すオブジェクト。
3. Async/Await: 最もクリーンな方法。スレッドをブロックすることなく、非同期コードを同期コードのように記述できます。

一般的な非同期操作:

• タイマー: setTimeout()
• API コール: fetch()
• ファイル読み込み: readFile()
• ユーザーイベント: addEventListener()

これらを実現しているのが Event Loop です。Event Loop は、Call Stack、Web APIs、および Callback Queue を使用して、複数のタスクを同時に管理します。

まとめ:

• 同期: 逐次実行。実行をブロックする。
• 非同期: 独立したタスク。ブロックしない。
• JavaScript のデフォルト: 同期。

Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.w3schools.com/js/js_asynchronous.asp Source: https://medium.com/@mohdtalib.dev/what-is-synchronous-and-asynchronous-in-javascript-07adb7b4cc5f

Full post: https://dev.to/raja_b_0c9d242e2c26cf063b/javascript-synchronous-and-asynchronous-2a69