【JavaScript】JSONファイルの読み込み方

JavaScriptでJSONファイルを読み込む方法について解説します。JSON（JavaScript Object Notation）は、データを交換するためのフォーマットとして広く使用されており、JavaScriptでの扱いが非常に簡単です。

fetchメソッドを使用してJSONファイルを読み込む

fetchメソッドを使用すると、簡単に外部のJSONファイルを読み込むことができます。以下のコード例では、data.jsonという名前のJSONファイルを読み込み、コンソールに表示しています。

fetch('data.json')
  .then(response => {
    if (!response.ok) {
      throw new Error('ネットワークの応答が正常ではありません');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('JSONの読み込み中にエラーが発生しました:', error);
  });

• fetch(‘data.json’)：fetchメソッドでdata.jsonファイルを取得します。
• response.json()：取得したデータをJSON形式に変換します。
• console.log(data)：変換したデータをコンソールに表示します。

同期的にJSONファイルを読み込む

fetchメソッドは非同期的に動作しますが、場合によっては同期的にJSONファイルを読み込みたいこともあるかもしれません。その場合、XMLHttpRequestを使用する方法があります。

function loadJSON(filePath) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', filePath, false);
  xhr.send(null);

  if (xhr.status === 200) {
    return JSON.parse(xhr.responseText);
  } else {
    throw new Error('JSONファイルの読み込みに失敗しました');
  }
}

try {
  const data = loadJSON('data.json');
  console.log(data);
} catch (error) {
  console.error(error);
}

• xhr.open(‘GET’, filePath, false)：XMLHttpRequestを同期的に開きます。
• xhr.send(null)：リクエストを送信します。
• JSON.parse(xhr.responseText)：レスポンスをJSON形式に変換します。

ES6モジュールを使用してJSONファイルをインポートする

Node.js環境やモダンなブラウザでは、ES6モジュールを使用してJSONファイルを直接インポートすることも可能です。これは主にNode.js環境で使用されますが、一部のブラウザでもサポートされています。

import data from './data.json' assert { type: 'json' };

console.log(data);

import data from ‘./data.json’ assert { type: ‘json’ };：ES6モジュールを使って、data.jsonをインポートします。

まとめ

JavaScriptでJSONファイルを読み込む方法はさまざまありますが、一般的にはfetchメソッドを使用するのが簡便です。用途に応じて、同期的な読み込みやモジュールの使用を検討してください。