Object.freeze と seal
オブジェクトの変更を防ぎます。
「Object.freeze と seal」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
オブジェクトを freeze する理由
不変性とは、作成後にデータを変更できないことです。意図しない変更を防ぎ、コードを理解しやすくし、さまざまなバグを防ぎます。
JavaScript には、オブジェクトを固定するための Object.freeze と Object.seal があります。
Object.freeze の基本
Object.freeze はオブジェクトを完全に読み取り専用にします。プロパティの追加、削除、変更はできません。戻り値は、freeze された同じオブジェクトです。
const user = Object.freeze({ name: 'Ada', age: 36 });
user.age = 99;
console.log(user.age);isFrozen で確認する
Object.isFrozen は、オブジェクトが freeze されているかどうかを示します。更新を試みる前に確認する場合に便利です。
const config = Object.freeze({ debug: false });
const settings = { theme: 'dark' };
console.log(Object.isFrozen(config));
console.log(Object.isFrozen(settings));暗黙的な失敗と strict モードでの失敗
非 strict モードのコードでは、freeze されたオブジェクトへの書き込みは暗黙的に失敗します。strict モードでは TypeError がスローされます。どちらの場合も値は変わりません。
'use strict';
const frozen = Object.freeze({ x: 1 });
try {
frozen.x = 2;
} catch (e) {
console.log(e.name);
}
console.log(frozen.x);freeze は新しいプロパティを阻止する
freeze すると、プロパティの追加もできなくなります。新しいキーは単に出現しません。
const point = Object.freeze({ x: 0 });
point.y = 5;
console.log(point.y);
console.log(Object.keys(point));freeze は削除を阻止する
freeze されたオブジェクトからプロパティを削除することもできません。プロパティはそのまま残ります。
const obj = Object.freeze({ keep: 'me' });
delete obj.keep;
console.log(obj.keep);Object.seal は異なる
Object.seal は freeze より制限が緩やかです。プロパティを追加または削除することはできませんが、既存の値は変更できます。
const sealed = Object.seal({ count: 1 });
sealed.count = 2;
sealed.extra = 3;
console.log(sealed.count);
console.log(sealed.extra);isSealed で確認する
Object.isSealed は、オブジェクトが seal されているかどうかを示します。freeze されたすべてのオブジェクトは seal もされていますが、その逆は成り立たない点に注意してください。
const sealed = Object.seal({ a: 1 });
const frozen = Object.freeze({ b: 2 });
console.log(Object.isSealed(sealed));
console.log(Object.isSealed(frozen));
console.log(Object.isFrozen(sealed));freeze と seal のまとめ
freeze: 追加、削除、変更ができません。seal: 追加と削除はできませんが、変更はできます。構造を固定しつつ値は変化させたい場合は seal を選択してください。
const f = Object.freeze({ v: 1 });
const s = Object.seal({ v: 1 });
f.v = 100;
s.v = 100;
console.log('frozen v:', f.v);
console.log('sealed v:', s.v);preventExtensions
最も制限の緩やかなロックは Object.preventExtensions です。プロパティは追加できませんが、既存のプロパティは変更も削除もできます。3つの中では最も弱い制限です。
const obj = Object.preventExtensions({ a: 1 });
obj.a = 2;
obj.b = 3;
console.log(obj.a);
console.log(obj.b);
console.log(Object.isExtensible(obj));重要な理由
設定値や定数を freeze すると、コードベース全体での意図しない編集を防げます。ただし、Object.freeze は浅い処理であるため、ネストされたオブジェクトは変更可能なままです。次にこの問題を解決します。
const SETTINGS = Object.freeze({ maxRetries: 3 });
function tryUpdate() {
SETTINGS.maxRetries = 10;
}
tryUpdate();
console.log(SETTINGS.maxRetries);クイックチェック
Object.freeze と Object.seal の違いは何ですか。
まとめ: freeze と seal
オブジェクトを固定する方法を学びました。
Object.freeze: 追加、削除、変更ができません。isFrozenで確認します。Object.seal: 追加と削除はできませんが、変更はできます。preventExtensions: 追加だけを阻止します。- 3つとも浅い処理であるため、次は deepFreeze について学びます。
よくある質問
「Object.freeze と seal」レッスンは無料ですか？
はい。「Object.freeze と seal」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「Object.freeze と seal」で何を学びますか？
オブジェクトの変更を防ぎます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Object.freeze と seal」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Object.freeze と seal
- 浅い凍結と深い凍結
- イミュータブルな更新パターン
- 深いコピーのための structuredClone