はじめに (対象読者・この記事でわかること)

この記事は、Node.jsで非同期処理を扱う際にHTTPリクエストの結果を配列に格納しようとしているが、配列の要素がundefinedになってしまうという問題に直面している開発者を対象としています。この記事を読むことで、非同期処理におけるコールバックやPromiseの扱い方を理解し、HTTPリクエストの結果を正しく配列に格納する方法を学ぶことができます。また、なぜ結果がundefinedになってしまうのかという根本的な原因を理解することで、同様の問題が将来発生した際にも自力で解決できるようになります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な知識 - Node.jsの基本的な使い方 - 非同期処理の基本的な概念（コールバックやPromise） - HTTPリクエストの基本的な知識

非同期処理と配列の問題

Node.jsは非同期I/Oを得意とするJavaScriptランタイムであり、HTTPリクエストのようなI/O処理は非同期で実行されます。開発者が初めてNode.jsで複数のHTTPリクエストを処理し、その結果を配列に格納しようとすると、期待通りに結果が格納されずにundefinedになってしまうという問題に遭遇することがよくあります。これは、Node.jsの非同期処理の特性と、JavaScriptのイベントループの動作方法を理解していないことが原因です。

この問題を理解するためには、JavaScriptの非同期処理モデルとイベントループの動作を理解する必要があります。非同期処理は、時間のかかる操作（ファイルI/Oやネットワークリクエストなど）をブロックせずに実行するための仕組みですが、その結果を扱う際には特別な注意が必要です。

問題の再現と解決策

問題の再現

まず、問題を再現するための簡単なコードを見てみましょう。以下のコードは、複数のURLに対してHTTPリクエストを送信し、その結果を配列に格納しようとしています。

Javascript

const http = require('http');

const urls = [
  'http://example.com',
  'http://example.org',
  'http://example.net'
];

const results = [];

urls.forEach(url => {
  http.get(url, (res) => {
    let data = '';
    res.on('data', (chunk) => {
      data += chunk;
    });
    res.on('end', () => {
      results.push({ url, data });
    });
  });
});

console.log(results); // 空の配列またはundefinedの要素が含まれる配列が出力される

このコードを実行すると、results配列は空の状態で出力されたり、中身がundefinedになったりすることがあります。これは、console.log(results)が非同期処理が完了する前に実行されてしまうためです。

原因の分析

この問題の根本的な原因は、JavaScriptの非同期処理の特性にあります。http.getは非同期関数であり、コールバック関数内の処理はイベントループによって後で実行されます。console.log(results)は、これらのコールバックが実行される前に実行されてしまうため、配列はまだ空の状態です。

同様に、forEachループ内で非同期処理を実行すると、ループ本体はすぐに完了してしまい、コールバック関数内の処理は後から実行されます。その結果、配列への追加処理が完了する前に配列の状態を確認しようとすると、期待通りにデータが格納されていない状態になります。

解決策1：コールバックを使用する方法

最も基本的な解決策は、コールバックを使用して非同期処理が完了したことを通知する方法です。

Javascript

const http = require('http');

const urls = [
  'http://example.com',
  'http://example.org',
  'http://example.net'
];

function fetchUrls(urls, callback) {
  const results = [];
  let completed = 0;

  urls.forEach(url => {
    http.get(url, (res) => {
      let data = '';
      res.on('data', (chunk) => {
        data += chunk;
      });
      res.on('end', () => {
        results.push({ url, data });
        completed++;

        if (completed === urls.length) {
          callback(results);
        }
      });
    });
  });
}

fetchUrls(urls, (results) => {
  console.log(results); // すべての結果が格納された配列が出力される
});

このコードでは、fetchUrls関数内で完了したリクエストの数をカウントし、すべてのリクエストが完了したらコールバック関数を呼び出しています。これにより、console.log(results)はすべての結果が格納された状態で実行されます。

解決策2：Promiseを使用する方法

より現代的なアプローチとして、Promiseを使用する方法があります。Node.jsのhttpモジュールはPromiseをネイティブでサポートしていないので、util.promisifyを使用してPromiseに変換する必要があります。

Javascript

const http = require('http');
const { promisify } = require('util');

const get = promisify(http.get);

const urls = [
  'http://example.com',
  'http://example.org',
  'http://example.net'
];

async function fetchUrls(urls) {
  const results = [];

  for (const url of urls) {
    try {
      const res = await get(url);
      let data = '';

      res.on('data', (chunk) => {
        data += chunk;
      });

      await new Promise((resolve, reject) => {
        res.on('end', resolve);
        res.on('error', reject);
      });

      results.push({ url, data });
    } catch (error) {
      console.error(`Error fetching ${url}:`, error);
    }
  }

  return results;
}

fetchUrls(urls).then(results => {
  console.log(results); // すべての結果が格納された配列が出力される
});

このコードでは、util.promisifyを使用してhttp.getをPromiseに変換し、async/await構文で非同期処理を同期処理のように扱っています。これにより、各URLに対するリクエストが順番に実行され、結果が正しく配列に格納されます。

解決策3：axiosを使用する方法

より簡単な方法として、axiosのようなHTTPクライアントライブラリを使用する方法があります。axiosはPromiseをネイティブでサポートしており、非同期処理をより簡単に扱うことができます。

Javascript

const axios = require('axios');

const urls = [
  'http://example.com',
  'http://example.org',
  'http://example.net'
];

async function fetchUrls(urls) {
  try {
    const promises = urls.map(url => axios.get(url));
    const responses = await Promise.all(promises);

    const results = responses.map((res, index) => ({
      url: urls[index],
      data: res.data
    }));

    return results;
  } catch (error) {
    console.error('Error fetching URLs:', error);
    return [];
  }
}

fetchUrls(urls).then(results => {
  console.log(results); // すべての結果が格納された配列が出力される
});

このコードでは、Promise.allを使用して複数のHTTPリクエストを並行で実行し、すべてのリクエストが完了したら結果を処理しています。これにより、非同期処理を効率的に扱うことができます。

エラーハンドリングの重要性

非同期処理を扱う際には、エラーハンドリングも重要です。http.getはエラーイベントを発行することがあるため、エラーハンドリングを適切に行わないと、一部のリクエストが失敗してもプログラムが停止してしまったり、予期せぬ動作をしたりします。

上記の解決策では、すべての方法でエラーハンドリングを実装しています。コールバックの場合はエラーハンドリング用のコールバックを追加し、Promiseとasync/awaitの場合はtry-catch構文を使用しています。これにより、エラーが発生してもプログラムが停止せず、適切にエラーを処理できます。

並列実行と逐次実行の違い

非同期処理を扱う際には、並列実行と逐次実行の違いを理解することも重要です。Promise.allを使用すると複数のリクエストを並行で実行できますが、順序が保証されません。順序を維持したい場合は、ループ内で非同期処理を実行する必要があります。

逐次実行（一つずつ実行）のコード例：

Javascript

async function fetchUrlsSequentially(urls) {
  const results = [];

  for (const url of urls) {
    try {
      const res = await axios.get(url);
      results.push({ url, data: res.data });
    } catch (error) {
      console.error(`Error fetching ${url}:`, error);
    }
  }

  return results;
}

fetchUrlsSequentially(urls).then(results => {
  console.log(results);
});

このコードでは、for...ofループ内でawaitを使用しているため、各リクエストが順番に実行されます。これにより、結果の順序がURLの順序と一致しますが、全体的な処理時間は長くなります。

まとめ

本記事では、Node.jsで非同期HTTPリクエストの結果を配列に格納する際に発生するundefined問題の原因と解決法を解説しました。この問題は、JavaScriptの非同期処理の特性と、イベントループの動作方法を理解していないことが原因です。

非同期処理を適切に扱うためには、コールバック、Promise、async/awaitなどの仕組みを理解し、非同期処理の完了を待つ仕組みを実装する必要があります。また、エラーハンドリングも重要です。さらに、並列実行と逐次実行の違いを理解し、用途に応じて適切な方法を選ぶことも重要です。

この記事を通して、非同期処理におけるHTTPリクエストの結果を正しく配列に格納する方法を学び、Node.jsでの開発がよりスムーズになることを願っています。

参考資料