初心者必見！JavaScriptで後で実行する方法3選

2023.04.252024.05.10

この記事は約3分で読めます。

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

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

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

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

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

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

はじめに
●JavaScriptで後で実行する方法とは
●各方法の使い方とサンプルコード
●注意点と対処法
まとめ

はじめに

この記事を読めば、初心者でもJavaScriptで後で実行する方法が分かるようになります。

それぞれの方法について、使い方やサンプルコード、注意点を詳しく解説していきます。

●JavaScriptで後で実行する方法とは

JavaScriptで後で実行する方法には主に下記の3つがあります。

setTimeout
setInterval
Promiseとasync/await

それぞれの特徴と使い方を詳しく見ていきましょう。

●各方法の使い方とサンプルコード

○setTimeoutの使い方とサンプルコード

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

下記がサンプルコードです。

// 3秒後にhello関数を実行
function hello() {
  console.log("Hello!");
}

setTimeout(hello, 3000);

このコードでは、3秒後にhello関数が実行されます。

○setIntervalの使い方とサンプルコード

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

下記がサンプルコードです。

// 1秒ごとにcount関数を実行
let counter = 0;

function count() {
  counter++;
  console.log("Count:", counter);
}

setInterval(count, 1000);

このコードでは、1秒ごとにcount関数が実行され、カウントアップされていきます。

○Promiseとasync/awaitの使い方とサンプルコード

Promiseは、非同期処理をより簡単に扱うための仕組みです。

async/awaitは、Promiseをさらに分かりやすく扱うための構文です。

// 非同期処理を行う関数
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("データ取得完了！");
    }, 3000);
  });
}

// async/awaitを使用した非同期処理
async function main() {
  console.log("データ取得を開始します...");
  const data = await fetchData();
  console.log(data);
}

main();

このコードでは、fetchData関数で3秒後にデータ取得完了を表す文字列が返されるPromiseを生成しています。

main関数内では、async/awaitを使って非同期処理を実行しています。

データ取得が完了すると、コンソールに表示されます。

●注意点と対処法

各方法にはそれぞれ注意点があります。

setTimeoutとsetInterval
- 指定した時間が正確ではない場合があります。
  ブラウザや状況によっては、実際の待ち時間が異なることがあるため、厳密なタイミングが必要な場合は適切な方法を検討してください。
Promiseとasync/await
- エラーハンドリングを適切に行う必要があります。
  通常、catchやfinallyを使用してエラー処理や後処理を行います。
  適切なエラーハンドリングがないと、予期せぬ動作やバグが発生する恐れがあります。