【JS応用|初心者向け】JavaScriptで「意図しない変更」を防ぐ!Object.freezeの賢い使い方

導入:なぜObject.freezeが重要なのか

JavaScriptで開発をしていると、「一度決めた設定値や定数を、プログラムのどこかで間違えて書き換えてしまった」というバグに遭遇することがあります。特にチーム開発では、他の人が書いたコードでデータが予期せず書き換わってしまうリスクがあります。そんな時、オブジェクトを「読み取り専用」にして、変更を一切受け付けないようにするのが Object.freeze です。このメソッドを使えば、データの安全性を高め、バグを未然に防ぐことができます。

基礎知識:イミュータブル(不変)とは?

プログラミングの世界には「イミュータブル(Immutable)」という考え方があります。これは「一度作成したデータは後から変更しない」というルールです。JavaScriptのオブジェクトは通常、後からプロパティの追加・削除・変更が自由に行えます。しかし、設定データやAPIのレスポンスなど「絶対に変わってほしくないデータ」には、この自由さが逆に仇となることがあります。Object.freeze は、オブジェクトを「凍結」させることで、このイミュータブルな状態を強制的に作り出すための機能です。

実装:Object.freezeの基本的な使い方

使い方は非常にシンプルです。凍結したいオブジェクトを Object.freeze() の引数に渡すだけです。凍結されたオブジェクトに対してプロパティの変更を試みても、エラーにはならず単に無視されるか(通常モード)、エラーが発生します(厳格モード)。

サンプルプログラム:安全な設定オブジェクトの作成

以下のコードをコピーして、ブラウザのコンソールやNode.jsで試してみてください。

// 1. 設定オブジェクトを作成
const config = {
  theme: 'dark',
  apiEndpoint: 'https://api.example.com'
};

// 2. オブジェクトを凍結する
Object.freeze(config);

// 3. 変更を試みる
config.theme = 'light'; // 変更しようとするが、無視される
config.newKey = 'test'; // 新しいプロパティの追加も無視される

// 4. 結果を確認
console.log(config.theme);      // 結果: 'dark' (変更されていない)
console.log(config.newKey);     // 結果: undefined (追加されていない)

// 5. 凍結されているか確認する方法
console.log(Object.isFrozen(config)); // 結果: true

応用・注意点:ここだけは気をつけて!

現場で活用する上で、必ず覚えておいてほしい注意点が2つあります。

1. 浅い凍結(Shallow Freeze)であること
Object.freeze は「一番外側の階層」しか凍結しません。オブジェクトの中に別のオブジェクトが含まれている場合、その内側のオブジェクトまでは凍結されません。深い階層まで完全に保護したい場合は、再帰的に処理を行う「ディープフリーズ」という手法が必要になります。

2. 厳格モード(use strict)での使用を推奨
通常のモードでは、書き換えに失敗してもエラーが出ず、プログラムが静かにスルーされます。これでは「なぜ反映されないのか?」とデバッグに時間を取られる原因になります。コードの先頭に ‘use strict’; を記述して厳格モードにすることで、変更しようとした際にエラーを発生させ、開発中のミスにすぐ気づけるようにしましょう。

Object.freeze を使いこなして、より堅牢で信頼性の高いJavaScriptコードを書いていきましょう!

タイトルとURLをコピーしました