JS 非同期処理の基礎

1. 非同期コード (Asynchronous Code)

非同期コード（Async code）を使用すると、プログラムはデータの取得などの時間のかかるタスクを開始したまま、そのタスクが完了するのを待たずに他のタスクを続行することができます。

非同期コードはアプリケーションのフリーズを防ぎます。これはユーザーエクスペリエンス（UX）において極めて重要です。

2. コントロールフロー (Control Flow)

コントロールフロー（Control Flow）とは、プログラム内でステートメントが実行される順序のことです。
デフォルトでは、JavaScript はコードを上から下へ、左から右へと実行します。
非同期プログラミングは、この標準的な流れを変化させます。

3. JavaScript のコード実行方法

JavaScript はコードを一行ずつ実行します。
各行は、次の行が実行される前に完了していなければなりません。

myDisplayer("A");
myDisplayer("B");
myDisplayer("C");

4. 関数の実行順序

JavaScript の関数は、定義された順序ではなく、呼び出された順序で実行されます。

この例では、関数が呼び出された順序に従って「Hello Goodbye」と表示されます。

function myFirst() {
  myDisplayer("こんにちは");
}

function mySecond() {
  myDisplayer("さようなら");
}

myFirst();
mySecond();

この例では、呼び出し順序に従って「さようなら こんにちは」と表示されます。

function myFirst() {
  myDisplayer("こんにちは");
}

function mySecond() {
  myDisplayer("さようなら");
}

mySecond();
myFirst();

上記の例は、標準的な同期フロー（Synchronous flow）です。

5. なぜ非同期コードを使うのか

ネットワークリクエスト、タイマー、ユーザー入力など、いくつかのタスクは完了までに時間を要します。
アプリケーションの応答性を維持するために、JavaScript は非同期プログラミングを利用します。

非同期フロー（Asynchronous flow）とは、JavaScript が特定の操作をバックグラウンドで実行し、準備が整ったときにその結果を処理できるようにする仕組みのことです。

もし JavaScript がこれらのタスクを待機してしまうと、ページがフリーズしてしまいます。
非同期コードを使用することで、プログラムの残りの部分を実行し続けることができます。

非同期コードはすぐには実行されません：

• タイマー（Timers）：指定されたミリ秒数が経過した後に実行されます
• イベント（Events）：イベントによってトリガーされたときに実行されます
• ネットワークリクエスト（Network requests）：データが到着したときに実行されます

「フリーズしたページ」は「壊れたページ」と同じです。非同期コードは実行をブロックしません。

6. 非同期コードの実行例

myDisplayer("A");

// 1000ミリ秒（1秒）後に実行される
setTimeout(function() {
  myDisplayer("B");
}, 1000);

myDisplayer("C");

上記の例の出力結果は 「A C B」 となります。

7. 初心者がよく陥る混乱

let result;

// 非同期処理を開始
setTimeout(function() {
  result = 5;
}, 1000);

// ここでの result は何でしょうか？
console.log(result);

結果は undefined になります。なぜなら、非同期コードがまだ完了していないためです。
初心者は非同期の結果がすぐに得られると期待しがちですが、注意が必要です。

8. JavaScript イベント

イベント（Events）とは、ブラウザで発生するアクションや出来事のことです。多くの場合、ユーザーの操作（クリック、キー入力、フォームの送信）やブラウザ自体（ページの読み込み完了、リサイズ）によってトリガーされます。

<button onclick="displayDate()">現在の時刻は？</button>

9. 非同期処理のコア概念

JavaScript は、さまざまなコア概念を使用して非同期プログラミングを処理します。

10. 非同期 (Asynchronous) vs 並列 (Parallel)

並列（Parallel）とは、異なるプロセッサ上で複数のことを同時に行うことを意味します。
非同期（Asynchronous）とは、タスクを切り替えることを意味し、必ずしも同時に実行されているわけではありません。

シングルスレッドの JavaScript エンジンは、複数の CPU コアを利用するのではなく、イベントループ（Event Loop）を使用してタスクを切り替えることで非同期タスクを処理します。タスクが完了すると、コールバック、プロミス、またはイベントを介してメインスレッドに結果を処理するようシグナルを送ります。