【JS応用｜初心者向け】JavaScriptの隠れた機能「Symbol.unscopables」でwith文のトラブルを防ごう

2026.07.25

1. 導入：なぜSymbol.unscopablesが必要なのか？

JavaScriptには、特定のオブジェクトのプロパティをスコープ内に展開できる「with文」という機能があります。一見便利そうに見えますが、意図しないプロパティが変数として扱われてしまい、バグの原因になることが多々あります。Symbol.unscopablesは、特定のプロパティをwith文の対象から「除外」するために使われます。モダンな開発ではwith文自体をあまり使いませんが、ライブラリの互換性維持や、安全なコードを書くためのメタプログラミングの知識として非常に重要です。

2. 基礎知識：with文とSymbol.unscopables

with文は、指定したオブジェクトをスコープの最上位に置くことで、プロパティ名だけで変数にアクセスできるようにする構文です。しかし、これが原因で「どの変数がどこから来ているのか」が不明確になり、予期せぬ名前の衝突が発生します。
Symbol.unscopablesは、オブジェクトが持つ特別なシンボルプロパティです。これにプロパティ名を指定しておくと、with文でそのオブジェクトがスコープに入った際、指定したプロパティは「変数として展開されない」ようになります。

3. 実装と解決策

Symbol.unscopablesを設定するには、オブジェクトに対して「[Symbol.unscopables]」というキーでプロパティを持ち、その値に「除外したいプロパティ名をtrueにするオブジェクト」を代入します。これにより、with文のスコープ内であっても、そのプロパティは無視されます。

4. サンプルプログラム

以下のコードをコピーして、ブラウザのコンソールなどで実行してみてください。

// 対象となるオブジェクト
const myData = {
  name: "フロントエンドエンジニア",
  hiddenValue: "秘密の情報"
};

// Symbol.unscopablesを設定してhiddenValueを隠す
myData[Symbol.unscopables] = {
  hiddenValue: true // ここをtrueにするとwith文から除外される
};

// with文で検証
with (myData) {
  console.log("名前:", name); // これは問題なく表示される
  
  try {
    // hiddenValueは除外されているので、外側のスコープが参照されるかエラーになる
    console.log("値:", hiddenValue);
  } catch (e) {
    console.log("hiddenValueはスコープから隠されています！");
  }
}

5. 応用・注意点：現場での考え方

現代のJavaScript開発（ES6以降）において、with文は「厳格モード（use strict）」では使用禁止されています。そのため、実務でSymbol.unscopablesを直接書く機会は極めて稀です。

しかし、この技術を知っておくことは以下の点で役立ちます。
・ライブラリのソースコード解読: 古いライブラリや特定のフレームワークが、後方互換性のためにこの仕組みを使っていることがあります。
・メタプログラミングの理解: オブジェクトの挙動を言語レベルで制御する「メタプログラミング」の概念を理解することで、JavaScriptの言語仕様に対する深い洞察力が身につきます。

結論として、基本的にはwith文を使わないコードを書くのがベストですが、もしレガシーなコードを保守する場面に出くわしたら、このSymbol.unscopablesが「スコープ汚染を防ぐための知恵」として機能していることを思い出してください。

スポンサーリンク
タイトルとURLをコピーしました