Yield（一時停止）を使った非同期処理の実装

Gobot

牛肉・豚肉・鶏肉・ジビエ情報：Yield（一時停止）を使った非同期処理の実装

非同期処理は、プログラムの実行において、時間のかかる処理（ネットワーク通信、ファイルI/O、データベースアクセスなど）をバックグラウンドで実行し、その間に他の処理を進めることで、アプリケーション全体の応答性を向上させるための重要な技術です。特に、ユーザーインターフェースを持つアプリケーションでは、非同期処理を適切に実装しないと、UIがフリーズしてしまい、ユーザーエクスペリエンスを著しく損なうことになります。

Yield（一時停止）は、JavaScriptなどの言語において、コルーチンやジェネレータといった機能を通じて非同期処理をより直感的に記述できるようにするメカニズムです。従来のコールバック関数による非同期処理は、ネストが深くなり「コールバック地獄」と呼ばれる可読性の低下を招くことがありました。Promiseが登場し、この問題は軽減されましたが、それでも処理の流れを追うのが難しい場面は残っていました。

async/await構文は、このyieldの概念をさらに発展させ、非同期処理をあたかも同期処理のように書けるようにしたものです。これにより、コードの可読性と保守性が劇的に向上しました。本稿では、牛肉・豚肉・鶏肉・ジビエといった具体的な情報提供を想定したアプリケーションにおいて、yield（およびasync/await）を用いた非同期処理の実装について、その詳細と応用について解説します。

非同期処理の必要性：情報提供アプリケーションの例

情報取得の遅延

牛肉、豚肉、鶏肉、ジビエといった各食材に関する詳細な情報は、しばしば外部のデータベースやAPIから取得する必要があります。例えば、特定の産地の牛肉の栄養価、豚肉の部位ごとの特徴、鶏肉の品種による違い、ジビエの旬や調理法に関する最新情報などは、リアルタイムで更新される可能性があります。これらの情報を取得するには、ネットワーク経由での通信が発生し、その応答には数秒、場合によってはそれ以上の時間がかかることがあります。

もし、これらの情報取得を同期的に行ってしまうと、ユーザーが「ジビエの旬」ボタンをクリックした瞬間から、情報が取得できて表示されるまでの間、アプリケーション全体が応答不能になります。これは、ユーザーにとって非常にストレスフルな体験となります。

ユーザーエクスペリエンスの向上

非同期処理を導入することで、情報取得中はバックグラウンドで処理を実行し、UIは引き続き操作可能に保つことができます。例えば、ユーザーが食材リストをスクロールしている間に、個別の食材の詳細情報が非同期で取得されるように設計すれば、ユーザーは待たされることなくスムーズに情報を閲覧できます。

また、複数の食材情報を同時に取得する場合でも、それぞれの取得処理を並列に実行し、完了したものから順次表示することで、ユーザーはより早く目的の情報にアクセスできるようになります。

Yield（async/await）を使った非同期処理の実装

基本的なasync/awaitの構文

JavaScriptにおけるasync/awaitは、非同期関数を宣言するためのasyncキーワードと、Promiseが解決されるのを待つためのawaitキーワードから構成されます。

async関数は、常にPromiseを返します。関数内でreturnされた値はPromise.resolve()でラップされ、未捕捉の例外はPromise.reject()でラップされます。

awaitは、async関数内でのみ使用できます。awaitは、Promiseが解決されるまで関数実行を一時停止し、Promiseが解決されると（または拒否されると）、その解決値（または拒否理由）を返します。 

async function fetchMeatInfo(meatType) {
  try {
    const response = await fetch(`/api/meats/${meatType}`);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error fetching meat info:", error);
    return null; // エラー時にはnullを返すなど、適切な処理
  }
}

複数の非同期処理の実行

順次実行

例えば、まず牛肉の基本情報を取得し、その後に豚肉の詳細情報を取得したい場合、以下のようにawaitを連続して使用します。 

async function displayAllMeatInfo() {
  const beefInfo = await fetchMeatInfo('beef');
  const porkInfo = await fetchMeatInfo('pork');

  if (beefInfo) {
    displayBeefDetails(beefInfo);
  }
  if (porkInfo) {
    displayPorkDetails(porkInfo);
  }
}

この場合、牛肉の情報取得が完了してから豚肉の情報取得が開始されます。

並列実行

一方、牛肉と豚肉の情報を同時に取得し、どちらかが完了したら表示を始めたい場合は、Promise.all()を使用するのが効率的です。 

async function displayAllMeatInfoConcurrently() {
  const beefPromise = fetchMeatInfo('beef');
  const porkPromise = fetchMeatInfo('pork');
  const chickenPromise = fetchMeatInfo('chicken');
  const gibierPromise = fetchMeatInfo('gibier');

  const results = await Promise.all([beefPromise, porkPromise, chickenPromise, gibierPromise]);

  const [beefInfo, porkInfo, chickenInfo, gibierInfo] = results;

  if (beefInfo) {
    displayBeefDetails(beefInfo);
  }
  if (porkInfo) {
    displayPorkDetails(porkInfo);
  }
  if (chickenInfo) {
    displayChickenDetails(chickenInfo);
  }
  if (gibierInfo) {
    displayGibierDetails(gibierInfo);
  }
}

Promise.all()は、渡されたPromiseの配列がすべて解決されるのを待ち、解決された値の配列を返します。いずれかのPromiseが拒否された場合、Promise.all()は即座にその拒否理由で拒否されます。

タイムアウト処理

ネットワーク通信など、非同期処理では予期せぬ遅延やタイムアウトが発生する可能性があります。これを防ぐために、タイムアウト処理を実装することが重要です。 

function timeout(ms, promise) {
  return new Promise((resolve, reject) => {
    const id = setTimeout(() => {
      reject(new Error(`Operation timed out after ${ms}ms`));
    }, ms);

    promise.then(
      (res) => {
        clearTimeout(id);
        resolve(res);
      },
      (err) => {
        clearTimeout(id);
        reject(err);
      }
    );
  });
}

async function fetchMeatInfoWithTimeout(meatType, timeoutMs) {
  try {
    const dataPromise = fetchMeatInfo(meatType);
    const result = await timeout(timeoutMs, dataPromise);
    return result;
  } catch (error) {
    console.error("Error fetching meat info with timeout:", error);
    return null;
  }
}

このtimeout関数は、指定されたミリ秒数を超えてPromiseが解決または拒否されない場合に、エラーを発生させます。これにより、長時間待機し続けることを防ぎ、アプリケーションの応答性を維持します。

エラーハンドリング

try…catchブロック

async/await構文では、同期処理と同様にtry…catchブロックを使用して非同期処理で発生したエラーを捕捉できます。これは、Promiseの.catch()メソッドよりも直感的で、コードの流れを追跡しやすくなります。

エラーの種類に応じた処理

ネットワークエラー、APIからの不正なレスポンス、データ解析エラーなど、発生しうるエラーの種類を想定し、それぞれに対して適切な処理を記述します。例えば、ネットワークエラーの場合はリトライ処理を試みる、APIエラーの場合はエラーメッセージをユーザーに表示するなどです。

UIとの連携

ローディング表示

非同期処理の実行中は、ユーザーに処理が進行中であることを伝えるために、ローディングスピナーなどのUI要素を表示することが一般的です。情報取得が完了したら、ローディング表示を非表示にし、取得したデータを表示します。 

async function loadAndDisplayMeat(meatType) {
  showLoadingIndicator(meatType); // ローディング表示を開始
  const meatInfo = await fetchMeatInfoWithTimeout(meatType, 5000); // 5秒のタイムアウト
  hideLoadingIndicator(meatType); // ローディング表示を終了

  if (meatInfo) {
    displayMeatDetails(meatType, meatInfo); // 取得したデータを表示
  } else {
    showErrorMessage(meatType, "情報が取得できませんでした。"); // エラーメッセージ表示
  }
}

部分的なUI更新

全ての情報を一度に取得・表示するのではなく、ユーザーが選択した食材や、画面に表示されている範囲の食材情報のみを非同期に取得・更新することで、データ転送量を削減し、表示速度を向上させることができます。

まとめ

Yield（一時停止）、特にasync/await構文は、牛肉・豚肉・鶏肉・ジビエといった、多様な情報提供を伴うアプリケーションにおいて、非同期処理を効率的かつ保守的に実装するための強力なツールです。これにより、アプリケーションの応答性を高め、ユーザーエクスペリエンスを劇的に向上させることができます。

情報取得の遅延、複数の情報取得の管理、タイムアウト処理、そして適切なエラーハンドリングを実装することで、信頼性の高い情報提供システムを構築することが可能になります。UIとの連携も考慮することで、ユーザーはストレスなく情報にアクセスできるようになります。これらの技術を効果的に活用することで、よりリッチでインタラクティブなアプリケーション開発が実現できるでしょう。