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

JavaScriptでインポートしたオブジェクトを分割代入（デストラクチャリング）する方法

JavaScriptでは、ESモジュールからインポートしたオブジェクトに対して分割代入（デストラクチャリング）を使うことで、必要なプロパティだけを個別の変数として簡潔に取り出すことができます。ここでは、import で読み込んだオブジェクトを分割代入する具体的な手順とコード例を紹介します。

ポイント：分割代入の基本構文

オブジェクトの分割代入は、次のように波括弧 { } の中に取り出したいプロパティ名を並べて記述します。
let {プロパティ1, プロパティ2, プロパティ3} = オブジェクト;
この構文は、インポートされたデフォルトエクスポートのオブジェクトにもそのまま適用できます。

コード例

以下は、インポートしたオブジェクトを非構造化するサンプルコードです。

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;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>De-structure an imported object in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to destructure the person object</h3>
<script src="script.js" type="module"></script>
</body>
</html>

script.js

type="module" を指定してスクリプトを読み込み、import 文でオブジェクトを取得した後、分割代入を行います。

import person from "./sample.js";
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
// インポートしたオブジェクト person を分割代入
let {firstName,lastName,age} = person;
BtnEle.addEventListener("click", () => {
    resEle.innerHTML = 'firstName = '+firstName+'<br>';
    resEle.innerHTML += 'lastName = '+lastName+'<br>';
    resEle.innerHTML += 'age = '+age+'<br>';
});

sample.js

デフォルトエクスポートでオブジェクトを公開しています。

export default {
    firstName:'Rohan',
    lastName:'Sharma',
    age:22,
}

実行結果

上記のコードを実行すると、次のように表示されます。

JavaScriptでインポートしたオブジェクトを分割代入（デストラクチャリング）する方法

「CLICK HERE」ボタンをクリックすると、分割代入によって取り出した各プロパティの値が画面に出力されます。

JavaScriptでインポートしたオブジェクトを分割代入（デストラクチャリング）する方法

まとめ

このように、import で受け取ったオブジェクトも通常のオブジェクトと同じように let {a, b, c} = obj; の形式で分割代入できます。必要なデータだけを変数として扱えるため、コードの可読性と保守性が向上します。モジュール間でデータを受け渡す際には、ぜひ活用してみてください。

  1. 文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

    JavaScriptでJSON形式の文字列をオブジェクトに変換するには、JSON.parse()メソッドを使用します。このメソッドは、引数に渡された文字列を解析（パース）し、対応するJavaScriptオブジェクトを返します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Docum

  2. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /