JavaScriptで処理終了後に実行！10選の使い方＆サンプルコード

はじめに
●JavaScriptの処理順序とは
●処理終了後に実行する方法10選
●サンプルコードと応用例
●注意点と対処法
まとめ

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、基礎知識があれば初心者にも理解していただけるように、常に解説内容のわかりやすさや記事の品質に注力しております。不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptで処理が終わってから実行する方法を10通りの使い方とサンプルコードで理解し、実践できるようになります。

JavaScriptを使ってWebページを制御する際に、処理の順序や実行タイミングを理解することは非常に重要です。

初心者でも分かりやすいように、実用的な例や注意点も解説しますので、ぜひ最後までお読みください。

●JavaScriptの処理順序とは

JavaScriptの処理順序は、基本的には上から下へと逐次実行されます。

ただし、非同期処理やイベントハンドリングなど、特定の条件やタイミングで実行される処理も存在します。

処理が終わってから実行する方法を理解することで、効率的なコードを書くことができます。

●処理終了後に実行する方法10選

ここでは、JavaScriptで処理が終わってから実行する10種類の方法を紹介します。

○方法1：setTimeout

setTimeoutは、指定した時間が経過した後に指定した関数を実行する方法です。

非同期処理の基本的な形としてよく使われます。

○方法2：setInterval

setIntervalは、指定した時間間隔で指定した関数を繰り返し実行する方法です。

アニメーションや定期的な更新が必要な場合に使用されます。

○方法3：Promise

Promiseは、非同期処理を扱いやすくするためのオブジェクトです。

Promiseオブジェクトを使うことで、非同期処理の結果を待ってから次の処理を実行することができます。

○方法4：async/await

async/awaitは、Promiseを使った非同期処理をよりシンプルに書くことができる構文です。

async関数の中でawaitを使うことで、Promiseの結果が返るまで処理を一時停止し、その後の処理を実行します。

○方法5：addEventListener

addEventListenerは、指定したイベントが発生したときに実行される関数（イベントリスナー）を設定する方法です。

ユーザー操作やDOMの変更など、特定のイベントが発生したときに処理を実行する場合に使用します。

○方法6：イベントリスナー

イベントリスナーは、特定のイベントが発生したときに実行される関数を定義する方法です。

ユーザー操作やDOMの変更など、特定のイベントが発生したときに処理を実行する場合に使用します。

○方法7：カスタムイベント

カスタムイベントは、開発者が独自に定義したイベントを作成し、発火させる方法です。

複数の処理が連動して実行されるべきタイミングで活用できます。

○方法8：MutationObserver

MutationObserverは、DOMの変更を監視し、変更があった場合に指定したコールバック関数を実行する方法です。

DOMの変更に応じて処理を実行する場合に有効です。

○方法9：IntersectionObserver

IntersectionObserverは、指定した要素がビューポートに表示されたときや非表示になったときに、コールバック関数を実行する方法です。

要素の表示状態に応じて処理を実行する場合に使用します。

○方法10：requestAnimationFrame

requestAnimationFrameは、ブラウザの描画タイミングに合わせて関数を実行する方法です。

アニメーションやゲーム開発など、高い描画性能が求められる場合に適しています。

●サンプルコードと応用例

次に、それぞれの方法についてサンプルコードと応用例を紹介します。

○サンプルコード1：setTimeoutを使った処理遅延

setTimeoutを使用することで、指定した時間が経過した後に関数を実行できます。

function delayedFunction() {
  console.log('This message is displayed after 3 seconds');
}

setTimeout(delayedFunction, 3000);

○サンプルコード2：setIntervalを使った繰り返し処理

setIntervalを使用することで、指定した時間間隔で関数を繰り返し実行できます。

function repeatedFunction() {
  console.log('This message is displayed every 2 seconds');
}

setInterval(repeatedFunction, 2000);

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

Promiseを使用することで、非同期処理の結果を待ってから次の処理を実行できます。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 3000);
  });
}

fetchData().then((data) => {
  console.log(data);
});

○サンプルコード4：async/awaitを使ったシーケンシャルな非同期処理

async/awaitを使用することで、Promiseを使った非同期処理をよりシンプルに書くことができます。

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 3000);
  });
}

async function main() {
  console.log('Fetching data...');
  const data = await fetchData();
  console.log(data);
}

main();

○サンプルコード5：addEventListenerを使ったイベントリスナーの設定

addEventListenerを使用することで、指定したイベントが発生したときに実行される関数を設定できます。

<button id="myButton">Click me!</button>
<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', () => {
    console.log('Button clicked!');
  });
</script>

○サンプルコード6：カスタムイベントの作成と発火

カスタムイベントを使用することで、独自に定義したイベントを作成し、発火させることができます。

const customEvent = new Event('customEvent');

document.addEventListener('customEvent', () => {
  console.log('Custom event triggered!');
});

document.dispatchEvent(customEvent);

○サンプルコード7：MutationObserverを使ったDOM変更の監視

MutationObserverを使用することで、DOMの変更を監視し、変更があった場合に指定したコールバック関数を実行できます。

const targetNode = document.getElementById('target');
const observerOptions = {
  childList: true,
  attributes: true,
  subtree: true
};

const callback = (mutationsList, observer) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    } else if (mutation.type === 'attributes') {
      console.log('An attribute has been modified.');
    }
  }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

○サンプルコード8：IntersectionObserverを使った要素の表示状態の監視

IntersectionObserverを使用することで、指定した要素がビューポートに表示されたときや非表示になったときに、コールバック関数を実行できます。

<div id="target">Scroll to see me!</div>
<script>
  const target = document.getElementById('target');
  const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.5
  };

  const callback = (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        console.log('Element is visible!');
      } else {
        console.log('Element is not visible.');
      }
    });
  };

  const observer = new IntersectionObserver(callback, observerOptions);
  observer.observe(target);
</script>

○サンプルコード9：IntersectionObserverを使った要素の表示状態の監視

IntersectionObserverを使用することで、指定した要素がビューポートに表示されたときや非表示になったときに、コールバック関数を実行できます。

<div id="target">Scroll to see me!</div>
<script>
  const target = document.getElementById('target');
  const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.5
  };

  const callback = (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        console.log('Element is visible!');
      } else {
        console.log('Element is not visible.');
      }
    });
  };

  const observer = new IntersectionObserver(callback, observerOptions);
  observer.observe(target);
</script>

○サンプルコード10：requestAnimationFrameを使ったアニメーション

requestAnimationFrameを使用することで、ブラウザの描画タイミングに合わせたアニメーションを実行することができます。

これにより、アニメーションのパフォーマンスが向上します。

<div id="movingBox" style="width: 50px; height: 50px; background-color: red; position: absolute;"></div>
<script>
  const movingBox = document.getElementById('movingBox');
  let position = 0;

  function animate() {
    position += 1;
    movingBox.style.transform = `translateX(${position}px)`;

    if (position < window.innerWidth - movingBox.offsetWidth) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
</script>