JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで外部JSONファイルを読み込む方法【Node.jsとブラウザの両方に対応】

はじめに

本記事では、JavaScriptから外部のJSONファイルを読み込む方法を解説します。まず、以下のようなデータを含むJSONファイル「config.json」があると仮定しましょう。

{
    "secret": "sfsaad7898fdsfsdf^*($%^*$",
    "connectionString": "mongodb+srv://username:password@cluster0.laaif.mongodb.net/events?retryWrites=true&w=majority",
    "localConnectionString": "mongodb+srv://username:password@cluster0.laaif.mongodb.net/eventsLocal?retryWrites=true&w=majority",
    "frontendClient": "https://helloworld.com",
    "localFrontendClient": "https://localhost:3000"
}

そして、同じディレクトリ（フォルダ）内には「index.js」というJavaScriptファイルが配置されているものとします。

ここでの目的は、このJavaScriptファイルからJSONファイルの内容へアクセスすることです。実行環境によって使える手法が異なるため、代表的な2つの方法を順番に見ていきましょう。

方法1：requireモジュールを使用する（Node.js環境のみ）

JavaScriptファイルをNode.js環境で実行している場合は、requireモジュールを使ってJSONファイルにアクセスできます。requireはJSONファイルを自動的にパースし、そのままJavaScriptオブジェクトとして返してくれるのが特徴です。

コード例

const configData = require('./config.json');
console.log(typeof configData);
console.log(configData);

typeofで型を確認すると「object」が出力されます。つまり、JSONファイルの中身が文字列ではなく、即座に利用可能なオブジェクトとして取得できていることがわかります。

方法2：ES6のimport構文を使用する（ブラウザ環境のみ）

ブラウザ上でJavaScriptを実行しながらJSONファイルにアクセスしたい場合は、ES6のimport構文を利用します。この際、HTML側のscriptタグにtype="module"を指定する必要がある点に注意してください。

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>READ JSON FILE</title>
</head>
<body>
<p id='main'></p>
<script type="module" src="./index.js"></script>
</body>
</html>

JavaScriptファイル

import configData from './config.json';
document.getElementById('main').innerHTML = JSON.stringify(configData);

import文でJSONファイルを読み込み、その内容をJSON.stringify()で文字列化して画面に表示しています。

出力結果

実行すると、以下のようにconfig.jsonの内容が正しく取得できていることが確認できます。

{
    secret: 'sfsaad7898fdsfsdf^*($%^*$',
    connectionString: 'mongodb+srv://username:password@cluster0.laaif.mongodb.net/events?retryWrites=true&w=majority',
    localConnectionString: 'mongodb+srv://username:password@cluster0.laaif.mongodb.net/eventsLocal?retryWrites=true&w=majority',
    frontendClient: 'https://helloworld.com',
    localFrontendClient: 'https://localhost:3000'
}

まとめ

外部JSONファイルの読み込み方は、実行環境によって使い分ける必要があります。

Node.js環境ではrequireモジュールを使えばシンプルに読み込めますし、ブラウザ環境ではtype="module"を指定した上でES6のimport構文を利用します。それぞれの特性を理解して、開発環境に合った方法を選択しましょう。

  1. 【サンプルコード付き】JavaScriptファイルを動的に読み込む方法を解説

    JavaScriptファイルを動的に読み込むことで、ページの初期表示を高速化したり、必要なタイミングで必要なスクリプトだけを取得したりできます。ここでは、ボタンをクリックしたときに外部のJavaScriptファイルを読み込むサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <tit

  2. JavaScriptでJSON配列からデータを読み取る方法をサンプルコード付きで解説

    Web開発では、APIから取得したJSONデータを処理する場面が非常によくあります。本記事では、JavaScriptを使ってJSON配列からデータを読み取り、画面に表示する方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 JSON配列からデータを読み取る基本の流れ JSON形式の文字列をJavaScriptで扱うには、まずJSON.parse()メソッドで文字列をJavaScriptのオブジェクト（配列）に変換します。変換後は、forEach()メソッドなどを活用して、配列の各要素に格納された値へ簡単にアクセスできます。 サンプルコード <!DOCTYPE htm