前回の第12講では、JavaScriptからCSSを変更する方法を学習しました。
文字色や背景色を変更したり、要素を表示・非表示にしたりすることで、Webページの見た目を動的に変えられるようになりました。
また、第11講で学習したイベント処理と組み合わせることで、
- ボタンを押したら色が変わる
- 入力されたら表示内容が変わる
といった動きのあるページも作れるようになりました。
ここまで学習したJavaScriptのコードは、基本的に上から順番に実行されていました。
しかし実際のWebアプリでは、
- 数秒後に処理を実行したい
- データの読み込みを待ちたい
- サーバーから情報を取得したい
といった場面が数多くあります。
このような処理を実現するために必要なのが「非同期処理」です。
今回はJavaScriptの重要な概念である非同期処理について学習していきましょう。
同期処理とは？
まずは同期処理から理解しましょう。
同期処理とは、前の処理が終わるまで次の処理を実行しない仕組みのことです。
例えば次のコードを見てください。
console.log("A");
console.log("B");
console.log("C");
実行結果は次のようになります。
A
B
C
1行目が終わってから2行目、2行目が終わってから3行目というように順番に実行されています。
これが同期処理です。
JavaScriptは基本的に同期処理
JavaScriptは基本的に、
- 上から
- 順番に
- 一つずつ
処理を実行します。
例えば次のコードです。
console.log("処理1");
console.log("処理2");
console.log("処理3");
実行結果
処理1
処理2
処理3
必ずこの順番で実行されます。
まずは、
「JavaScriptは上から順番に実行される」
という原則を覚えておきましょう。
なぜ非同期処理が必要なのか
ここで考えてみましょう。
もし途中に時間のかかる処理があったらどうなるでしょうか。
console.log(“開始”);
// 時間のかかる処理
console.log(“終了”);
もし処理が終わるまで待つしかなければ、その間は画面が停止した状態になります。
ユーザーから見ると、
「ボタンを押したのに反応しない」
ように感じてしまいます。
そこでJavaScriptには、待ちながらも他の処理を続けられる仕組みが用意されています。
それが非同期処理です。
非同期処理とは？
非同期処理とは、処理の完了を待たずに次の処理へ進む仕組みです。
例えば、
A
↓
待機
↓
B
という同期処理に対して、
非同期処理は次のようなイメージになります。
A
↓
後で実行する予約
↓
C
↓
予約した処理を実行
つまり、
「今すぐ実行しなくてもよい処理」
を後回しにできるのです。
setTimeoutとは？
非同期処理を体験するために、まずはsetTimeoutを学習しましょう。
setTimeoutは、指定した時間が経過した後に処理を実行する命令です。
基本構文は次のようになります。
setTimeout(
function () {
},
3000
);
3000は3秒を意味します。
ミリ秒とは？
setTimeoutでは時間をミリ秒（ms）で指定します。
1000ms = 1秒
3000ms = 3秒
5000ms = 5秒
秒数を指定する際は1000倍して考えましょう。
3秒後にメッセージを表示する
次のコードを見てください。
setTimeout(
function () {
console.log("3秒経過しました");
},
3000
);
実行すると、3秒後にメッセージが表示されます。
setTimeoutは、
「指定した時間後に処理を実行する」
ための命令です。
実行順序を確認しよう
次のコードを実行するとどうなるでしょうか。
console.log("A");
setTimeout(
function () {
console.log("B");
},
3000
);
console.log("C");
実行結果は次のようになります。
A
C
B
多くの初心者は、
A
B
C
になると思いがちです。
しかし実際は違います。
setTimeoutは、
「3秒後に実行してください」
と予約するだけだからです。
JavaScriptは予約した後、すぐ次の処理へ進みます。
そのため、
A
↓
Bを予約
↓
C
↓
3秒後にB
という順番になるのです。
この実行順序の理解が、非同期処理の最も重要なポイントです。
setIntervalとは？
setIntervalは、指定した時間ごとに繰り返し処理を実行する命令です。
基本構文は次のようになります。
setInterval(
function () {
},
1000
);
1000msごとに処理が実行されます。
1秒ごとにメッセージを表示する
setInterval(
function () {
console.log("1秒経過");
},
1000
);
実行すると、
1秒経過
1秒経過
1秒経過
…
のように繰り返し実行されます。
setTimeoutとの違いは次の通りです。
|
命令 |
動作 |
|
setTimeout |
一度だけ実行 |
|
setInterval |
繰り返し実行 |
clearIntervalとは？
setIntervalは停止しない限り実行され続けます。
停止するにはclearIntervalを使用します。
const timer = setInterval(
function () {
console.log("実行中");
},
1000
);
clearInterval(timer);
必要に応じて繰り返し処理を停止できることも覚えておきましょう。
イベント処理と組み合わせる
非同期処理はイベント処理と組み合わせることでより実践的になります。
HTML
<p id="message">こんにちは</p>
<button id="btn">変更</button>
</button>
JavaScript
const message = document.getElementById("message");
const btn = document.getElementById("btn");
btn.addEventListener(
"click",
function () {
setTimeout(
function () {
message.style.color =
"red";
},
3000
);
}
;
このコードでは、ボタンをクリックしてから3秒後に文字色が赤へ変化します。
ボタンを押した瞬間ではなく、
「後で実行する」
というのが非同期処理の特徴です。
非同期処理はどこで使われる？
非同期処理はさまざまなWebサービスで利用されています。
例えば、
- タイマー機能
- チャットの自動更新
- 通知表示
- ファイルの読み込み
- サーバーからのデータ取得
などです。
皆さんが普段利用しているWebアプリでも頻繁に利用されています。
API通信との関係
次回学習するAPI通信では、サーバーからデータを取得します。
しかし、サーバーからの返答には時間がかかります。
もし同期処理だけで実行すると、その間は画面が止まってしまいます。
そこで非同期処理が利用されます。
データ取得開始
↓
他の処理を続ける
↓
データが届いたら実行
という流れになります。
今回学習した内容は、次回のAPI通信を理解するための重要な基礎知識です。
まとめ
今回はJavaScriptの非同期処理について学習しました。
- JavaScriptは基本的に同期処理で動作する
- 非同期処理は完了を待たずに次の処理へ進む
- setTimeoutで指定時間後に処理を実行できる
- setIntervalで繰り返し処理を実行できる
- clearIntervalで繰り返し処理を停止できる
- 非同期処理はAPI通信の基礎になる
非同期処理は最初は少し分かりにくい概念ですが、
「後で実行する予約をして先へ進む」
という考え方を理解できれば大丈夫です。
次回はいよいよAPI通信を学習し、外部サービスからデータを取得する方法を学んでいきましょう。
コメント