安全なオブジェクトマージ、凍結と封印
予期しない動作のないようにオブジェクトをマージし、プロトタイプ汚染を避け、Object.freezeとObject.sealでデータを保護します。
「安全なオブジェクトマージ、凍結と封印」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。
安全にマージする理由
目標: 安全にマージして状態を保護します。
- スプレッドまたはObject.assignで浅くマージします
- キーをフィルタリングしてプロトタイプ汚染を防ぎます
- 安全な対象にはObject.create(null)を使います
- オブジェクトを固定するにはfreezeとsealを使います

浅いマージ(スプレッド)
スプレッド(またはObject.assign({}, a, b))を使って新しいオブジェクトを作成し、入力を変更しないようにします。
// Shallow merge with spread keeps sources unchanged
const a = { x: 1, y: 2 };
const b = { y: 9, z: 3 };
// Later keys win on conflicts
const merged1 = { ...a, ...b };
console.log("a:", a);
console.log("b:", b);
console.log("merged1:", merged1);

プロトタイプ汚染を防ぐ
キーが外部から渡される場合は、小さな許可リスト/拒否リストを作成し、対象にはObject.create(null)を使います。
// Avoid prototype pollution: use a null-prototype target and skip special keys
function safeMergeUntrusted(pairs) {
// target has no prototype
const out = Object.create(null);
// keys to skip
const BLOCK = new Set(["__proto__", "prototype", "constructor"]);
for (const [k, v] of pairs) {
if (typeof k !== "string") continue;
if (BLOCK.has(k)) continue;
out[k] = v;
}
return out;
}
const inputPairs = [
["name", "Ayla"],
["__proto__", { hacked: true }],
["role", "user"]
];
const safe = safeMergeUntrusted(inputPairs);
console.log("safe.name:", safe.name);
console.log("safe.role:", safe.role);
console.log("safe.__proto__ is undefined?", safe.__proto__ === undefined);

クローンして代入する
Object.assign({}, ...)は、初心者にも読みやすい安全なパターンです。
// Object.assign can also create a new object
const base = { a: 1, b: 2 };
const patch = { b: 5 };
// New object as first arg → sources untouched
const merged2 = Object.assign({}, base, patch);
console.log("base:", base);
console.log("patch:", patch);
console.log("merged2:", merged2);

freezeとsealの違い
freezeはすべての変更を禁止し、sealはプロパティの追加と削除を禁止しますが、既存のプロパティの更新は許可します。
// Freeze: no add/remove/change
const frozen = Object.freeze({ id: 1, tag: "locked" });
// Seal: no add/remove, but you may change existing values
const sealed = Object.seal({ id: 2, tag: "open" });
// Attempts (silently fail in non-strict mode)
frozen.tag = "new";
sealed.tag = "updated";
sealed.newKey = 123;
console.log("frozen:", frozen);
console.log("sealed:", sealed);

安全なマージの習慣
ヒント:
- 新しいオブジェクトを優先します: {...a, ...b}またはObject.assign({}, a, b)。
- 信頼できないキーにはObject.create(null)を使い、__proto__、prototype、constructorを除外します。
- 設定はObject.freezeで保護し、モデルはObject.sealで変更を制限します。

プロトタイプ汚染の基礎クイズ
クイックチェック: 信頼できないマージに最も安全な対象を確認します。

まとめ
まとめ: 新しいオブジェクトを作成してマージし、信頼できないキーをフィルタリングして、重要なデータ構造をfreeze/sealで保護します。

よくある質問
「安全なオブジェクトマージ、凍結と封印」レッスンは無料ですか?
はい。「安全なオブジェクトマージ、凍結と封印」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。
「安全なオブジェクトマージ、凍結と封印」で何を学びますか?
予期しない動作のないようにオブジェクトをマージし、プロトタイプ汚染を避け、Object.freezeとObject.sealでデータを保護します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「安全なオブジェクトマージ、凍結と封印」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか?
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 入力検証とエスケープの基礎
- 安全なオブジェクトマージ、凍結と封印
- エラーバウンダリー(概念)をフレームワークなしで実装