ローカルJSONファイルをJavaScript変数に読み込む方法｜require と fetch の使い分け

プロジェクトのディレクトリに employee.json ファイルが配置されており、同じディレクトリ内にある JavaScript ファイルからその内容を読み込みたい――そんな場面は開発現場でよくあります。本記事では、ローカルの JSON ファイルを JavaScript の変数に読み込むための代表的な2つの方法を、具体的なコード例とともにわかりやすく解説します。

サンプルデータ：employees.json の中身

今回使用する employees.json は、従業員情報を配列として格納したファイルです。内容は以下の通りです。

{
  "Employees": [
    {
      "userId": "ravjy", "jobTitleName": "Developer", "firstName": "Ran", "lastName": "Vijay",
      "preferredFullName": "Ran Vijay", "employeeCode": "H9", "region": "DL",
      "phoneNumber": "34567689", "emailAddress": "ranvijay.k.ran@gmail.com"
    },
    {
      "userId": "mrvjy", "jobTitleName": "Developer", "firstName": "Murli", "lastName": "Vijay",
      "preferredFullName": "Murli Vijay", "employeeCode": "A2", "region": "MU",
      "phoneNumber": "6543565", "emailAddress": "murli@vijay.com"
    }
  ]
}

この JSON ファイルへアクセスするには、主に以下の2つの方法があります。

方法1：require モジュールを使う（Node.js 向け）

Node.js 環境では、組み込みの require を使って JSON ファイルを同期的に読み込めます。最もシンプルで手軽な方法です。

const data = require('./employees.json');
console.log(data);

方法2：fetch 関数を使う（ブラウザ向け）

Web ブラウザ環境では、fetch API を使って JSON ファイルを非同期に取得します。

fetch("./employees.json")
  .then(response => {
    return response.json();
  })
  .then(data => console.log(data));

また、async / await 構文を使えば、より直感的に記述することもできます。

const response = await fetch("./employees.json");
const data = await response.json();
console.log(data);

注意：1つ目の require は Node.js 環境に適した方法です。一方、2つ目の fetch はもともとブラウザ環境専用の API でしたが、Node.js 18 以降ではグローバルに利用できるようになっています。実行する環境に応じて適切な方法を選択しましょう。

実行結果

上記のいずれかの方法を実行すると、コンソールには次のようにオブジェクト形式でデータが出力されます。

{
  Employees: [
    {
      userId: 'ravjy',
      jobTitleName: 'Developer',
      firstName: 'Ran',
      lastName: 'Vijay',
      preferredFullName: 'Ran Vijay',
      employeeCode: 'H9',
      region: 'DL',
      phoneNumber: '34567689',
      emailAddress: 'ranvijay.k.ran@gmail.com'
    },
    {
      userId: 'mrvjy',
      jobTitleName: 'Developer',
      firstName: 'Murli',
      lastName: 'Vijay',
      preferredFullName: 'Murli Vijay',
      employeeCode: 'A2',
      region: 'MU',
      phoneNumber: '6543565',
      emailAddress: 'murli@vijay.com'
    }
  ]
}

まとめ

• Node.js で動かす場合： require('./employees.json') で同期的に読み込むのが簡単です。
• ブラウザで動かす場合： fetch() と response.json() を組み合わせて非同期に取得します。
• 実行環境（サーバーかブラウザか）に合わせて適切な読み込み方法を選ぶことが重要です。