【JavaScript】非同期処理を完全ガイド！10の実例とサンプルコード

はじめに
●非同期処理を使ったJavaScriptの実用例とコード
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScript非同期処理を使いこなすことができるようになります。

JavaScriptの非同期処理が初めての方でも、基本から応用までを理解し、実際に使えるようになる10の実例とサンプルコードを紹介します。

さらに、注意点やカスタマイズ方法も押さえて、非同期処理のプロを目指しましょう！

○非同期処理とは？

JavaScriptの非同期処理とは、一連の処理が終わるのを待たずに次の処理を実行することを指します。

これにより、ウェブページのパフォーマンスが向上し、応答性が良くなります。

○コールバック関数

コールバック関数は、非同期処理の基本的な手法です。

他の関数に引数として渡され、その関数の処理が終わった後に実行される関数のことです。

次のサンプルコードは、setTimeout関数を使って非同期処理を行う例です。

function hello() {
  console.log('こんにちは！');
}

setTimeout(hello, 1000); // 1秒後にhello関数が実行される
console.log('非同期処理が始まりました');

○プロミス

プロミスは、非同期処理の結果を表すオブジェクトです。

状態は、「pending（未決定）」、「fulfilled（成功）」、「rejected（失敗）」の3つがあります。

thenメソッドやcatchメソッドを使って、非同期処理の成功・失敗時の処理を記述することができます。

// 非同期処理を実行する関数
function fetchApiData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('データ取得成功');
    }, 1000);
  });
}

fetchApiData()
  .then((data) => {
    console.log(data); // データ取得成功
  })
  .catch((error) => {
    console.error(error);
  });

○async/await

async/awaitは、プロミスをより簡潔に記述できる構文です。

asyncキーワードを付けた関数内で、awaitキーワードを使って非同期処理を待ちます。

次のサンプルコードは、上記のプロミスの例をasync/awaitを使って書いたものです。

async function fetchApiDataAsync() {
  const response = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('データ取得成功');
    }, 1000);
  });

  console.log(response); // データ取得成功
}

fetchApiDataAsync();

これで、JavaScriptの非同期処理の基本が理解できました。

次に、実例とサンプルコードを見ていきましょう。

●非同期処理を使ったJavaScriptの実用例とコード

ウェブアプリケーションの開発において、JavaScriptによる非同期処理は欠かせない技術です。

ここでは、JavaScriptの非同期処理の実用的な例とそれに伴うコードを紹介します。

○サンプルコード1：API通信における非同期処理

JavaScriptでのAPI通信は非同期処理が鍵となります。

非同期処理を利用することで、データ取得の待機時間中に他のタスクを進行させることが可能です。

async function fetchApiDataAsync() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('データ取得に失敗しました:', error);
  }
}

fetchApiDataAsync();

このコードは、APIからデータを非同期的に取得し、結果をコンソールに表示します。

○サンプルコード2：プロミスを用いた画像の非同期ロード

JavaScriptの非同期処理は、画像の読み込みにも利用できます。

読み込み完了後に続く処理をスムーズに実行することが可能です。

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.src = url;
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error('画像のロードに失敗しました'));
  });
}

loadImage('https://example.com/image.jpg')
  .then((image) => {
    document.body.appendChild(image);
  })
  .catch((error) => {
    console.error(error);
  });

この関数は、与えられたURLから画像を非同期でロードし、成功時にページに画像を追加します。

○サンプルコード3：async/awaitによるファイルの非同期読み込み

ファイル読み込みもJavaScriptの非同期処理を使って効率的に行えます。

これにより、読み込んだ内容の即時処理が可能となります。

async function readFileAsync(file) {
  try {
    const response = await fetch(file);
    const text = await response.text();
    console.log(text);
  } catch (error) {
    console.error('ファイルの読み込みに失敗しました:', error);
  }
}

readFileAsync('https://example.com/text.txt');

この例では、指定されたURLからテキストファイルを非同期で読み込み、その内容を表示します。

○サンプルコード4：非同期処理のエラーハンドリング

非同期処理におけるエラーハンドリングは、堅牢なアプリケーションを構築する上で不可欠です。

ここでは、プロミスを使用した際のエラーハンドリングの例を紹介します。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('データ取得に失敗しました'));
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('エラーが発生しました:', error);
  });

このコードは、非同期処理中にエラーが発生した場合に、エラーメッセージを適切にハンドリングします。

○サンプルコード5：非同期処理を利用したアニメーションの実装

JavaScriptの非同期処理は、ウェブアプリケーションに動的なアニメーションを加えるのにも適しています。

ここではrequestAnimationFrameを使用したアニメーションの例を紹介します。

function animate(element, duration) {
  const startTime = performance.now();

  function step(timestamp) {
    const progress = (timestamp - startTime) / duration;
    element.style.transform = `translateX(${progress * 100}px)`;
    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

const element = document.querySelector('#my-element');
animate(element, 2000);

この関数は、特定の要素に対して平滑な移動アニメーションを適用します。

○サンプルコード6：JavaScriptによる非同期データソート

JavaScriptを活用した非同期処理は、データソートの際にも非常に有効です。

特に、大量のデータを扱う際に他の処理をブロックしないことが重要です。

async function sortDataAsync(data) {
  const sortedData = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(data.sort((a, b) => a - b));
    }, 1000);
  });

  console.log(sortedData);
}

const data = [5, 2, 8, 1, 4];
sortDataAsync(data);

この非同期処理は、JavaScriptでのデータソートを行いながら、他の操作が待機時間に影響を受けないようにします。

○サンプルコード7：JavaScriptを使った非同期テキスト検索

非同期処理を用いることで、JavaScriptによるテキスト検索を効率的に実行できます。

これは特に、大きなテキストデータの検索において役立ちます。

async function searchAsync(query, text) {
  const result = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(text.indexOf(query) !== -1);
    }, 1000);
  });

  console.log(result ? '見つかりました' : '見つかりませんでした');
}

const query = '検索ワード';
const text = 'ここに検索対象のテキストが入ります。';
searchAsync(query, text);

このコードは、非同期処理を通してテキスト内でのクエリの検索を行います。

○サンプルコード8：JavaScriptによる非同期ユーザー認証処理

ウェブアプリケーションにおけるユーザー認証も、JavaScriptの非同期処理を利用して効率化できます。

これは、特にセキュリティ上の機能として重要です。

async function authenticateAsync(username, password) {
  const result = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(username === 'user' && password === 'password');
    }, 1000);
  });

  console.log(result ? '認証成功' : '認証失敗');
}

const username = 'user';
const password = 'password';
authenticateAsync(username, password);

この非同期処理を用いることで、サーバーへの負荷を減らしながらセキュアな認証を実施できます。

○サンプルコード9：JavaScriptを活用した非同期フォーム送信

非同期処理は、フォーム送信においても有効です。

これにより、ユーザーは応答を待つ間に他の操作が可能となります。

async function submitFormAsync(formData) {
  const result = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, 1000);
  });

  console.log(result ? '送信成功' : '送信失敗');
}

const formData = new FormData();
formData.append('key', 'value');
submitFormAsync(formData);

このコードは、JavaScriptを用いた非同期フォーム送信のシンプルな例です。

○サンプルコード10：非同期処理を活用したJavaScriptによるウェブスクレイピング

JavaScriptにおける非同期処理は、ウェブスクレイピングにおいても非常に有用です。

これにより、スクレイピングの完了を待つ間に他のタスクを実行できます。

async function scrapeWebsiteAsync(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('ネットワークエラー');
    }
    const html = await response.text();
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const title = doc.querySelector('title').textContent;
    console.log('ウェブページのタイトル:', title);
  } catch (error) {
    console.error('エラーが発生しました:', error);
  }
}

const url = 'https://example.com';
scrapeWebsiteAsync(url);

このスクリプトは、指定したウェブページのタイトルを非同期で取得する方法を示しています。

●注意点と対処法

非同期処理を使用する際には、次の点に注意してください。

エラーハンドリングを適切に行うことが重要です。
.catch()やtry-catch構文を使用して、エラーを捉えて対処しましょう。
非同期処理が完了するまで次の処理が実行されないことを意識してください。
処理の順序を正しく管理するために、Promise.all()やasync/awaitを使用しましょう。