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

JavaScriptでサブオブジェクトや配列を含むオブジェクトをインポートする方法

はじめに

JavaScriptでは、ESモジュール（import / export）の仕組みを利用することで、別ファイルに定義したオブジェクトを簡単に読み込めます。オブジェクトの中にサブオブジェクト（ネストされたオブジェクト）や配列が含まれていても、そのままインポートして扱うことができます。以下に具体的なコード例を示します。

コード例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>サブオブジェクトと配列を持つオブジェクトのインポート</h1>
<div class="result" style="color: green;"></div>
<script src="script.js" type="module"></script>
</body>
</html>

script.js

import obj from "./sample.js";
let resultEle = document.querySelector(".result");
for (let i in obj) {
    resultEle.innerHTML += "Property = " + i + " : Value = " + obj[i] + "<br>";
}

sample.js

export default {
    firstName: "Rohan",
    lastName: "Sharma",
    school: {
        name: "St Marks",
        address: "USA",
    },
    sports: ["cricket", "football"],
};

コードの解説

sample.js では export default を使って、氏名（文字列）、学校情報（ネストされたサブオブジェクト）、好きなスポーツ（配列）をひとつのオブジェクトにまとめてエクスポートしています。

script.js では import 文でこのオブジェクトを読み込み、for...in ループで各プロパティを順番に取り出して画面に表示しています。サブオブジェクトや配列も、通常のプロパティとまったく同じように扱えるのがポイントです。

なお、モジュールを使用する場合は、HTML側で <script type="module"> と指定する必要があります。また、ローカル環境で動作確認する際は、ファイルを直接開くとCORS制約によりエラーになることがあるため、簡易HTTPサーバーなど経由でページを開くことをおすすめします。

出力結果

上記のコードを実行すると、次のような出力が得られます。

JavaScriptでサブオブジェクトや配列を含むオブジェクトをインポートする方法

  1. JavaScriptでモジュール・ライブラリをインポート・エクスポートする方法をわかりやすく解説

    JavaScriptにおけるモジュールのインポートとエクスポートJavaScriptでは、ESモジュール（ESM）の仕組みを利用することで、コードを複数のファイルに分割し、必要な機能だけを読み込んで再利用できます。モジュール化によって、コードの保守性・再利用性・可読性が大きく向上します。注意 − この例を実行するには、ローカルホストサーバー（localhost）の起動が必要です。file:// プロトコルではモジュールを読み込めないため、VS Codeの「Live Server」拡張機能などを使ってローカル環境を立ち上げるのがおすすめです。サンプルコード以下は、JavaScriptでモジュール

  2. 【JavaScript入門】複数のオブジェクトを1つにマージして単一のオブジェクト配列を作成する方法

    JavaScriptでは、Object.assign()メソッドとスプレッド構文（...）を組み合わせることで、配列内の複数のオブジェクトを1つのオブジェクトに簡単にマージすることができます。 Object.assign()は、1つ以上のコピー元オブジェクトから、コピー先のオブジェクトへすべてのプロパティをコピーするためのメソッドです。スプレッド構文を使って配列の要素を展開することで、各オブジェクトのキーと値が1つのオブジェクトに統合されます。 コード例 以下のコードは、配列内の複数のオブジェクトを単一のオブジェクトにマージする例です。 <!DOCTYPE html> <ht