JavaScriptで順番に処理を制御するテクニック10選

●JavaScriptの処理の流れと実行順序

JavaScriptを使ってWebアプリケーションを開発する際、処理の順番を制御することは非常に重要です。

なぜなら、JavaScriptは単一スレッドで動作するプログラミング言語であり、一度に1つの処理しか実行できないからです。

そのため、処理の流れを適切に制御しないと、意図しない動作や、パフォーマンスの低下を招く可能性があります。

では、JavaScriptにおける処理の流れと実行順序について、詳しく見ていきましょう。

○scriptタグの読み込み順と実行タイミング

HTMLファイルにJavaScriptのコードを埋め込む場合、scriptタグを使用します。

このscriptタグの配置によって、JavaScriptの読み込みと実行のタイミングが変わってきます。

一般的に、scriptタグはheadタグ内かbodyタグの末尾に配置します。

headタグ内に配置した場合、HTMLの解析が中断され、JavaScriptのダウンロードと実行が行われます。

一方、bodyタグの末尾に配置した場合、HTMLの解析が完了した後にJavaScriptのダウンロードと実行が行われます。

ユーザーエクスペリエンスを考慮すると、scriptタグはbodyタグの末尾に配置することが推奨されています。

こうすることで、HTMLの表示を遅延させることなく、JavaScriptを読み込むことができます。

○関数内の処理の実行順序

JavaScriptでは、関数内の処理は上から順番に実行されます。

たとえば、次のようなコードを考えてみましょう。

function greet(name) {
  console.log("Hello, " + name + "!");
  console.log("How are you today?");
}

greet("John");

このコードでは、greet関数が呼び出されると、次の順序で処理が実行されます。

1. “Hello, John!”がコンソールに出力される
2. “How are you today?”がコンソールに出力される

関数内の処理は、一行ずつ順番に実行されるため、コードの順序を意識して書くことが大切です。

○同期処理と非同期処理の基本的な違い

JavaScriptには、同期処理と非同期処理という2つの処理方式があります。

同期処理は、一つの処理が完了するまで次の処理を開始しない方式です。

つまり、処理が順番に実行され、前の処理が終わるまで次の処理はブロックされます。

一方、非同期処理は、一つの処理が完了するのを待たずに次の処理を開始する方式です。

JavaScriptでは、非同期処理を実現するためにコールバック関数、Promise、async/awaitなどの機能が用意されています。

非同期処理を使うことで、時間のかかる処理を実行している間も、他の処理を進めることができます。

これにより、アプリケーションのレスポンスが向上し、ユーザーエクスペリエンスが改善されます。

ただし、非同期処理を使う場合は、処理の順序に注意が必要です。

複数の非同期処理を適切に制御しないと、データの不整合や予期しないエラーが発生する可能性があります。

同期処理と非同期処理の違いを理解し、適切に使い分けることが、JavaScriptでの処理の順番制御には欠かせません。

●同期処理のテクニック

JavaScriptで処理の順番を制御する場合、同期処理は欠かせない手法の1つです。

同期処理を使うことで、一連の処理を順番に実行し、処理の流れを明確にすることができます。

それでは、同期処理のテクニックについて、具体的なサンプルコードを交えながら見ていきましょう。

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

まずは、ループを使った同期処理の例を見てみましょう。

function countNumbers() {
  for (let i = 1; i <= 5; i++) {
    console.log(i);
  }
}

countNumbers();

実行結果

1
2
3
4
5

このコードでは、countNumbers関数内でforループを使って、1から5までの数字を順番にコンソールに出力しています。

ループ内の処理は同期的に実行されるため、1から5までの数字が順番に表示されます。

ループを使った同期処理は、配列やオブジェクトの要素を順番に処理する場合などに便利です。

たとえば、配列内の各要素に対して特定の処理を行いたい場合、ループを使って同期的に処理を進めることができます。

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

次に、Promiseを使った同期処理の例を見ていきましょう。

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

async function showMessage() {
  console.log("Start");
  await delay(1000);
  console.log("Hello");
  await delay(2000);
  console.log("World");
  await delay(3000);
  console.log("End");
}

showMessage();

実行結果

Start
(1秒後)
Hello
(2秒後)
World
(3秒後) 
End

このコードでは、Promiseを返すdelay関数を定義し、setTimeout関数を使って指定したミリ秒数だけ処理を遅延させています。

そして、showMessage関数内で、awaitキーワードを使ってdelay関数の処理が完了するのを待ちます。

await delay(1000)では、1秒間処理を停止し、その後に”Hello”をコンソールに出力します。

同様に、await delay(2000)で2秒間処理を停止し、”World”を出力します。

Promiseとasync/awaitを組み合わせることで、非同期処理を同期的に記述することができます。

これにより、コードの見通しが良くなり、処理の順序を明確に制御できます。

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

async/awaitを使った同期処理の例をもう1つ見てみましょう。

function fetchData(url) {
  return fetch(url).then(response => response.json());
}

async function showUserData() {
  const user = await fetchData("https://api.example.com/user");
  console.log("Name:", user.name);
  console.log("Email:", user.email);

  const posts = await fetchData("https://api.example.com/posts?userId=" + user.id);
  console.log("Posts:", posts);
}

showUserData();

実行結果

Name: John Doe
Email: john@example.com
Posts: (Array(5))[{…}, {…}, {…}, {…}, {…}]

このコードでは、fetchData関数を定義し、fetch APIを使ってデータを取得しています。

fetchData関数はPromiseを返すので、async/awaitを使って非同期処理を同期的に記述できます。

showUserData関数内では、まずawait fetchData(“https://api.example.com/user”)でユーザーデータを取得し、ユーザーの名前とメールアドレスをコンソールに出力します。

次に、await fetchData(“https://api.example.com/posts?userId=” + user.id)で、取得したユーザーIDを使って投稿データを取得し、コンソールに出力します。

async/awaitを使うことで、非同期処理の結果を同期的に待ち受けることができます。

これにより、処理の流れがわかりやすくなり、エラーハンドリングも容易になります。

○フラグや変数を使って処理を待つ方法

同期処理を実現する別の方法として、フラグや変数を使って処理の完了を待つ方法があります。

let isLoading = true;

function fetchData(callback) {
  setTimeout(() => {
    isLoading = false;
    callback();
  }, 2000);
}

function showData() {
  if (isLoading) {
    setTimeout(showData, 100);
  } else {
    console.log("Data loaded");
  }
}

fetchData(showData);

実行結果

(2秒後)
Data loaded

このコードでは、isLoadingフラグを使って処理の完了を判断しています。

fetchData関数内で、setTimeout関数を使って2秒後にisLoadingフラグをfalseにし、コールバック関数を呼び出します。

showData関数内では、isLoadingフラグがtrueの間は再帰的にsetTimeout関数を呼び出し、処理を待ち続けます。

isLoadingフラグがfalseになった時点で、”Data loaded”をコンソールに出力します。

フラグや変数を使った同期処理は、シンプルな方法ですが、コードの見通しが悪くなりがちです。

可能であれば、PromiseやasyncAwaitを使った方法を検討することをおすすめします。

●非同期処理のテクニック

JavaScriptで処理の順番を制御する際、非同期処理は欠かせない存在です。

非同期処理を使うことで、時間のかかる処理を実行している間も、他の処理を進めることができます。

これにより、アプリケーションのレスポンスが向上し、ユーザーエクスペリエンスが改善されます。

それでは、非同期処理のテクニックについて、具体的なサンプルコードを交えながら見ていきましょう。

○サンプルコード4：コールバック関数を使った非同期処理

まずは、コールバック関数を使った非同期処理の例を見てみましょう。

function fetchData(callback) {
  setTimeout(() => {
    const data = "Hello, World!";
    callback(data);
  }, 2000);
}

function showData(data) {
  console.log("受け取ったデータ:", data);
}

fetchData(showData);

実行結果

(2秒後)
受け取ったデータ: Hello, World!

このコードでは、fetchData関数内でsetTimeout関数を使って、2秒後にコールバック関数を呼び出しています。

コールバック関数には、取得したデータを渡しています。

fetchData関数を呼び出す際に、showData関数をコールバック関数として渡しています。

これにより、データの取得が完了した後に、showData関数が呼び出され、取得したデータを表示します。

コールバック関数を使った非同期処理は、シンプルで理解しやすい方法ですが、コールバック関数が多くなるとコードの見通しが悪くなる問題があります。

これは、いわゆる「コールバック地獄」と呼ばれる状態です。

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

Promiseを使った非同期処理の例を見ていきましょう。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "Hello, World!";
      resolve(data);
    }, 2000);
  });
}

fetchData()
  .then(data => {
    console.log("受け取ったデータ:", data);
  })
  .catch(error => {
    console.error("エラーが発生しました:", error);
  });

実行結果

(2秒後)
受け取ったデータ: Hello, World!

このコードでは、fetchData関数内でPromiseを使って非同期処理を行っています。

Promiseのコンストラクタに渡したコールバック関数内で、setTimeout関数を使ってデータの取得をシミュレートしています。

データの取得が成功した場合は、resolve関数を呼び出して取得したデータを渡します。

エラーが発生した場合は、reject関数を呼び出してエラーを渡します。

fetchData関数を呼び出す際に、thenメソッドを使ってデータ取得成功時の処理を記述し、catchメソッドを使ってエラー発生時の処理を記述しています。

Promiseを使うことで、コールバック地獄を回避し、非同期処理をより読みやすく書くことができます。

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

async/awaitを使った非同期処理の例を見てみましょう。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "Hello, World!";
      resolve(data);
    }, 2000);
  });
}

async function showData() {
  try {
    const data = await fetchData();
    console.log("受け取ったデータ:", data);
  } catch (error) {
    console.error("エラーが発生しました:", error);
  }
}

showData();

実行結果

(2秒後)
受け取ったデータ: Hello, World!

このコードでは、fetchData関数はPromiseを返す関数として定義されています。

showData関数をasync関数として定義し、内部でawaitキーワードを使ってfetchData関数の処理が完了するのを待っています。

awaitキーワードを使うことで、Promiseの処理が完了するまで次の行に進まず、非同期処理を同期的に記述できます。

データ取得中にエラーが発生した場合は、try…catch文を使ってエラーをキャッチし、適切に処理することができます。

async/awaitを使うことで、Promiseよりもさらに読みやすく、同期的な処理のように非同期処理を記述できます。

○サンプルコード7：並列処理と直列処理

非同期処理を行う際、複数の処理を並列に実行したり、直列に実行したりすることがあります。

function fetchData(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = `Data ${id}`;
      resolve(data);
    }, 1000);
  });
}

async function parallelProcessing() {
  const [data1, data2, data3] = await Promise.all([
    fetchData(1),
    fetchData(2),
    fetchData(3)
  ]);
  console.log("並列処理の結果:", data1, data2, data3);
}

async function sequentialProcessing() {
  const data1 = await fetchData(1);
  const data2 = await fetchData(2);
  const data3 = await fetchData(3);
  console.log("直列処理の結果:", data1, data2, data3);
}

parallelProcessing();
sequentialProcessing();

実行結果

(約1秒後)
並列処理の結果: Data 1 Data 2 Data 3
(約3秒後)
直列処理の結果: Data 1 Data 2 Data 3

このコードでは、fetchData関数は指定されたIDに基づいてデータを取得するPromiseを返します。

parallelProcessing関数では、Promise.allメソッドを使って複数のPromiseを並列に実行しています。

Promise.allは、渡された全てのPromiseが完了するまで待ち、その結果を配列で返します。

sequentialProcessing関数では、awaitキーワードを使って、各Promiseを順番に実行しています。

一つのPromiseが完了してから、次のPromiseの処理に進みます。

並列処理は、複数の非同期処理を同時に実行できるため、処理全体の時間を短縮できます。

一方、直列処理は、非同期処理を順番に実行するため、処理の順序が保証されます。

状況に応じて、並列処理と直列処理を使い分けることが重要です。

●エラーハンドリングと例外処理

JavaScriptで処理の順番を制御する際、エラーハンドリングと例外処理は欠かせない要素です。

予期せぬエラーが発生した場合でも、適切にエラーを処理することで、アプリケーションの安定性を維持することができます。

エラーハンドリングと例外処理を怠ると、エラーが発生した際にアプリケーションが予期せぬ動作をしたり、クラッシュしたりする可能性があります。

これは、ユーザーエクスペリエンスを大きく損ねる要因になります。

それでは、JavaScriptにおけるエラーハンドリングと例外処理の方法について、具体的なサンプルコードを交えながら見ていきましょう。

○try/catchを使ったエラー処理

JavaScriptでは、try/catch文を使ってエラーをキャッチし、適切に処理することができます。

function divideNumbers(a, b) {
  try {
    if (b === 0) {
      throw new Error("ゼロ除算エラー");
    }
    return a / b;
  } catch (error) {
    console.error("エラーが発生しました:", error.message);
    return null;
  }
}

console.log(divideNumbers(10, 2));
console.log(divideNumbers(10, 0));

実行結果

5
エラーが発生しました: ゼロ除算エラー
null

このコードでは、divideNumbers関数内でゼロ除算エラーが発生した場合、throw文を使ってエラーをスローしています。

try/catch文を使ってエラーをキャッチし、エラーメッセージをコンソールに出力した後、nullを返しています。

これにより、エラーが発生した場合でも、アプリケーションが停止することなく、適切にエラーを処理することができます。

try/catch文は、同期的なコードのエラーを処理するために使用されます。

非同期処理でエラーが発生した場合は、Promiseのエラーハンドリングやasync/awaitのエラーハンドリングを使用する必要があります。

○Promiseのエラーハンドリング

Promiseを使った非同期処理では、エラーハンドリングにcatchメソッドを使用します。

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error("ネットワークエラー");
      }
      return response.json();
    })
    .catch(error => {
      console.error("エラーが発生しました:", error.message);
      return null;
    });
}

fetchData("https://api.example.com/data")
  .then(data => {
    console.log("取得したデータ:", data);
  })
  .catch(error => {
    console.error("データの取得に失敗しました:", error.message);
  });

実行結果(エラーが発生した場合)

エラーが発生しました: ネットワークエラー
データの取得に失敗しました: ネットワークエラー

このコードでは、fetchData関数内でfetch APIを使ってデータを取得しています。

レスポンスのステータスが正常でない場合(response.okがfalseの場合)、エラーをスローしています。

catchメソッドを使ってエラーをキャッチし、エラーメッセージをコンソールに出力した後、nullを返しています。

fetchData関数を呼び出す際にも、catchメソッドを使ってエラーをキャッチし、適切に処理しています。

Promiseチェーンでは、いずれかの処理でエラーが発生した場合、そのエラーは最後のcatchメソッドでキャッチされます。

これにより、エラーハンドリングを一箇所にまとめることができます。

○async/awaitのエラーハンドリング

async/awaitを使った非同期処理では、try/catch文を使ってエラーをキャッチします。

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error("ネットワークエラー");
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("エラーが発生しました:", error.message);
    return null;
  }
}

async function main() {
  try {
    const data = await fetchData("https://api.example.com/data");
    console.log("取得したデータ:", data);
  } catch (error) {
    console.error("データの取得に失敗しました:", error.message);
  }
}

main();

実行結果(エラーが発生した場合)

エラーが発生しました: ネットワークエラー
データの取得に失敗しました: ネットワークエラー

このコードでは、fetchData関数をasync関数として定義し、内部でtry/catch文を使ってエラーをキャッチしています。

エラーが発生した場合は、エラーメッセージをコンソールに出力し、nullを返しています。

main関数もasync関数として定義し、try/catch文を使ってfetchData関数の呼び出しを囲んでいます。

これにより、fetchData関数内で発生したエラーを適切にキャッチし、処理することができます。

async/awaitを使ったエラーハンドリングは、同期的なコードと同様の構造でエラーを処理できるため、可読性が高く、理解しやすいというメリットがあります。

●処理の順番制御の応用例

JavaScriptで処理の順番を制御するテクニックを学んだ後は、それらを実際のアプリケーション開発で活用することが大切です。

ここでは、処理の順番制御の応用例として、具体的なユースケースを見ていきましょう。

これらの応用例を通して、JavaScriptでの処理の順番制御が実務でどのように役立つのかを実感していただけると思います。

それでは、サンプルコードを交えながら、各応用例を詳しく見ていきましょう。

○サンプルコード8：外部APIを呼び出す際の同期処理

Webアプリケーションを開発する際、外部のAPIを呼び出して必要なデータを取得することがよくあります。

このとき、API呼び出しが完了するまで次の処理を待つ必要があります。

async function fetchUserData(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const userData = await response.json();
  return userData;
}

async function fetchUserPosts(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}/posts`);
  const userPosts = await response.json();
  return userPosts;
}

async function displayUserProfile(userId) {
  try {
    const userData = await fetchUserData(userId);
    const userPosts = await fetchUserPosts(userId);

    console.log("ユーザー情報:", userData);
    console.log("ユーザーの投稿:", userPosts);
  } catch (error) {
    console.error("エラーが発生しました:", error);
  }
}

displayUserProfile(123);

実行結果

ユーザー情報: {id: 123, name: "John Doe", email: "john@example.com"}
ユーザーの投稿: [{id: 1, title: "投稿1", content: "..."}, {id: 2, title: "投稿2", content: "..."}]

このコードでは、displayUserProfile関数内で、fetchUserData関数とfetchUserPosts関数を順番に呼び出しています。

これらの関数はどちらもasync関数で、fetch APIを使って外部APIからデータを取得します。

await演算子を使うことで、APIの応答が返ってくるまで処理を待ち、その後にユーザー情報と投稿データをコンソールに出力します。

エラーハンドリングのためにtry/catch文を使用し、APIの呼び出しが失敗した場合でもアプリケーションが停止しないようにしています。

○サンプルコード9：画像の読み込み完了を待つ処理

Webページに画像を表示する際、画像の読み込みが完了するまで次の処理を待つ必要があることがあります。

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = (error) => reject(error);
    img.src = url;
  });
}

async function displayImages(urls) {
  try {
    const imagePromises = urls.map(url => loadImage(url));
    const images = await Promise.all(imagePromises);

    images.forEach(img => {
      document.body.appendChild(img);
    });

    console.log("全ての画像の読み込みが完了しました");
  } catch (error) {
    console.error("画像の読み込みエラー:", error);
  }
}

const imageUrls = [
  "https://example.com/image1.jpg",
  "https://example.com/image2.jpg",
  "https://example.com/image3.jpg"
];

displayImages(imageUrls);

実行結果

(画像が順番に表示される)
全ての画像の読み込みが完了しました

このコードでは、loadImage関数を定義し、Promiseを使って画像の読み込みを非同期的に行っています。画像の読み込みが完了したら、resolve関数でImg要素を返し、エラーが発生した場合はreject関数でエラーを返します。

displayImages関数では、引数で渡されたURLの配列をもとに、各画像のPromiseを作成します。

Promise.allメソッドを使って、全ての画像のPromiseが解決されるまで待ちます。

全ての画像の読み込みが完了したら、各画像をドキュメントのbodyに追加し、コンソールにメッセージを出力します。

○サンプルコード10：アニメーションを順番に実行する処理

Webページでアニメーションを順番に実行したい場合、一つのアニメーションが終了してから次のアニメーションを開始する必要があります。

function animate(element, duration) {
  return new Promise((resolve) => {
    element.style.transition = `transform ${duration}ms`;
    element.style.transform = "translateX(100px)";
    setTimeout(() => {
      element.style.transform = "translateX(0)";
      resolve();
    }, duration);
  });
}

async function animateElements() {
  const elements = document.querySelectorAll(".box");
  for (const element of elements) {
    await animate(element, 1000);
  }
  console.log("全てのアニメーションが完了しました");
}

animateElements();

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin-bottom: 10px;
}

実行結果

(各要素が順番にアニメーションする)
全てのアニメーションが完了しました

このコードでは、animate関数を定義し、Promiseを使ってアニメーションを非同期的に実行しています。

要素のtransitionとtransformプロパティを設定し、一定時間後にtransformを元に戻すことでアニメーションを実現しています。

animateElements関数では、querySelectorAllメソッドを使って.boxクラスを持つ全ての要素を取得し、for…of文を使って各要素に対してanimate関数を順番に適用しています。

awaitキーワードを使うことで、一つのアニメーションが完了してから次のアニメーションを開始するようにしています。

全てのアニメーションが完了したら、コンソールにメッセージを出力します。

まとめ

JavaScriptで処理の順番を制御することは、Webアプリケーション開発において非常に重要なスキルです。

同期処理と非同期処理の違いを理解し、ループ、Promise、async/awaitなどのテクニックを使い分けることで、処理の流れを適切に制御できます。

エラーハンドリングや例外処理にも注意を払い、外部APIの呼び出しや画像の読み込み、アニメーションの実行など、様々な場面で処理の順番制御を活用しましょう。

本記事で解説したような知識を身につけることで、JavaScriptでの開発がスムーズになり、より高品質なWebアプリケーションを作ることができるでしょう。

ぜひ、本記事で紹介したテクニックを実際のコードに応用し、JavaScriptでの処理の流れを自在に操れるようになっていただければと思います。