JavaScriptのオブジェクトのイミュータブル化（Object.freeze）とは？初心者でもわかるやさしい解説

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

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

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

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

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

2. 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. なぜオブジェクトをイミュータブルにするの？

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

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

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

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

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

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. 深い凍結（ディープフリーズ）を自分で作る方法

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); // 大阪

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

6. まとめ：イミュータブル化のポイント

6. まとめ：イミュータブル化のポイント

• Object.freeze()でオブジェクトを変更不可にできる。
• 変更しようとしても無視され、バグ防止に役立つ。
• 浅い凍結なのでネストされたオブジェクトは注意が必要。
• 深い凍結は自作の関数などで対応できる。

JavaScriptのイミュータブル化は、安全でバグを減らすためにとても役立つ基本テクニックです。ぜひ覚えて使ってみてくださいね。

まとめ

まとめ

今回の記事では、JavaScriptにおける「イミュータブル（不変性）」の重要性と、それを実現するための強力なメソッドである Object.freeze() について詳しく解説してきました。プログラミング、特に大規模なアプリケーション開発やフロントエンド開発の現場において、データの不変性を保つという考え方は、予期せぬバグを未然に防ぐための非常に重要な戦略となります。

オブジェクトを凍結するメリットの再確認

JavaScriptのオブジェクトは、デフォルトでは「ミュータブル（可変）」です。つまり、どこからでも自由にプロパティを書き換えたり削除したりできてしまいます。これは一見便利ですが、複数の関数やコンポーネントで同じオブジェクトを共有している場合、「いつの間にか値が変わっていて計算が合わない」といったトラブルの原因になります。

Object.freeze() を活用することで、以下のようなメリットが得られます。

• ・定数や設定情報の保護：アプリケーション全体で共有する設定値が書き換わるのを防ぐ。
• ・データの信頼性向上：その変数が「作成された時のまま」であることを保証できる。
• ・チーム開発の円滑化：仕様として「変更不可」を明示できるため、他の開発者が誤って操作することを防ぐ。

実践的なサンプルコードで復習

ここで、実際にどのようにコードを記述し、どのような挙動になるのか、改めてTypeScriptの型定義も含めた形で確認してみましょう。型安全性を高めることで、エディタ上でのミスもより減らすことができます。

interface SystemConfig {
  readonly apiUrl: string;
  readonly timeout: number;
  readonly retryCount: number;
}

const config: SystemConfig = {
  apiUrl: "https://api.example.com/v1",
  timeout: 5000,
  retryCount: 3
};

// オブジェクトを完全に凍結
Object.freeze(config);

// 以下のような操作は、実行時に無視されるか、strictモードではエラーになります。
// config.timeout = 10000; 
// config.newParam = "test";

console.log("現在の設定値:", config);

実行結果は以下の通りです。値の書き換えを試みても、初期化時の値が保持されていることがわかります。

現在の設定値: { apiUrl: 'https://api.example.com/v1', timeout: 5000, retryCount: 3 }

深い階層のオブジェクトに対するアプローチ

記事の本編でも触れた通り、Object.freeze() は「浅い凍結」であるという点には常に注意が必要です。モダンな開発において、オブジェクトの中にさらにオブジェクトや配列が含まれることは珍しくありません。そのような場合は、再帰的に処理を行う deepFreeze 関数を自作するか、Lodashなどのライブラリを利用することを検討してください。

また、JavaScriptには Object.freeze() の他にも、プロパティの追加・削除のみを禁止する Object.seal() や、追加のみを禁止する Object.preventExtensions() といったメソッドも存在します。用途に合わせて使い分けるのが「脱・初心者」への近道です。

データの状態管理（State Management）が重要視される現代のWeb開発において、イミュータブルな設計思想を身につけることは、ReactやVue.jsといったフレームワークをマスターする上でも欠かせないステップとなります。まずは身近な定数定義から、Object.freeze() を取り入れてみてください。