こんにちは！フロントエンドの現場で長年コードと向き合っていると、「動くのは当たり前、読みやすさこそが正義」という境地にたどり着きます。
今日は、JavaScriptの初心者が一度は必ずと言っていいほど頭を悩ませる「変数シャドーイング」についてお話しします。名前を聞くと難しそうですが、実は私たちの日常にもよくある「名前の被り」の話なんです。
—
「シャドーイング」って、一体なに？
プログラミングにおける「シャドーイング」とは、外側のスコープで定義した変数と同じ名前の変数を、内側のスコープで宣言してしまうことを指します。
イメージしてみてください。あなたは自分の部屋（内側のスコープ）で「お気に入りのペン」を使っています。でも、リビング（外側のスコープ）にも「お気に入りのペン」という同じ名前のペンが置いてある……。
このとき、あなたが自分の部屋で「ペン取って！」と言うと、リビングのペンではなく、手元にある自分のペンのことになりますよね。これがシャドーイングです。外側の変数の存在が見えなくなってしまう（影に隠れる）ことから、こう呼ばれています。
こんなコード、見覚えありませんか？
まずは、実際にどう動くのか見てみましょう。
let fruit = “りんご”; // 外側のスコープにある変数
if (true) {
let fruit = “みかん”; // 内側で同じ名前の変数を宣言！
console.log(fruit); // ここでは「みかん」と表示される
}
console.log(fruit); // ここでは「りんご」に戻る
これを見ると、「お、内側で変えても外側に影響しないなら便利じゃん！」と思うかもしれません。ですが、これが現場では「バグの温床」として嫌われることがあるんです。
—
なぜ「シャドーイング」は避けるべきなのか？
「動くならいいじゃない」と思うかもしれませんが、人間は完璧なマシンではありません。数ヶ月後の自分がこのコードを読み返したとき、あるいはチームメンバーがこのコードを修正するとき、こんなことが起こります。
1. 「あれ、この変数はどっちを見てるの？」と迷う
コードが長くなってくると、上の方で定義したのか、今ブロックの中で再定義したのかを追いかけるだけで脳のメモリを大幅に消費します。
2. 意図しない書き換えが発生する
「外側の変数を更新したつもりだったのに、実は内側で新しい変数を作ってしまい、元の変数が変わっていなかった」というミスは、現場でも非常によくある「あるある」です。
良いコードは「名前」で語る
では、どうすればいいのか。答えはシンプルです。「名前を変える」これに尽きます。
もし、内側で「みかん」を扱いたいなら、無理に`fruit`という名前に固執せず、`selectedFruit`や`itemInBasket`のように、少しだけ具体的に名前をつけてみてください。
let currentFruit = “りんご”;
if (true) {
// 名前を具体的にすることで、どちらを指しているか一目瞭然！
let snack = “みかん”;
console.log(currentFruit); // もとの「りんご」を維持
console.log(snack); // 新しい「みかん」
}
—
現場のアーキテクトからのアドバイス
初心者のうちは、つい「とりあえず動けばいいや」と、手っ取り早い名前（`data`, `value`, `item`など）を使いがちです。でも、変数名に迷ったら、それは「その変数の役割がまだ自分の中で整理できていない」というサインかもしれません。
もし、同じような名前を何度も使いたくなるなら、それはスコープを細かく分けすぎているか、関数が大きくなりすぎている（責務が多すぎる）可能性があります。
今日のまとめ：大丈夫、一歩ずつでOK！
- シャドーイングは「名前の被り」。内側で外側の変数を隠してしまうこと。
- 可読性は未来の自分へのプレゼント。少し長い名前になっても、意味が明確な方がずっと価値があります。
- 迷ったら名前を変える。それがコードを読みやすくする一番の近道です。
プログラミングに慣れてくると、つい「テクニック」に走りたくなりますが、本当のプロは「誰が読んでも迷わないコード」を書く人です。
もし今、変数の名前で悩んでいるなら、それはあなたが「丁寧なコード」を書こうとしている証拠。そのままの調子で、焦らず一歩ずつ進んでいきましょう。応援していますよ！
コメント