禁断の果実「with文」を解剖する：なぜモダンJSで「死刑宣告」されているのか
フロントエンドの深淵を覗き込むと、時折、歴史の遺物のような構文に出くわすことがある。その筆頭が `with` 文だ。
「オブジェクトのプロパティにアクセスする際、いちいち名前を書かなくて済むから便利じゃないか？」
そう思った瞬間、君のコードベースには時限爆弾が仕込まれる。今日は、なぜ `with` が現代のJavaScriptにおいて「絶対に使ってはならないタブー」なのか、V8のようなブラウザエンジンが裏側で何に苦悩しているのか、その技術的背景をアーキテクトの視点から紐解いていこう。
—
1. with文の仕組み：スコープチェーンの攪乱
まず、`with` が何をしているかを正確に理解しよう。通常、JavaScriptのスコープチェーンは「関数スコープ」や「ブロック」という静的な構造で決定される。エンジンはコンパイル時に、変数がどこにあるかを概ね予測できる。
しかし、`with` 文は、実行時にスコープチェーンの先頭に任意のオブジェクトを強引に割り込ませる。
const config = {
endpoint: ‘https://api.example.com’,
timeout: 5000
};
// with文の中では、configのプロパティがローカル変数のように振る舞う
with (config) {
console.log(endpoint); // ‘https://api.example.com’ と出力される
timeout = 6000; // config.timeout が書き換わる
}
一見するとタイピングが減ってスマートに見えるが、これが最適化を殺す元凶だ。
—
2. なぜエンジンは `with` を嫌うのか：最適化の放棄
モダンなJavaScriptエンジン（V8, JavaScriptCoreなど）は、コードを機械語に変換する際、「スコープの静的な解析」を極めて重要視している。
隠れたコスト：スコープ探索の予測不可能性
通常、変数はレキシカルスコープ（静的スコープ）に従うため、エンジンは「この変数はクロージャのN番目にある」といった推論を行える。しかし `with` があると、エンジンは「`with` の中身が実行されるまで、その変数が `config` オブジェクト由来なのか、それとも外部のスコープ由来なのか判別できない」という事態に陥る。
結果として：
- インラインキャッシュ（IC）の無効化: エンジンが最適化のために使うキャッシュが働かず、プロパティアクセスが毎回「動的な辞書検索」になる。
- デオプティマイゼーション（最適化解除）: 非常に高度な最適化をかけていた関数も、`with` が含まれているだけで、エンジンは「安全側に倒して」最適化を諦める。
これは、メモリ効率が重要な大規模アプリケーションにおいて致命的だ。数千のコンポーネントが動く環境で `with` を使うことは、エンジンのエンジン出力をわざと制限するようなものだ。
—
3. 非同期処理とセキュリティの地獄
`with` 文の恐ろしさは、単なるパフォーマンス低下に留まらない。「予期せぬ名前の衝突」がバグの温床となる。
let endpoint = ‘global’;
with (config) {
// ここでうっかり外部の変数と名前が被った場合、どちらが参照されるかは
// configオブジェクトの構造に依存する。非同期処理が絡むと、
// タイミングによって挙動が変わる悪夢のようなデバッグを強いられる。
console.log(endpoint);
}
特に「Strictモード」では `with` 文の使用は構文エラーとして弾かれる。これは、ECMAScript仕様策定者が「この構文は論理的に制御不可能である」と断罪したことに他ならない。
—
4. 代替案：アーキテクチャ的に正しいアプローチ
もし君が「コードを短く書きたい」という理由で `with` を使いたくなっているなら、それは設計を見直すサインだ。現代的なJavaScriptにおいて、同じ目的をより安全に達成する方法はいくらでもある。
分割代入（Destructuring Assignment）
最もクリーンで、静的解析ツール（TypeScriptやESLint）との相性が抜群な方法だ。
const config = { endpoint: ‘https://api.example.com’, timeout: 5000 };
// 必要なものだけを取り出す。スコープは汚染されず、変数の出所も明白。
const { endpoint, timeout } = config;
console.log(endpoint);
関数への委譲
ロジックをカプセル化し、引数として渡す。これが関数型プログラミングの基本であり、テストコードも書きやすくなる。
function processConfig({ endpoint, timeout }) {
// ここでの処理はコンテキストが明確
return fetch(endpoint, { signal: AbortSignal.timeout(timeout) });
}
—
結論：技術的負債をコードに持ち込むな
`with` 文は、JavaScriptの黎明期における「動的な言語特性」の悪い側面が結晶化したような存在だ。現代のブラウザエンジンは、驚くほど高度な最適化を行い、我々のコードを高速に実行してくれる。その恩恵を享受し、かつ堅牢なシステムを構築するためには、言語仕様の「ダークサイド」には近づかないのが賢明だ。
もし既存のレガシーコードで `with` を発見したら、それは早急にリファクタリングすべき「技術的負債」のシグナルであると捉えてほしい。
優れたエンジニアは、動くコードを書くのではない。「誰が見ても挙動が予測でき、かつエンジンが最大限のパフォーマンスを発揮できるコード」を書くのだ。`with` を捨て、デストラクチャリングと関数分割を採用する。それだけで、君のアプリケーションの品質は一歩先へ進むはずだ。
コメント