MENU
  1. ホーム
  2. JavaScript
  3. JavaScriptのオブジェクト凍結と防止: freeze, seal, preventExtensionsの徹底解説

JavaScriptのオブジェクト凍結と防止: freeze, seal, preventExtensionsの徹底解説

JavaScript

JavaScriptは非常に柔軟な言語であり、そのオブジェクトも動的にプロパティを追加、変更、削除することができます。しかし、場合によってはオブジェクトの状態を固定し、予期しない変更を防ぎたいこともあります。このような状況で役立つのが、Object.freeze(), Object.seal(), Object.preventExtensions()という3つのメソッドです。

Object.freeze()は、オブジェクトのプロパティを凍結し、プロパティの追加、削除、変更をすべて禁止します。一方、Object.seal()はプロパティの追加と削除を禁止しますが、既存のプロパティの変更は許可されます。Object.preventExtensions()はプロパティの追加のみを禁止し、既存のプロパティの削除や変更は許可されます。

本記事では、これら3つのメソッドの基本的な使い方とその違いについて詳しく解説し、実際の使用例や応用方法、さらにはパフォーマンスへの影響などについても触れていきます。これにより、JavaScriptのオブジェクト管理に関する深い理解を得ることができるでしょう。

目次
  1. オブジェクトの凍結 (freeze)
    1. 基本的な使い方
    2. 凍結されたオブジェクトの確認方法
    3. 凍結の影響
  2. オブジェクトの固定 (seal)
    1. 基本的な使い方
    2. 固定されたオブジェクトの確認方法
    3. 固定の影響
  3. プロパティの追加禁止 (preventExtensions)
    1. 基本的な使い方
    2. 拡張禁止のオブジェクトの確認方法
    3. 拡張禁止の影響
  4. 各メソッドの比較
    1. 機能の違い
    2. 具体的な例
    3. 適切なメソッドの選択
  5. 実際の使用例
    1. Object.freeze()の使用例
    2. Object.seal()の使用例
    3. Object.preventExtensions()の使用例
    4. 実践的なシナリオ
  6. パフォーマンスへの影響
    1. パフォーマンスに与える影響
    2. 実際のパフォーマンス評価
    3. パフォーマンスの最適化
  7. 応用例: 不変オブジェクトの作成
    1. 単純な不変オブジェクトの作成
    2. ネストされた不変オブジェクトの作成
    3. 不変オブジェクトの利点
    4. 不変オブジェクトの使用例: Redux
  8. トラブルシューティング
    1. プロパティが変更できない
    2. エラーが発生しない
    3. 既存のプロパティの削除や再定義ができない
    4. ネストされたオブジェクトの扱い
    5. パフォーマンスの問題
  9. 演習問題
    1. 演習問題1: オブジェクトの凍結
    2. 演習問題2: オブジェクトの固定
    3. 演習問題3: オブジェクトの拡張禁止
    4. 演習問題4: 再帰的なオブジェクトの凍結
    5. 演習問題5: 厳格モードとエラーハンドリング
  10. 参考資料
    1. 公式ドキュメント
    2. チュートリアルと記事
    3. オンライン講座
    4. 書籍
  11. まとめ

オブジェクトの凍結 (freeze)

Object.freeze()メソッドは、JavaScriptオブジェクトのプロパティを完全に凍結するための機能です。これを使用することで、オブジェクトに対するあらゆる変更が禁止されます。具体的には、プロパティの追加、削除、値の変更、属性の再定義ができなくなります。

基本的な使い方

以下の例を見てみましょう。

let obj = {
    name: "Alice",
    age: 30
};

Object.freeze(obj);

obj.age = 25; // 変更は無視される
obj.gender = "female"; // プロパティの追加は無視される
delete obj.name; // プロパティの削除も無視される

console.log(obj); // { name: "Alice", age: 30 }

このように、Object.freeze()を適用すると、オブジェクトの状態が完全に固定されます。

凍結されたオブジェクトの確認方法

オブジェクトが凍結されているかどうかは、Object.isFrozen()メソッドで確認できます。

console.log(Object.isFrozen(obj)); // true

凍結の影響

Object.freeze()はオブジェクトのプロパティの値だけでなく、プロパティの属性（例えば、書き込み可能かどうか）も固定します。そのため、凍結されたオブジェクトのプロパティは読み取り専用になります。

注意点

配列にObject.freeze()を適用すると、配列の要素の追加、削除、変更も禁止されます。

let arr = [1, 2, 3];
Object.freeze(arr);
arr[0] = 10; // 変更は無視される
arr.push(4); // エラーは出ないが、無視される

console.log(arr); // [1, 2, 3]

Object.freeze()を用いることで、オブジェクトの不変性を保つことができ、予期しない変更を防ぐことができます。これは、特に大規模なプロジェクトや、複数の開発者が関わるプロジェクトにおいて、バグを防ぐために非常に有効です。

オブジェクトの固定 (seal)

Object.seal()メソッドは、JavaScriptオブジェクトを固定し、プロパティの追加と削除を禁止します。ただし、既存のプロパティの値は変更可能です。このメソッドを使用することで、オブジェクトの構造を固定しつつ、値の更新を許可することができます。

基本的な使い方

以下の例を見てみましょう。

let obj = {
    name: "Bob",
    age: 25
};

Object.seal(obj);

obj.age = 26; // 変更は許可される
obj.gender = "male"; // プロパティの追加は無視される
delete obj.name; // プロパティの削除は無視される

console.log(obj); // { name: "Bob", age: 26 }

このように、Object.seal()を適用すると、オブジェクトのプロパティの追加や削除はできなくなりますが、既存のプロパティの値を変更することは可能です。

固定されたオブジェクトの確認方法

オブジェクトが固定されているかどうかは、Object.isSealed()メソッドで確認できます。

console.log(Object.isSealed(obj)); // true

固定の影響

Object.seal()は、プロパティの属性（例えば、構成可能かどうか）も変更します。固定されたオブジェクトのプロパティは、再度構成可能にはできません。

注意点

Object.seal()は、プロパティの追加と削除を禁止するだけで、プロパティの値の変更は許可されます。そのため、オブジェクトの値を固定したい場合には、Object.freeze()を使用する必要があります。

let car = {
    make: "Toyota",
    model: "Corolla"
};

Object.seal(car);
car.model = "Camry"; // 変更は許可される
delete car.make; // プロパティの削除は無視される
car.year = 2020; // プロパティの追加は無視される

console.log(car); // { make: "Toyota", model: "Camry" }

Object.seal()を用いることで、オブジェクトの構造を固定しつつ、必要に応じてプロパティの値を更新することができます。これは、オブジェクトの整合性を保ちながら柔軟に変更を加えたい場合に有効です。

プロパティの追加禁止 (preventExtensions)

Object.preventExtensions()メソッドは、JavaScriptオブジェクトに対して新しいプロパティの追加を禁止します。このメソッドを使用すると、既存のプロパティの変更や削除は可能ですが、新しいプロパティを追加することはできなくなります。

基本的な使い方

以下の例を見てみましょう。

let obj = {
    name: "Charlie",
    age: 28
};

Object.preventExtensions(obj);

obj.age = 29; // 変更は許可される
delete obj.name; // 削除も許可される
obj.gender = "male"; // プロパティの追加は無視される

console.log(obj); // { name: "Charlie", age: 29 }

このように、Object.preventExtensions()を適用すると、オブジェクトに新しいプロパティを追加することができなくなりますが、既存のプロパティの変更や削除は引き続き可能です。

拡張禁止のオブジェクトの確認方法

オブジェクトが拡張禁止になっているかどうかは、Object.isExtensible()メソッドで確認できます。

console.log(Object.isExtensible(obj)); // false

拡張禁止の影響

Object.preventExtensions()は、プロパティの追加を禁止するだけで、既存のプロパティの変更や削除には影響を与えません。これは、オブジェクトの形を固定しつつ、柔軟に変更を加える必要がある場合に有効です。

注意点

Object.preventExtensions()を適用したオブジェクトには、新しいプロパティを追加できなくなりますが、既存のプロパティは変更可能です。このため、オブジェクトのプロパティ構成を固定しつつ、値の更新や削除を行いたい場合に適しています。

let book = {
    title: "JavaScript Basics",
    pages: 350
};

Object.preventExtensions(book);
book.pages = 400; // 変更は許可される
delete book.title; // 削除も許可される
book.author = "John Doe"; // プロパティの追加は無視される

console.log(book); // { title: "JavaScript Basics", pages: 400 }

Object.preventExtensions()を用いることで、オブジェクトの拡張を防ぎ、予期しないプロパティの追加を避けることができます。これにより、オブジェクトの形を保ちながら、必要に応じてプロパティの値を調整することができます。

各メソッドの比較

Object.freeze(), Object.seal(), Object.preventExtensions()の3つのメソッドは、JavaScriptオブジェクトに対する異なるレベルの制約を提供します。それぞれのメソッドの特徴と違いについて、以下で詳しく比較してみましょう。

機能の違い

以下の表は、各メソッドがオブジェクトに対してどのような制約を課すかをまとめたものです。

メソッドプロパティの追加プロパティの削除プロパティの変更プロパティ属性の再定義
Object.freeze()不可不可不可不可
Object.seal()不可不可可不可
Object.preventExtensions()不可可可可

具体的な例

これらのメソッドの違いを、具体的なコード例を使って確認してみましょう。

`Object.freeze()`の例

let frozenObj = { name: "Frozen", value: 10 };
Object.freeze(frozenObj);

frozenObj.value = 20; // 無視される
delete frozenObj.name; // 無視される
frozenObj.newProp = "New"; // 無視される

console.log(frozenObj); // { name: "Frozen", value: 10 }

`Object.seal()`の例

let sealedObj = { name: "Sealed", value: 10 };
Object.seal(sealedObj);

sealedObj.value = 20; // 許可される
delete sealedObj.name; // 無視される
sealedObj.newProp = "New"; // 無視される

console.log(sealedObj); // { name: "Sealed", value: 20 }

`Object.preventExtensions()`の例

let nonExtensibleObj = { name: "Non-Extensible", value: 10 };
Object.preventExtensions(nonExtensibleObj);

nonExtensibleObj.value = 20; // 許可される
delete nonExtensibleObj.name; // 許可される
nonExtensibleObj.newProp = "New"; // 無視される

console.log(nonExtensibleObj); // { value: 20 }

適切なメソッドの選択

これらのメソッドのどれを使用するかは、特定の状況や要件によります。

  • オブジェクトを完全に不変にしたい場合：Object.freeze()を使用します。これは、オブジェクトのプロパティを変更したくない場合に最適です。
  • オブジェクトの構造を固定しつつ、プロパティの値を変更したい場合：Object.seal()が適しています。プロパティの追加と削除を防ぎますが、既存のプロパティの値は変更可能です。
  • プロパティの追加を防ぎたいが、既存のプロパティの削除や変更を許可したい場合：Object.preventExtensions()を使用します。これは、オブジェクトの形を保ちたい場合に有効です。

これらのメソッドを理解し、適切に使用することで、JavaScriptオブジェクトの管理がより効果的に行えるようになります。

実際の使用例

Object.freeze(), Object.seal(), Object.preventExtensions()を使った具体的なコード例を通して、これらのメソッドの実践的な利用方法を説明します。

Object.freeze()の使用例

以下の例では、Object.freeze()を用いてオブジェクトを凍結し、プロパティの変更や追加を防ぎます。

const user = {
    name: "John",
    age: 25
};

Object.freeze(user);

try {
    user.age = 26; // 無視される
    user.gender = "male"; // 無視される
    delete user.name; // 無視される
} catch (e) {
    console.error(e);
}

console.log(user); // { name: "John", age: 25 }

このように、Object.freeze()を使用することで、オブジェクトの不変性を保証します。凍結されたオブジェクトは、予期しない変更から保護されます。

Object.seal()の使用例

次に、Object.seal()を使用してオブジェクトを固定し、プロパティの追加と削除を防ぎつつ、既存のプロパティの変更を許可する方法を示します。

const settings = {
    theme: "dark",
    notifications: true
};

Object.seal(settings);

settings.notifications = false; // 許可される
try {
    settings.language = "en"; // 無視される
    delete settings.theme; // 無視される
} catch (e) {
    console.error(e);
}

console.log(settings); // { theme: "dark", notifications: false }

この例では、Object.seal()を使用してオブジェクトのプロパティ構造を固定し、必要なプロパティの値を変更可能にしています。

Object.preventExtensions()の使用例

最後に、Object.preventExtensions()を用いてプロパティの追加を禁止し、既存のプロパティの変更や削除を許可する方法を示します。

const book = {
    title: "JavaScript Guide",
    pages: 300
};

Object.preventExtensions(book);

book.pages = 350; // 許可される
try {
    book.author = "Jane Doe"; // 無視される
    delete book.title; // 許可される
} catch (e) {
    console.error(e);
}

console.log(book); // { pages: 350 }

この例では、Object.preventExtensions()を使用してオブジェクトのプロパティ追加を禁止し、既存のプロパティの値変更や削除を可能にしています。

実践的なシナリオ

これらのメソッドを使用するシナリオを考えてみましょう。例えば、設定オブジェクトを作成する場合、Object.freeze()を使用して設定を完全に不変にすることで、アプリケーションの他の部分がこれらの設定を変更するのを防ぐことができます。また、APIレスポンスオブジェクトをObject.seal()で固定し、プロパティの追加や削除を防ぎつつ、プロパティの値を更新することもできます。

さらに、動的に変更されるオブジェクトに対して、プロパティの追加を禁止したい場合には、Object.preventExtensions()を使用することが適しています。これにより、オブジェクトの構造を維持しつつ、柔軟にプロパティの値を変更できます。

これらの実践的な使用例を通じて、Object.freeze(), Object.seal(), Object.preventExtensions()の使い方とその効果を理解し、適切に活用することができるでしょう。

パフォーマンスへの影響

オブジェクトの凍結や固定を行うと、これがアプリケーションのパフォーマンスにどのような影響を与えるかを理解しておくことが重要です。Object.freeze(), Object.seal(), Object.preventExtensions()の使用は、それぞれの用途に応じたパフォーマンスの考慮が必要です。

パフォーマンスに与える影響

これらのメソッドは、オブジェクトのプロパティや構造を変更する機能を制限するため、オーバーヘッドが発生することがあります。しかし、その影響は一般的に小さく、次のような状況でより明確になります。

  • Object.freeze():
  • このメソッドは、オブジェクト全体を再帰的に凍結するため、深いネスト構造を持つオブジェクトに対しては、パフォーマンスに影響を与える可能性があります。
  • ただし、一度凍結されたオブジェクトは、以降の変更操作が無視されるため、ランタイムでの性能は安定します。
  • Object.seal():
  • Object.seal()はプロパティの追加と削除を禁止しますが、プロパティの値の変更は許可されるため、パフォーマンスへの影響は比較的少ないです。
  • オブジェクトの構造が固定されることで、JavaScriptエンジンの最適化が容易になる場合もあります。
  • Object.preventExtensions():
  • このメソッドはプロパティの追加を禁止するだけであり、既存のプロパティの変更や削除は許可されるため、パフォーマンスへの影響は最も少ないです。
  • 特に、動的に変化するオブジェクトの構造を維持したい場合に有効です。

実際のパフォーマンス評価

以下の例では、各メソッドの適用がパフォーマンスにどのように影響するかを簡単に評価します。

function measurePerformance() {
    const obj = {};
    for (let i = 0; i < 10000; i++) {
        obj[`prop${i}`] = i;
    }

    console.time('freeze');
    Object.freeze(obj);
    console.timeEnd('freeze');

    const sealedObj = {};
    for (let i = 0; i < 10000; i++) {
        sealedObj[`prop${i}`] = i;
    }

    console.time('seal');
    Object.seal(sealedObj);
    console.timeEnd('seal');

    const nonExtensibleObj = {};
    for (let i = 0; i < 10000; i++) {
        nonExtensibleObj[`prop${i}`] = i;
    }

    console.time('preventExtensions');
    Object.preventExtensions(nonExtensibleObj);
    console.timeEnd('preventExtensions');
}

measurePerformance();

このコードでは、10000個のプロパティを持つオブジェクトに対して各メソッドを適用し、処理時間を計測しています。結果を確認することで、パフォーマンスの違いを把握することができます。

パフォーマンスの最適化

オブジェクトの凍結や固定が必要な場合でも、パフォーマンスを最適化するためのいくつかの方法があります。

  1. 必要最低限の使用:
  • Object.freeze(), Object.seal(), Object.preventExtensions()の使用は、本当に必要な場合に限定します。特に大規模なデータ構造に対しては注意が必要です。
  1. 浅いオブジェクトの利用:
  • 深くネストされたオブジェクトを避け、可能な限り浅いオブジェクト構造を使用することで、凍結や固定のオーバーヘッドを減らすことができます。
  1. プロファイリング:
  • 実際のアプリケーションでパフォーマンスをプロファイリングし、どの部分がボトルネックになっているかを特定します。これにより、最適化のための具体的なアクションを取ることができます。

これらの方法を活用することで、オブジェクトの凍結や固定によるパフォーマンスへの影響を最小限に抑えつつ、必要なセキュリティと整合性を確保できます。

応用例: 不変オブジェクトの作成

不変オブジェクト（immutable object）は、一度作成された後にその状態が変更されないオブジェクトです。不変オブジェクトは、データの整合性を保つためや、予期しない副作用を防ぐために非常に有用です。JavaScriptでは、Object.freeze()を使用して不変オブジェクトを作成できますが、ネストされたオブジェクトに対しても完全に不変にするためには工夫が必要です。

単純な不変オブジェクトの作成

以下の例では、Object.freeze()を使用して単純な不変オブジェクトを作成します。

const user = {
    name: "Alice",
    age: 30
};

Object.freeze(user);

user.age = 31; // 無視される
user.gender = "female"; // 無視される
delete user.name; // 無視される

console.log(user); // { name: "Alice", age: 30 }

この例では、userオブジェクトは完全に不変となり、どのプロパティも変更できません。

ネストされた不変オブジェクトの作成

ネストされたオブジェクトを不変にするためには、再帰的にObject.freeze()を適用する必要があります。以下の関数は、オブジェクト全体を再帰的に凍結します。

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

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

    return obj;
}

const person = {
    name: "Bob",
    address: {
        city: "New York",
        zipcode: "10001"
    }
};

deepFreeze(person);

person.address.city = "Los Angeles"; // 無視される
person.address.country = "USA"; // 無視される
delete person.address.zipcode; // 無視される

console.log(person); // { name: "Bob", address: { city: "New York", zipcode: "10001" } }

このdeepFreeze関数を使用することで、ネストされたオブジェクト全体が不変になります。

不変オブジェクトの利点

不変オブジェクトの使用には多くの利点があります。

  1. データの整合性:
    不変オブジェクトは、一度作成されるとその状態が変わらないため、データの整合性を保つことができます。これにより、予期しないバグや副作用を防ぐことができます。
  2. シンプルなデバッグ:
    状態が変更されないため、デバッグが容易になります。特定の時点でのオブジェクトの状態を追跡する必要がなくなります。
  3. 安全な並行処理:
    不変オブジェクトはスレッドセーフであり、並行処理において安全に使用できます。複数のスレッドが同時に不変オブジェクトにアクセスしても問題ありません。

不変オブジェクトの使用例: Redux

JavaScriptのアプリケーションフレームワークであるReduxでは、不変データ構造が重要な役割を果たします。Reduxの状態（state）は不変であり、新しい状態を生成するために古い状態を変更するのではなく、コピーして新しいオブジェクトを作成します。

const initialState = {
    counter: 0
};

function reducer(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { ...state, counter: state.counter + 1 };
        case 'DECREMENT':
            return { ...state, counter: state.counter - 1 };
        default:
            return state;
    }
}

この例では、reducer関数が新しい状態オブジェクトを返すため、状態は常に不変で保たれます。

不変オブジェクトの作成と使用は、コードの信頼性とメンテナンス性を向上させるための重要な技術です。Object.freeze()や再帰的な凍結を活用して、JavaScriptのアプリケーションにおけるデータの整合性を確保しましょう。

トラブルシューティング

Object.freeze(), Object.seal(), Object.preventExtensions()を使用する際に発生する可能性のある問題とその対処方法について解説します。これらのメソッドは強力ですが、適切に使用しないと意図しない動作を引き起こすことがあります。

プロパティが変更できない

Object.freeze()やObject.seal()を適用したオブジェクトのプロパティを変更しようとしても、変更が無視されます。これはメソッドの正しい動作ですが、予期しない場合は問題となります。

const obj = {
    name: "Alice",
    age: 30
};

Object.freeze(obj);

obj.age = 31; // 無視される

console.log(obj.age); // 30

対処方法

  • 事前の確認: Object.freeze()やObject.seal()を適用する前に、本当にそのオブジェクトを変更不可にする必要があるか確認します。
  • 状態管理: 状態管理ライブラリ（例えば、Redux）を使用して、変更を管理する方法を検討します。

エラーが発生しない

プロパティの追加や削除が無視されても、エラーが発生しないため、問題が見過ごされることがあります。

const obj = {
    name: "Bob"
};

Object.preventExtensions(obj);

obj.age = 25; // 無視されるが、エラーは発生しない

console.log(obj); // { name: "Bob" }

対処方法

  • 厳格モードの使用: use strictを使用することで、違反がエラーとして検出されるようになります。
"use strict";

const obj = {
    name: "Bob"
};

Object.preventExtensions(obj);

try {
    obj.age = 25; // TypeError: Cannot add property age, object is not extensible
} catch (e) {
    console.error(e);
}

既存のプロパティの削除や再定義ができない

Object.freeze()やObject.seal()を適用すると、既存のプロパティの削除や再定義ができなくなります。

const obj = {
    name: "Charlie"
};

Object.seal(obj);

delete obj.name; // 無視される

console.log(obj); // { name: "Charlie" }

対処方法

  • オブジェクトの設計: プロパティの追加や削除が必要な場合は、凍結や固定を適用しないように設計します。
  • リファクタリング: プロパティの再定義が必要な場合、オブジェクトの設計を見直し、凍結や固定の適用を再考します。

ネストされたオブジェクトの扱い

Object.freeze()やObject.seal()はデフォルトでは浅い操作しか行いません。ネストされたオブジェクトは凍結や固定の対象外です。

const person = {
    name: "Dana",
    address: {
        city: "New York",
        zipcode: "10001"
    }
};

Object.freeze(person);

person.address.city = "Los Angeles"; // 許可される

console.log(person.address.city); // "Los Angeles"

対処方法

  • 再帰的な凍結: 再帰的に凍結や固定を行う関数を使用します。
function deepFreeze(obj) {
    Object.freeze(obj);

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

    return obj;
}

deepFreeze(person);

person.address.city = "Los Angeles"; // 無視される

console.log(person.address.city); // "New York"

パフォーマンスの問題

大規模なオブジェクトや深いネスト構造を持つオブジェクトに対してこれらのメソッドを適用すると、パフォーマンスに影響を与える可能性があります。

対処方法

  • 必要に応じて適用: 本当に必要な部分だけに適用し、パフォーマンスへの影響を最小限に抑えます。
  • パフォーマンスのプロファイリング: パフォーマンスの問題が発生した場合、プロファイリングツールを使用してボトルネックを特定し、適切な対策を講じます。

これらの対策を講じることで、Object.freeze(), Object.seal(), Object.preventExtensions()を適切に使用し、予期しない問題を回避することができます。

演習問題

これまで学んだ内容を確認するために、いくつかの演習問題を通じて実際に手を動かしてみましょう。各演習問題には、解答例も付けていますので、参考にしてください。

演習問題1: オブジェクトの凍結

以下のオブジェクトをObject.freeze()を使用して凍結し、プロパティの変更や追加ができないことを確認してください。

const car = {
    make: "Toyota",
    model: "Corolla",
    year: 2020
};

// ここにコードを追加

解答例

const car = {
    make: "Toyota",
    model: "Corolla",
    year: 2020
};

Object.freeze(car);

car.year = 2021; // 無視される
car.color = "red"; // 無視される
delete car.make; // 無視される

console.log(car); // { make: "Toyota", model: "Corolla", year: 2020 }

演習問題2: オブジェクトの固定

次のオブジェクトに対してObject.seal()を適用し、プロパティの追加と削除ができないことを確認してください。ただし、既存のプロパティの変更は許可されるようにします。

const user = {
    name: "Eve",
    age: 22
};

// ここにコードを追加

解答例

const user = {
    name: "Eve",
    age: 22
};

Object.seal(user);

user.age = 23; // 許可される
user.gender = "female"; // 無視される
delete user.name; // 無視される

console.log(user); // { name: "Eve", age: 23 }

演習問題3: オブジェクトの拡張禁止

以下のオブジェクトにObject.preventExtensions()を適用し、新しいプロパティの追加ができないことを確認してください。既存のプロパティの変更や削除は許可されるようにします。

const book = {
    title: "Learning JavaScript",
    pages: 500
};

// ここにコードを追加

解答例

const book = {
    title: "Learning JavaScript",
    pages: 500
};

Object.preventExtensions(book);

book.pages = 550; // 許可される
delete book.title; // 許可される
book.author = "John Doe"; // 無視される

console.log(book); // { pages: 550 }

演習問題4: 再帰的なオブジェクトの凍結

以下のネストされたオブジェクトに対して、再帰的にObject.freeze()を適用し、全てのネストされたプロパティが凍結されることを確認してください。

const person = {
    name: "Frank",
    address: {
        city: "Los Angeles",
        zipcode: "90001"
    }
};

// 再帰的なfreeze関数を定義して、personオブジェクトに適用

解答例

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

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

    return obj;
}

const person = {
    name: "Frank",
    address: {
        city: "Los Angeles",
        zipcode: "90001"
    }
};

deepFreeze(person);

person.name = "George"; // 無視される
person.address.city = "San Francisco"; // 無視される
person.address.country = "USA"; // 無視される

console.log(person); // { name: "Frank", address: { city: "Los Angeles", zipcode: "90001" } }

演習問題5: 厳格モードとエラーハンドリング

use strictを使ってオブジェクトにObject.preventExtensions()を適用し、プロパティの追加がエラーとして検出されることを確認してください。

"use strict";

const product = {
    name: "Laptop",
    price: 1000
};

// ここにコードを追加

解答例

"use strict";

const product = {
    name: "Laptop",
    price: 1000
};

Object.preventExtensions(product);

try {
    product.color = "black"; // TypeError: Cannot add property color, object is not extensible
} catch (e) {
    console.error(e);
}

console.log(product); // { name: "Laptop", price: 1000 }

これらの演習問題を通じて、Object.freeze(), Object.seal(), Object.preventExtensions()の使い方を実際に確認し、理解を深めてください。解答例を参考にしながら、自分でコードを書いて試してみることで、さらに知識を定着させることができます。

参考資料

ここでは、JavaScriptのオブジェクト操作に関する理解を深めるための参考資料やリンクを紹介します。これらの資料を活用して、さらに知識を広げてください。

公式ドキュメント

  1. MDN Web Docs
  1. ECMAScript® Language Specification

チュートリアルと記事

  1. JavaScript.info
  1. W3Schools
  1. GeeksforGeeks

オンライン講座

  1. Udemy
  1. Coursera

書籍

  1. JavaScript: The Good Parts
  • 著者: Douglas Crockford
  • JavaScriptの基本と良い部分に焦点を当てた必読書です。
  1. Eloquent JavaScript
  • 著者: Marijn Haverbeke
  • 初心者から上級者までのプログラマーに向けた包括的なガイドです。
  1. You Don’t Know JS (book series)
  • 著者: Kyle Simpson
  • JavaScriptの深い理解を目指す開発者に向けたシリーズです。

これらの参考資料を活用して、JavaScriptのオブジェクト操作に関する知識をさらに深めてください。特に、公式ドキュメントや信頼できるチュートリアルを読むことで、最新の情報を得ることができます。オンライン講座や書籍も非常に有用で、体系的に学びたい方におすすめです。

まとめ

本記事では、JavaScriptにおけるオブジェクトの凍結と防止の手法について詳しく解説しました。Object.freeze(), Object.seal(), Object.preventExtensions()の3つのメソッドを使用することで、オブジェクトの状態を制御し、予期しない変更から保護する方法を学びました。

  • Object.freeze() はオブジェクトのプロパティの追加、削除、変更を完全に禁止し、オブジェクトを不変にします。
  • Object.seal() はプロパティの追加と削除を禁止しますが、既存のプロパティの値の変更は許可されます。
  • Object.preventExtensions() は新しいプロパティの追加のみを禁止し、既存のプロパティの変更や削除は許可されます。

これらのメソッドを適切に使用することで、データの整合性を保ちながら、予期しない副作用を防ぎ、コードの信頼性を向上させることができます。また、ネストされたオブジェクトを完全に凍結するための再帰的な方法や、パフォーマンスへの影響についても触れました。

これらの手法を実際のプロジェクトで活用し、JavaScriptのオブジェクト操作におけるより堅牢で安定したコードを作成してください。

JavaScript
プログラミング オブジェクト JavaScript

コメント

コメントする

目次
  1. オブジェクトの凍結 (freeze)
    1. 基本的な使い方
    2. 凍結されたオブジェクトの確認方法
    3. 凍結の影響
  2. オブジェクトの固定 (seal)
    1. 基本的な使い方
    2. 固定されたオブジェクトの確認方法
    3. 固定の影響
  3. プロパティの追加禁止 (preventExtensions)
    1. 基本的な使い方
    2. 拡張禁止のオブジェクトの確認方法
    3. 拡張禁止の影響
  4. 各メソッドの比較
    1. 機能の違い
    2. 具体的な例
    3. 適切なメソッドの選択
  5. 実際の使用例
    1. Object.freeze()の使用例
    2. Object.seal()の使用例
    3. Object.preventExtensions()の使用例
    4. 実践的なシナリオ
  6. パフォーマンスへの影響
    1. パフォーマンスに与える影響
    2. 実際のパフォーマンス評価
    3. パフォーマンスの最適化
  7. 応用例: 不変オブジェクトの作成
    1. 単純な不変オブジェクトの作成
    2. ネストされた不変オブジェクトの作成
    3. 不変オブジェクトの利点
    4. 不変オブジェクトの使用例: Redux
  8. トラブルシューティング
    1. プロパティが変更できない
    2. エラーが発生しない
    3. 既存のプロパティの削除や再定義ができない
    4. ネストされたオブジェクトの扱い
    5. パフォーマンスの問題
  9. 演習問題
    1. 演習問題1: オブジェクトの凍結
    2. 演習問題2: オブジェクトの固定
    3. 演習問題3: オブジェクトの拡張禁止
    4. 演習問題4: 再帰的なオブジェクトの凍結
    5. 演習問題5: 厳格モードとエラーハンドリング
  10. 参考資料
    1. 公式ドキュメント
    2. チュートリアルと記事
    3. オンライン講座
    4. 書籍
  11. まとめ