こんにちは！JavaScriptの世界へようこそ。
コードを書き始めると、「あれ、さっきまで使えていたはずの変数が、なぜか見当たらない…？」なんて経験、一度はありますよね。大丈夫、それはあなたが悪いんじゃなくて、JavaScriptの「スコープ」というルールのせいなんです。
今日は、そんなJavaScriptの「秘密の境界線」である関数スコープについて、一緒に紐解いていきましょう。
—
「スコープ」は、自分専用の「お道具箱」
まず、「スコープ」という言葉を難しく考えないでください。これは「その変数がどこまで顔を出していいか」という有効範囲のことです。
たとえるなら、あなたは今、とあるお料理教室のキッチンにいると想像してみてください。
- グローバルスコープ：キッチン全体に置いてある「共用の包丁」。誰でもどこからでも使えます。
- 関数スコープ：あなたの手元にある「あなた専用の小さな道具箱」。
関数の中で宣言した変数は、この「手元の道具箱」の中身です。箱の外にいる人には、中身は見えません。 これが関数スコープの正体です。
—
なぜ「関数の中」に隠す必要があるの？
もし、すべての変数をキッチン全体（グローバル）に置いてしまったらどうなるでしょう？
誰がどこで何を使っているかわからなくなり、うっかり誰かの調味料を捨ててしまったり、名前が被って大混乱が起きますよね。
関数スコープを使うと、「この関数の中だけで使うメモ帳」を外から隠すことができるので、他のコードと干渉せず、安全に開発ができるんです。
実際にコードで見てみましょう。
// これはキッチン全体（グローバルスコープ）の変数
let commonTool = “包丁”;
function makeSandwich() {
// これは関数の中（関数スコープ）の変数。外からは見えないよ！
let secretRecipe = “特製ソース”;
console.log(commonTool + “を使って、” + secretRecipe + “を塗ります！”);
}
makeSandwich(); // 無事に実行されます
// 試しに外から呼んでみると…？
// console.log(secretRecipe); // ここでエラー！「secretRecipeなんて知らないよ！」と怒られます。
—
初学者がつまずきやすい「巻き上げ（Hoisting）」の罠
ここで一つ、JavaScriptがちょっとお節介な性格をしているお話をしますね。
昔のJavaScript（`var`を使っていた時代）では、変数は関数の一番上に「巻き上げられる」という不思議な習性がありました。でも今は、`let`や`const`を使うのが現代の常識です。これらは「宣言した場所よりも前では使わせない」という、しっかりとしたルールを持っています。
なので、これからの開発では「変数は使う直前、もしくは関数のなるべく上のほうで宣言する」と覚えておいてください。これだけで、バグの大部分は防げます。
—
大切なのは「見えない」という安心感
「外から見えないなんて不便じゃないの？」と思うかもしれません。でも、実は逆なんです。
大規模なWebサイトを作るとき、チームで何千行ものコードを書きます。もし、どこでも書き換え可能な変数が溢れていたら、修正するたびに「どこかの誰かが変な値を入れないか」とビクビクしなければなりません。
「この関数の中身は、この関数に任せておけば安心」
そうやって責任範囲を小さく切り分けることが、プロのエンジニアの第一歩です。
—
最後に：つまずいたときは深呼吸
もしプログラムが動かなくて、「変数が未定義です！」というエラーが出たら、それはJavaScriptが「その変数、君の道具箱には入ってないよ！」と親切に教えてくれているサインです。
1. その変数は今、どこで宣言されていますか？
2. あなたは今、その変数の有効範囲（中括弧 `{ }` の中）にいますか？
この2つを確認するだけで、解決の糸口は必ず見つかります。
コードを書くのは大変ですが、一つひとつの仕組みが分かってくると、パズルを解くような楽しさが待っていますよ。
焦らず、一歩ずつ進んでいきましょうね。応援しています！
コメント