先生と生徒の会話形式で理解しよう

生徒

「JavaScriptでオブジェクトを『イミュータブル』にするってどういう意味ですか？」

先生

「イミュータブルとは『変更できない』という意味です。JavaScriptではObject.freeze()という機能を使って、オブジェクトを変更できないようにすることができますよ。」

生徒

「変更できないって、具体的にはどういうことですか？」

先生

「例えば、大事な設定情報が間違って変わらないように守るイメージです。さっそく詳しく説明していきますね！」

1. イミュータブルとは？オブジェクトの変更禁止の意味

イミュータブル（immutable）は「変わらない」「変更できない」という意味です。JavaScriptのオブジェクトは通常、プロパティ（値）を自由に変えられます。

しかしObject.freeze()を使うと、そのオブジェクトの中身を変更できなくなります。変更しようとするとエラーにはなりませんが、変更は無視されます。

これにより、データが勝手に変わってしまうミスを防ぐことができます。

2. Object.freeze()の使い方

Object.freeze()は引数にオブジェクトを渡すだけで、そのオブジェクトを凍らせて変更禁止にします。


const person = {
  name: "太郎",
  age: 30
};

Object.freeze(person);

person.age = 40;   // 変更されない
person.city = "東京"; // 新しいプロパティも追加できない

console.log(person.age);  // 30
console.log(person.city); // undefined

このように、一度凍らせたオブジェクトは中身を書き換えたり、プロパティを追加できなくなります。

3. なぜオブジェクトをイミュータブルにするの？

プログラムが大きくなると、色んな場所から同じオブジェクトを触ることがあります。そんなときに、勝手に内容が変わるとバグの原因になります。

イミュータブルにすると「これは絶対変わらないデータだ」と決められるので、安心して使えます。

特にReactなどのライブラリでは、イミュータブルデータを扱うことが多いです。

4. 注意点：Object.freeze()は浅い凍結（しゃくてい）

Object.freeze()は、オブジェクトの一番外側だけを凍らせます。もしオブジェクトの中に別のオブジェクトがある場合、その中のプロパティは凍りません。

これを「浅い凍結」と呼びます。


const user = {
  name: "花子",
  address: {
    city: "大阪",
    zip: "123-4567"
  }
};

Object.freeze(user);

user.address.city = "京都"; // 変更できてしまう
console.log(user.address.city); // 京都

このように、ネストされたオブジェクトの中身は変わってしまうので、深く凍結したい場合は再帰的に処理する必要があります。

5. 深い凍結（ディープフリーズ）を自分で作る方法

深い凍結とは、オブジェクトの中にある全てのオブジェクトを再帰的に凍結することです。以下は簡単な例です。


function deepFreeze(obj) {
  Object.freeze(obj);

  Object.keys(obj).forEach(key => {
    if (
      obj[key] !== null &&
      typeof obj[key] === "object" &&
      !Object.isFrozen(obj[key])
    ) {
      deepFreeze(obj[key]);
    }
  });

  return obj;
}

const user = {
  name: "花子",
  address: {
    city: "大阪",
    zip: "123-4567"
  }
};

deepFreeze(user);

user.address.city = "京都"; // 変更できない
console.log(user.address.city); // 大阪

これでオブジェクトの中の中まで変更できなくなります。