JavaScriptにおける同期処理の極意！わかりやすい8つのサンプルコード

はじめに
●JavaScript同期処理とは
- ○同期処理の基本
●同期処理の作り方と使い方
- ○サンプルコード1：forループを使った同期処理
- ○サンプルコード2：setTimeoutを使った同期処理
●同期処理の応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptの同期処理を理解し、実践できるようになります。

同期処理はプログラムが順序通りに処理を実行する仕組みで、初心者にもわかりやすく解説していきます。

サンプルコードや応用例もご紹介するので、ぜひ最後までお読みください。

●JavaScript同期処理とは

同期処理とは、プログラムが一連の処理を順番に実行することを指します。

これに対して、非同期処理は処理の順序を気にせず、同時に実行することができます。

JavaScriptでは、通常は非同期処理がよく使われますが、同期処理も重要な役割を果たします。

○同期処理の基本

同期処理は、処理が順番に実行されるため、一つの処理が完了するまで次の処理は待機します。

この特性を利用して、データの取得や計算など、順序が重要な場面で使われます。

●同期処理の作り方と使い方

それでは、実際に同期処理の作り方と使い方をサンプルコードを交えて解説します。

○サンプルコード1：forループを使った同期処理

このコードでは、forループを使って、配列の要素を順番に表示する同期処理を紹介しています。

この例では、配列の要素を1つずつconsole.logで表示しています。

const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {
  console.log(array[i]); // 配列の要素を順番に表示
}

○サンプルコード2：setTimeoutを使った同期処理

このコードでは、setTimeoutを使って、一定時間後に処理を実行する同期処理を紹介しています。

この例では、1秒ごとに数字を順番に表示しています。

function syncProcessWithSetTimeout(index) {
  setTimeout(() => {
    console.log(index);
    if (index < 5) {
      syncProcessWithSetTimeout(index + 1);
    }
  }, 1000);
}

syncProcessWithSetTimeout(1); // 1秒ごとに1から5まで表示

●同期処理の応用例

ここでは、同期処理の応用例をいくつか紹介します。

○サンプルコード3：非同期処理との組み合わせ

このコードでは、同期処理と非同期処理を組み合わせた処理を紹介しています。

この例では、非同期処理でデータを取得した後、同期処理でデータを加工して表示しています。

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  return data;
}

function processData(data) {
  for (const item of data) {
    console.log(`データの加工: ${item}`);
  }
}

fetchData().then((data) => {
  processData(data);
});

○サンプルコード4：Promiseを使った同期処理

このコードでは、Promiseを使って同期処理を行う方法を紹介しています。

この例では、setTimeoutを使った処理をPromiseでラップして、順番に実行しています。

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function syncProcessWithPromise() {
  for (let i = 1; i <= 5; i++) {
    await delay(1000);
    console.log(i);
  }
}

syncProcessWithPromise();

○サンプルコード5：async/awaitを使った同期処理

このコードでは、async/awaitを使って同期処理を行う方法を紹介しています。

この例では、非同期処理をawaitで待機させて、順番に実行しています。

async function asyncFunction(index) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(index);
      resolve();
    }, 1000);
  });
}

async function syncProcessWithAsyncAwait() {
  for (let i = 1; i <= 5; i++) {
    await asyncFunction(i);
  }
}

syncProcessWithAsyncAwait();

●注意点と対処法

同期処理は処理の順序を保証できますが、一つの処理が完了するまで次の処理が待機するため、パフォーマンスが低下することがあります。

そのため、適切なバランスで同期処理と非同期処理を組み合わせることが重要です。

●カスタマイズ方法

同期処理をさらに応用して、独自の関数を作成する方法をいくつか紹介します。

○サンプルコード6：カスタム同期処理関数の作成

このコードでは、カスタム同期処理関数を作成する方法を紹介しています。

この例では、引数で渡された関数を同期的に実行する関数を作成しています。

function customSyncProcess(func) {
  for (let i = 1; i <= 5; i++) {
    func(i);
  }
}

function exampleFunction(i) {
  console.log(`カスタム同期処理: ${i}`);
}

customSyncProcess(exampleFunction); // 1から5までの数字を順番に表示

○サンプルコード7：複数の関数を順番に実行する同期処理

このコードでは、複数の関数を順番に実行する同期処理を紹介しています。

この例では、2つの関数を順番に実行し、その結果を表示しています。

function firstFunction() {
  console.log("最初の関数が実行されました");
}

function secondFunction() {
  console.log("2番目の関数が実行されました");
}

firstFunction();
secondFunction();

○サンプルコード8：イベントリスナを使った同期処理

このコードでは、イベントリスナを使った同期処理を紹介しています。

この例では、ボタンクリックによって関数が順番に実行される仕組みを作成しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>イベントリスナを使った同期処理</title>
</head>
<body>
  <button id="myButton">ボタンをクリック</button>
  <script>
    const button = document.getElementById("myButton");

    button.addEventListener("click", () => {
      firstFunction();
      secondFunction();
    });

    function firstFunction() {
      console.log("最初の関数が実行されました");
    }

    function secondFunction() {
      console.log("2番目の関数が実行されました");
    }
  </script>
</body>
</html>