JavaScript同期処理の極意!わかりやすい8つのサンプルコード

JavaScript同期処理イメージJS
この記事は約7分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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>

まとめ

この記事では、JavaScriptの同期処理について解説しました。

基本的な同期処理から応用例、カスタマイズ方法まで、幅広く紹介しました。

同期処理はプログラムの処理順序を保証するため、適切に利用することで、コードの可読性や安定性を向上させることができます。

ぜひ、これらの知識を活用して、より効果的なプログラムを