こんにちは！フロントエンドの現場で長年コードと向き合っていると、「昔の書き方」と「今の正解」の違いに驚かされることがよくあります。
今日は、JavaScriptの歴史の中でも、ある種「伝説の禁じ手」として扱われている`with`文についてお話しします。
「そんなの使ったことないよ」という方がほとんどだと思いますが、あえてこれを知ることで、JavaScriptの「スコープ（変数の有効範囲）」という概念がより深く、立体的になってくるはずです。肩の力を抜いて、一緒に紐解いていきましょう。
—
そもそも「スコープ」ってなに？
まずは基本の復習から。JavaScriptにおける「スコープ」とは、「変数が生きている場所」のことです。
たとえるなら、「自分の部屋」だと思ってください。
自分の部屋（スコープ）の中にあるものは、自分ですぐに使えますよね。でも、お隣さんの部屋にあるものは、わざわざドアを開けて取りに行かないと使えません。JavaScriptも同じで、プログラムは「今いる場所（スコープ）」から順に、変数がどこにあるかを探しに行きます。
`with`文という「魔法のドア」
`with`文は、一言で言うと「特定のオブジェクトをスコープの最優先順位に強制的に割り込ませる」という、ちょっと強引な魔法です。
通常、オブジェクトの中身（プロパティ）にアクセスするには、名前をしっかり指定する必要があります。
const user = {
name: “たろう”,
age: 25,
job: “エンジニア”
};
// 通常のアクセス方法
console.log(user.name); // 「たろう」としっかり指定する
console.log(user.age); // 「25」としっかり指定する
これを`with`文で包むと、こうなります。
// 注意：今は絶対にやっちゃダメな書き方です！
with (user) {
console.log(name); // なぜかuser.nameが取れる！
console.log(age); // なぜかuser.ageが取れる！
}
まるで、`user`という部屋の中にワープして、中の家具（プロパティ）を「自分の持ち物」のように扱えてしまうわけです。一見、タイピングが減って便利そうに見えますよね？
—
なぜ「禁じ手」なのか？（地獄の入り口）
「便利なら使えばいいじゃないか」と思うかもしれません。しかし、現場でこの書き方が厳禁されているのには、「コードが予測不可能になる」という決定的な理由があります。
1. どちらの「変数」を見ているのか分からなくなる
もし、`user`の中に`name`という名前があり、さらに外側の広い世界（グローバルスコープ）にも`name`という変数があったらどうなるでしょう？
プログラムは「あれ？どっちの`name`を使えばいいの？」と混乱します。この「曖昧さ」は、バグの温床です。
2. JavaScriptエンジンの最適化を殺す
これはちょっと専門的な話ですが、ブラウザ（JavaScriptエンジン）は、「どこにどの変数があるか」を事前に予測して高速に動いています。しかし、`with`文は「どこに何があるか」をその瞬間に変えてしまうため、ブラウザは「……あ、今のルールは無視して全部探し直さなきゃ」と、急激に動作が重くなってしまうのです。
「便利そうに見えて、実は裏でエンジンの足を引っ張り、バグの種を撒いている」。これが`with`文が非推奨である理由です。
—
現代のJSではどう書くのが正解？
今のJavaScriptでは、`with`文のような危険な近道は使いません。代わりに、「分割代入（Destructuring）」という、もっと安全でスマートな方法を使います。
const user = {
name: “たろう”,
age: 25,
job: “エンジニア”
};
// 必要なものだけを取り出して、そのスコープで使う
const { name, age } = user;
console.log(name); // 「たろう」と明確に呼び出せる
console.log(age); // 混乱することなくスッキリ！
これなら、どの変数がどこから来たのか一目瞭然ですし、バグが入り込む余地もありません。
—
最後に：初心者の方へ伝えたいこと
「`with`文なんて古いものを勉強して意味があるの？」と思うかもしれませんが、「なぜダメなのか」を知ることは、「なぜ今の書き方が良いのか」を知ることに繋がります。
JavaScriptは進化し続け、昔の「力技」から、今の「安全で予測可能なコード」へと洗練されてきました。
もし学習中に古いコードを見かけても、「昔はこんな魔法を使おうとした人がいたんだな」と歴史を感じつつ、「今はもっと安全な道があるんだから、そっちを通ろう」と判断できれば、あなたはもう一人前のエンジニアの視点を持てています。
焦らなくて大丈夫ですよ。一つずつ、こうやって「良い書き方」を身につけていきましょう！応援しています。
コメント