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

【JavaScript入門】Symbolを使ってオブジェクトごとに一意のIDを作成する方法

はじめに

JavaScriptでオブジェクトごとに一意のIDを作成したい場合、Symbol()を使うのが最も簡単かつ確実な方法です。Symbolは呼び出されるたびに必ず新しい一意の値を生成するため、たとえ同じ説明文字列を渡しても、二度と同じ値にはなりません。

以下は、各オブジェクトに対して一意のIDを作成するサンプルコードです。

実装例

<!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>Create a unique ID for each object</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to check if id generated are unique or not</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let obj = {
        id: Symbol("UID"),
        a: 22,
        b: 44,
    };
    let obj1 = {
        id: Symbol("UID"),
        a: 12,
        b: 41,
    };
    BtnEle.addEventListener("click", () => {
        if (obj.id === obj1.id) {
            resEle.innerHTML = "The id generated are not unique <br>";
        }
        else {
            resEle.innerHTML = "The id generated is unique for each object";
        }
    });
</script>
</body>
</html>

コードのポイント

  • オブジェクト obj と obj1 のそれぞれに、Symbol("UID") で生成した一意の値を id プロパティとして設定しています。
  • ボタンをクリックすると、厳密等価演算子（===）で2つのIDを比較し、一意性を確認します。
  • Symbolには同じ "UID" という説明文字列を渡していますが、これは単なるデバッグ用のラベルであり、値そのものには影響しません。

出力結果

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

【JavaScript入門】Symbolを使ってオブジェクトごとに一意のIDを作成する方法

「CLICK HERE」ボタンをクリックすると、以下のように比較結果が表示されます。

【JavaScript入門】Symbolを使ってオブジェクトごとに一意のIDを作成する方法

まとめ

このように、Symbolで生成したIDは各オブジェクトに対して必ず一意であることが確認できます。同じ説明文字列（"UID"）を指定しても、Symbol同士が等しくなることは一切ありません。

IDの一意性が求められる場面、例えばオブジェクトの識別やMapのキー管理などにおいて、Symbolは非常に有効な手段となります。ぜひ活用してみてください。

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

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

  2. 【JavaScript入門】Symbolを使ってオブジェクトごとに一意のIDを作成する方法

    はじめにJavaScriptでオブジェクトごとに一意のIDを作成したい場合、Symbol()を使うのが最も簡単かつ確実な方法です。Symbolは呼び出されるたびに必ず新しい一意の値を生成するため、たとえ同じ説明文字列を渡しても、二度と同じ値にはなりません。以下は、各オブジェクトに対して一意のIDを作成するサンプルコードです。実装例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewp