皆さん、お久しぶりです。今日も元気にハッピーオタクライフを満喫している谷口です。
最近推しコンテンツが増えてしまい、毎日が新情報の日々を送っています。それはとても嬉しいことですが、心臓に悪く、もう何度心が死んだか分かりません。オタクの一喜一憂は生死に関わることなので、出来るだけ小出しにしてほしいものです。小出しでもシンドイですが。
さて、いつものごとく雑談を挟んだところで本題に入りましょう。
今回は、同期・非同期処理とその仕組みについて説明しようと思います。この記事では、主にJavaScriptを使用して説明します。
とまあ前置きはこれくらいにして、早速どうぞっ!
同期・非同期処理とは
この記事では、わかりやすくするために便宜上、
・「実行」は、実際に実行すること
・「処理」は、動かしたいロジックのこと
・「処理する」は、処理を実行すること
という意味で使います。把握お願いします。
同期処理
何の説明もなく早速になりますが、下のコードを見て下さい。
function one() {
console.log("1");
}
function two() {
console.log("2");
}
function three() {
console.log("3");
}
one();
two();
three();
コンソールには次のように出力されます。
1
2
3
関数one, two, threeと実行し、実行した順番通りに処理されました。これが同期処理です。
つまり、同期処理とはコードを実行した順に処理することです。
さて、簡単ではありますが同期処理についての説明は以上です。それでは、非同期処理の説明に入ります。
非同期処理
非同期処理にするために、例としてsetTimeoutを使って説明します。下のコードを見て下さい。
function one() {
console.log("1");
}
function two() {
setTimeout(() => {
console.log("2");
}, 1000);
}
function three() {
console.log("3");
}
one();
two();
three();
twoではsetTimeoutを使用して、1秒後に「2」を表示するようにしています。
このコードが実行されると、次のようになります。
1
3
2
パッと見た感じでは、threeの後にtwoが実行されたように見えますよね。
しかし実際は、同期処理の時と同じく、関数one, two, threeの順で実行されています。
そして、setTimeoutに渡されている処理については、全てのコードが実行された後、処理されます。
このように、コードを実行した順に処理しないのが非同期処理です。
さて、簡単ではありますが、ここまでが同期・非同期処理についての説明です。ここからは、JavaScriptの同期・非同期処理の仕組みをもっと詳しく見ていこうと思います。
同期・非同期処理の仕組み
一旦、同期・非同期処理についてまとめます。
・同期処理は、コードを実行した順に処理すること
・非同期処理は、コードを実行した順に処理しないこと
それでは、同期・非同期処理の動きについて見ていきましょう。
同期処理の動き
同期処理の説明で、例として使ったコードで説明します。
function one() {
console.log("1");
}
function two() {
console.log("2");
}
function three() {
console.log("3");
}
one();
two();
three();
まず、最初にoneが実行され、その後console.logが実行されます。
その後のtwo, threeも同じように実行されます。
まあ見たままの動きです。
では非同期処理の時はどうでしょう。
非同期処理の動き
こちらも、非同期処理の説明で使った例で説明します。
function one() {
console.log("1");
}
function two() {
setTimeout(() => {
console.log("2");
}, 1000);
}
function three() {
console.log("3");
}
one();
two();
three();
まず、oneが実行され、そこでconsole.logが実行され、「1」が表示されます。
次にtwoが実行され、そこでsetTimeoutが実行されます。setTimeoutはこの場では何もしませんが、指定した時間が経過したら、指定した関数をイベントキューに追加します。
JavaScriptのイベントキューは、追加された順に1つずつ取り出され、前の処理が終わるまで次の処理はしません。
次に、oneと同じようにthreeも実行され、「3」が表示されます。
そして、twoのsetTimeoutの実行から1秒経ったら、setTimeoutに指定されていた関数がイベントキューに追加され、それが実行されたら「2」が表示されます。
終わりに、あとがき
日本語が下手くそすぎて真剣に日本語の勉強をせねば、と思った今日この頃です。
たくさん本を読んできたのに、ここまで日本語が壊滅的だと本当に本を読んでたのか謎ですね。
ともあれ、今回の記事はこれで終わりです。きっとまたすぐに記事をアップすることになると思いますが、その時に会いましょう。ではっ!