0Pricing
JavaScript Academy · レッスン

安全なオブジェクトマージ、凍結と封印

予期しない動作のないようにオブジェクトをマージし、プロトタイプ汚染を避け、Object.freezeとObject.sealでデータを保護します。

「安全なオブジェクトマージ、凍結と封印」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

安全にマージする理由

目標: 安全にマージして状態を保護します。

  • スプレッドまたはObject.assignで浅くマージします
  • キーをフィルタリングしてプロトタイプ汚染を防ぎます
  • 安全な対象にはObject.create(null)を使います
  • オブジェクトを固定するにはfreezeとsealを使います
安全なオブジェクトマージ、凍結と封印 — イラスト1

浅いマージ(スプレッド)

スプレッド(または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);
安全なオブジェクトマージ、凍結と封印 — イラスト2

プロトタイプ汚染を防ぐ

キーが外部から渡される場合は、小さな許可リスト/拒否リストを作成し、対象には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);
安全なオブジェクトマージ、凍結と封印 — イラスト3

クローンして代入する

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);
安全なオブジェクトマージ、凍結と封印 — イラスト4

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);
安全なオブジェクトマージ、凍結と封印 — イラスト5

安全なマージの習慣

ヒント:

  • 新しいオブジェクトを優先します: {...a, ...b}またはObject.assign({}, a, b)。
  • 信頼できないキーにはObject.create(null)を使い、__proto__、prototype、constructorを除外します。
  • 設定はObject.freezeで保護し、モデルはObject.sealで変更を制限します。
安全なオブジェクトマージ、凍結と封印 — イラスト6

プロトタイプ汚染の基礎クイズ

クイックチェック: 信頼できないマージに最も安全な対象を確認します。

安全なオブジェクトマージ、凍結と封印 — イラスト7

まとめ

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

安全なオブジェクトマージ、凍結と封印 — イラスト8

よくある質問

「安全なオブジェクトマージ、凍結と封印」レッスンは無料ですか?

はい。「安全なオブジェクトマージ、凍結と封印」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと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フィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 入力検証とエスケープの基礎
  2. 安全なオブジェクトマージ、凍結と封印
  3. エラーバウンダリー(概念)をフレームワークなしで実装
← JavaScript Academyに戻る