【JavaScript入門】オブジェクトと参照

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

オブジェクトと参照

　JavaScript のオブジェクトを変数に代入するとき、実際に格納されるのはオブジェクトそのものではなく「参照」と呼ばれる情報です。プリミティブ型のように「値そのもの」をコピーするのではなく、「どのオブジェクトを指し示しているか」をコピーするため、参照先でデータが変更された場合、それを共有している他の変数でも変化が見えるようになります。この仕組みを理解することが、オブジェクトを安全に扱ううえで重要です。

１．オブジェクトと参照の関係

プリミティブ型（数値や文字列など）：変数には値そのものが格納される。
オブジェクト（配列を含む） ：変数には「参照」と呼ばれる情報が格納される。

　複数の変数が同じオブジェクトを指しているときに、一方でプロパティを変更すると、他方から参照したときにも更新が反映されます。

２．参照の共有とプロパティ変更

　次の例を「objectReferenceSample.html」として、ブラウザで開いて開発者ツール（コンソール）を確認してください。

【objectReferenceSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>objectReferenceSample.html</title>
</head>
<body>
  <h1>オブジェクトと参照のサンプル</h1>
  <p>コンソールを開いて結果を確認してください。</p>

  <script>
    // 1. オブジェクトを作成
    const obj1 = { name: 'クリームパン', price: 550 };

    // 2. オブジェクトの参照を別の変数へコピー
    const obj2 = obj1;

    // 3. 参照を通じてプロパティを書き換え
    obj2.price = 500;

    // 4. 元の変数から値を確認（変更が反映されている）
    console.log('obj1.price:', obj1.price); // 500

    // 5. const でも内部のプロパティは変更可能
    const obj3 = { name: 'あんぱん', price: 300 };
    obj3.price = 250; // プロパティは自由に変更できる
    console.log('obj3:', obj3);

    // 6. 配列の場合も同じ仕組み
    const arr1 = ['アップル', 'オレンジ'];
    const arr2 = arr1;
    arr2[1] = 'ピーチ';
    console.log('arr1:', arr1); // ['アップル', 'ピーチ']
    console.log('arr2:', arr2);
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

obj1.price: 500
obj3: {name: 'あんぱん', price: 250}
arr1: (2) ['アップル', 'ピーチ']
arr2: (2) ['アップル', 'ピーチ']

obj2 は obj1 と同じオブジェクトを指しているため、一方の値を変更するともう一方にも変化が反映されます。
const で宣言しても、プロパティ自体を変更することは可能です。const が固定するのは「オブジェクトへの参照」なので、オブジェクト内部の変更までは制限しません。

３．なぜこれが混乱を招くのか

　プリミティブ型では「変数ごとに独立した値を持つ」のが普通ですが、オブジェクトでは「変数同士が同じオブジェクトを共有している」ケースがあり得ます。初心者のうちは「値を変更したら、もう一方まで変わった！」と驚くことが多いので、意図せずバグを起こさないように気をつけましょう。

まとめ

オブジェクトや配列の変数には、データそのものではなく「参照」が代入される。
1つのオブジェクトを指す参照を複数の変数が持っていると、どこか1つを変更しても全てに影響が及ぶ。
const 変数でも、オブジェクトのプロパティは変更可能である点に注意。

　この挙動を理解すると、大きなデータや配列・オブジェクトの扱いで余計なトラブルを避けられます。JavaScript でオブジェクトを共有するときは、常にこの「参照」を意識してコードを書くようにしましょう。