JavaScriptの非同期処理についてまとめてみた。

本記事の目次

同期処理とは

非同期処理について学ぶ前に、まずは同期処理について理解しましょう。

同期処理とは、複数の処理を実行する際に一つずつ順番に処理を実行する方式のことを指します。

例として処理1、処理2という二つの処理が順番に同期処理で記述されていた場合、処理1が完了してから処理2が実行されます。

function func(){
  console.log('処理1');
  console.log('処理2');
}

func();

// 処理1
// 処理2

同期処理ではコードを記述した順番に上から処理が実行されるため、直感的に理解しやすいというメリットがあります。

一方、コードが長ければその分処理に時間がかかり、ユーザーにとってストレスがかかってしまうというデメリットも存在します。

非同期処理では、コードを書いた順番に上から実行されるのではなく、ある処理の実行中にその処理の完了を待たずに他の処理を実行できます。

例として処理3、処理4という二つの処理を実行する際、非同期処理を実装することで処理3を実行しながら同時に処理4を実行することが可能です。

function func(){
  setTimeout(function(){ 
    console.log('処理3'); 
  },1000);
  console.log('処理4'); 
}

func();

// 処理4
// 処理3

上記のコードでは、setTimeoutとconsole.logの二つの処理が記述されていますが、setTimeoutの処理の完了を待たずにconsole.logの処理が実行されており、順番的に下の方に記述されているconsole.logの処理結果の方が先に出力されています。

何万行にも及ぶ思い処理を同期処理で実行すると、処理を完了するまでに長い時間がかかってしまいユーザー目線では画面のフリーズなどのストレスが発生する可能性が高いです。

そこで、非同期処理を実装することで、重たい処理も効率的に実行することができユーザーのストレスの軽減が期待できます。

アプリケーションに対する操作性や応答性の追求は、今後も広がっていくと考えられており、非同期処理による操作性・応答性の向上のメリットはさらに重要になってくる可能性が高いです。

JavaScriptで非同期処理を実装する場合、コールバック（関数）やPromise、await/asyncなどを利用することになるでしょう。

コールバック（関数）とは、ある関数に引数として渡される関数のことを指し、渡された側の関数の処理が終わった後にコールバック（関数）が実行されます。

この際、渡される側の関数にしばしば非同期処理が使用されます。

コールバック（関数）についてはこちらの記事でまとめていますので、コールバック（関数）をもっと知りたい方はぜひお読みください。

Promiseは、日本語訳をすると「約束」を意味する言葉です。

JavaScriptにおけるPromiseとは、非同期処理の終了結果や戻り値を表すオブジェクトです。

Promiseを利用することで、非同期処理をより簡単に記述することができます。

await/asyncとは、非同期処理をより簡潔に記述するための新しい技術です。

await/asyncを利用することで、Promiseを利用した構文よりも簡潔に非同期処理を記述することができます。

ユーザーからのアプリケーションの操作性への感度が高まっている現在、非同期処理を適切に使いこなすことで高いパフォーマンスを発揮できるようになり、より素晴らしいアプリケーションを作り出すことができるようになるでしょう。

初心者からすると難しそうで避けたくなる気持ちもわかりますが、これからJavaScriptを使っていくのであれば避けては通れない道です。

少しずつでも理解を深めていき、JavaScriptスキルのレベルアップに励んでいきましょう。