JavaScriptには、非同期処理という超重要な概念が存在します。
この非同期処理というのはプログラムで実行される順番を外れて実行されるようなプログラムのことです。この概念はのちのち、非同期通信にも関わってくるようなものですのでしっかりと抑えておくべきものです。
今回は、初学者の方向けに非同期処理とはなんなのか、その基礎・概念についてわかりやすく解説していきます。
- 非同期処理について学びたい方
- JavaScript初学者の方
- 非同期処理の概念がわからない方
非同期処理の解説
非同期処理の概要
まずは非同期処理とは何なのかを解説していきます。
非同期処理とは、実行する処理の順を無視してあとに行う処理のことです。
これはどういうことか？
順番に説明していきます。
まず、プログラムというのは書かれたコードを上から順番に処理をしていきます。これについてはみなさんもご存知のはずです。初学者の方はそうなんだ〜という認識で大丈夫です。
たとえば、このようなプログラムがあるとすれば、処理は上から順番に行われます。これがいわゆる動機処理というものです。
ではなぜ非同期処理というものがあるのか？次のような例を見て考えてみましょう。
このような３つの処理を行うプログラムがあったとします。
しかし、処理２を実行する時間が5.2秒となるとどうなるでしょうか？通常の上から順に処理をしていく同期処理では、処理２を終えるのに５秒強もかかってしまい、処理２が終わるまで処理３を実行することができません。
こうなると、ユーザにとっては負担になると考えられます。
このような実行完了まで時間がかかる処理をいかにうまく処理をするか、ということでここで使うのが非同期処理です。
非同期処理では、この図の場合で行くと処理２を一度終了とみなして次の処理３へと移ります。そこで、処理２で返り値が用意できたときに、また呼び戻して値を返すというものです。
このようにするとどうでしょうか？処理に時間がかかっていたものを一旦終了して後回しにすることでより効率が増すのです。これを、非同期処理と呼びます。
この非同期処理は後のDOMやHTTP通信をする際に関わってくる非同期通信にも通ずるものですので、複数回に分けてもいいのでしっかりと理解しておく必要があります。
非同期処理の例
概念だけを説明されてもまだ抽象的なので、わかりにくいはずです。
なので、ここでは実際のコードを見て行きましょう。
次のようなテキストファイルを同じ階層のディレクトリに作ってください。
Stock 日本株,米国株,中国株,欧米株,インド株,東南アジア,アフリカ
Ticker ETF
SPY
QQQ
VOO
VTI
VEA
HDV
SPYDディレクトリを見るとこのようなファイル構成になっています。
├── strings.txt
└── test.jsそして、ここからがサンプルコードです。
console.log("Start Asynchronous processing !!");
const rf = require('fs');
rf.readFile("strings.txt","utf-8",(err,file)=>{
if (err){
throw err;
}
console.log("read file !!");
console.log(file);
});
console.log("End Asynchronous processing !!");$ node asynchro.js
Start Asynchronous processing !!
End Asynchronous processing !!
read file !!
Stock 日本株,米国株,中国株,欧米株,インド株,東南アジア,アフリカ
Ticker ETF
SPY
QQQ
VOO
VTI
VEA
HDV
SPYD一例ですが、このプログラムを実行してみてください。
このコードはテキストファイルに記載されている文字をそのまま読み取るものです。ターミナルでは改行もしっかりとテキストファイルのとおりになっています。
結果を見ると、プログラムでは最も最後に書かれていた出力が２番目に出力されているのがわかるかと思います。
これが非同期処理で行った結果です。このreadFileメソッドは最初から非同期処理が組み込まれた非同期関数です。
このように、非同期処理を行うためには非同期関数を使っていきます。非同期関数はこれ以外にも複数存在します。
- async
- await
- promise
ここではまずは非同期処理について理解を深めてもらうため、これらに関しては別の記事で詳しくは解説していきます。
まとめ
では、今回のまとめに入ります。
今回は次のようなことについて学びました。
- 非同期処理の基礎
- 非同期処理の生まれた経緯
- 非同期処理の流れ
今回はここまでとなります。
お疲れさまでした。
参考文献
