【JavaScript】同期処理と非同期処理についてのサンプルコードを作ってみた

はじめに

こんにちは！
今回は曖昧だった同期処理と非同期処理についてを調べていました。
実際にJavaScriptでサンプルのコードも作ってみたので、
コピペして実際に動かしてみていただき動きとしてこういう動きになるんだなと知っていただければと思います。

同期処理と非同期処理についての簡単な説明

まずは同期処理とはどういう動きかと非同期処理はどういう動きかという説明を簡単に説明します。
詳細な情報は他の方の記事ですでにあり私が書くより良質でわかりやすく勉強になると思うのでぜひ調べてみてください！
ということで話を戻します！

同期処理

同期処理というのは上から順番に処理が実行していくことです。
処理順としては以下になります。

同期処理

--- 処理開始 ---
実行処理①
実行処理②
== 実行終了まで5秒かかる ==
実行処理③
== 5秒経過 ==
実行処理④
実行処理⑤
--- 処理終了 ---

上記は順番に処理が実行されていますね。
そして「実行処理③」の処理に５秒かかってしまいます。
その間も次の処理に進むことなく「実行処理③」が終了した後に「実行処理④」に進んでいます。
このことを同期処理といいいます！
これだと一つの処理時間かかるとそれまで待たなければいけないので時間がかかりますね。。。
基本的には同期処理で実行はされています！

非同期処理

非同期処理は同期処理とは違います。
動きとしては時間のかかる処理が実行されるとその処理は実行されているけど次の処理にそのまま進みます。
そうです。処理が並行することを非同期処理といいいます。

非同期処理

--- 処理開始 ---
実行処理①
実行処理②
== 実行終了まで5秒かかる ==
実行処理③
== 5秒経過 ==
実行処理④　→ 「実行処理③」の処理が終了していないけど次の処理を実行する
実行処理⑤
--- 処理終了 ---

実際の処理終了
--- 処理開始 ---
実行処理①
実行処理②
(ここで実行処理③の実行開始)
実行処理④　
実行処理⑤
実行処理③完了
--- 処理終了 ---

上記のように「実行処理③」が実行されて５秒待たずに「実行処理④」が実行されます。
そして最終的な実行完了としては
「実行処理⑤」の後になります。

実際にコードを見てみよう

先ほど簡単に同期処理と非同期処理について簡単に説明したところで
多少イメージできたと思いますが　、実際にどういう時に非同期処理が使用されるかについては
イメージがつかない人がいると思います。ちなみにどこだと思いますか？
そうですサーバーとの通信するときなどに使用されます。
例えばAPIを取得するときとか画像を取得するときとかですね。
ちなみに非同期処理がないとアプリが固まっているように見えるなどのデメリットがあります。
では実際に動かしてみましょう！
今回のサンプルは擬似的なAPIを取得する時の同期処理と非同期処理の動きが見えるというプログラムになります。
では同期処理からです。

同期処理（JavaScript）

// 同期処理」
syncProcessExection();

// APIを取得する
function getApi() {
  // サンプルのAPIレスポンス
  var api = {
    "userid": "sampleAPI",
    "username": "apiTaro",
    "age": 20,
    "password": "taro0000"
  }
  return api
}

// 同期処理
function syncProcessExection() {
  var i = 5;
  console.log("処理①");
  console.log("処理②");
  console.log("通信中です・・・")
  countdown = setInterval(function() {
    if(i == 0) {
      clearInterval(countdown);
      var api = getApi();
      console.log("通信が完了しました！ : ",api);
      console.log("処理③ API実行",api.userid);
      console.log("処理③ API実行",api.username);
      console.log("処理③ API実行",api.age);
      console.log("処理③ API実行",api.password);
      afterProcess = setInterval(function() {
        console.log("処理④");
        console.log("処理⑤");
        clearInterval(afterProcess);
      },1000)
    } else {
      console.log(i);
      --i
    }
  }, 1000);
}

ログは以下になります！

次に非同期処理です。

非同期処理（JavaScript）

//  非同期処理
asyncProcessExection();

// APIを取得する
function getApi() {
  // サンプルのAPIレスポンス
  var api = {
    "userid": "sampleAPI",
    "username": "apiTaro",
    "age": 20,
    "password": "taro0000"
  }
  return api
}

// 処理実行
function asyncProcessExection() {
  console.log("処理①");
  console.log("処理②");
  apiProcess();
  console.log("処理④");
  console.log("処理⑤");
}
 
// APIを取得してAPI取得後処理
async function apiProcess() {
  console.log("通信中です・・・")
  for(let i = 5;i>=0; i--){
    var api = await responseApi(i);
  }
  console.log("通信が完了しました！ : ",api);
  apiExection(api);
}

// APIの通信中の処理（のつもり）
function responseApi(sec) {
  return new Promise(function(resolve){
    setTimeout(function() {
      if(sec == 0) {
        resolve(getApi());
      } else {
        console.log(sec);
        resolve(sec);
      }
    },1000)
  })
}

// APIの処理を（のつもり）
function apiExection(api) {
  return new Promise(function(resolve,reject){
    setTimeout(function() {
      if(api == null) {
        // APIの取得が失敗した時の処理
        reject("APIの取得が失敗しています。")
      } else {
        // APIの取得が成功した場合
        resolve("処理③ API実行");
      }
    },1000)
  }).then(function(str){
    console.log(str,api.userid);
    console.log(str,api.username);
    console.log(str,api.age);
    console.log(str,api.password);
  }).catch(function(err){
    console.log(err)
  })
}

ログは以下になります！

最後に

最後に少しだけ。。JavaScriptの非同期はasync/awaitを使用します。
もし上記の言葉だけでちょっとよくわからないとかあれば実際に上記のコードを動かしてみてください！
なんとなくはわかるのではないかと思います。
ただ実際に通信をしているわけではないのであくまで体験ということで。
もし間違っているところがあればご指摘ください。
最後までご覧いただきありがとうございました！