JavaScript - 変数のスコープ

こんにちは、未来のJavaScriptの魔法使いさんたち！今日は、変数のスコープという面白い世界に踏み出します。プログラミングが新しい方でも心配しないでください。あなたの親切なガイドとして、この概念を一緒にステップバイステップで探求していきます。では、仮想の杖（キーボード）を手に取り、潜りましょう！

JavaScriptの変数スコープ

変数スコープは、変数が遊ぶ遊び場のようなものです。これは、コードのどこで変数が見えるか、使えるかを決定します。これを変数の「可視範囲」と考えてください。まず簡単な例から始めましょう：

let globalVar = "私はどこにでも見えます！";

function sayHello() {
console.log(globalVar);
let localVar = "私はこの関数の中だけで見えます！";
console.log(localVar);
}

sayHello();
console.log(globalVar);  // これは動作します
console.log(localVar);   // これはエラーを引き起こします

この例では、globalVarは学校の人気者のように、誰にでも知られ、話しかけられます。しかし、localVarは控えめな子のように、(sayHello関数)の時間だけ出てくるものです。

JavaScriptのブロックスコープ

次に、ブロックスコープについて話しましょう。JavaScriptでは、ブロックは波括弧 {} で定義されます。letとconstで宣言された変数はブロックスコープであり、宣言されたブロック内でのみ見えます。

if (true) {
let blockScopedVar = "私はこのブロック内だけで見えます！";
console.log(blockScopedVar);  // これは動作します
}

console.log(blockScopedVar);  // これはエラーを引き起こします

ブロックスコープは、秘密のクラブハウスのように考えられます。クラブハウス（ブロック）の中のクールな子（変数）だけが秘密の握手（変数にアクセスできる）を知っています。

JavaScriptの関数スコープ

関数スコープは、変数のプライベートルームのようなものです。関数内で宣言された変数は、その関数内でのみアクセス可能です。例を見てみましょう：

function outer() {
let outerVar = "私は外側の関数にいます！";

function inner() {
let innerVar = "私は内側の関数にいます！";
console.log(outerVar);  // これは動作します
console.log(innerVar);  // これは動作します
}

inner();
console.log(outerVar);  // これは動作します
console.log(innerVar);  // これはエラーを引き起こします
}

outer();

ここで、outerVarは親のように、子の部屋（inner関数）に覗き込むことができますが、子の玩具（innerVar）は子の部屋に留まります。

JavaScriptのローカルスコープ

ローカルスコープは、コードの特定の部分でアクセス可能な変数を指します。これは関数（関数スコープ）またはブロック（ブロックスコープ）内です。より複雑な例を見てみましょう：

let globalVar = "私はグローバルです！";

function outerFunction() {
let outerVar = "私は外側の関数から来ています！";

if (true) {
let blockVar = "私はブロックから来ています！";
var functionVar = "私は関数全体で見えます！";

console.log(globalVar);    // 動作します
console.log(outerVar);     // 動作します
console.log(blockVar);     // 動作します
console.log(functionVar);  // 動作します
}

console.log(globalVar);    // 動作します
console.log(outerVar);     // 動作します
console.log(functionVar);  // 動作します
console.log(blockVar);     // エラー！
}

outerFunction();
console.log(globalVar);    // 動作します
console.log(outerVar);     // エラー！
console.log(functionVar);  // エラー！
console.log(blockVar);     // エラー！

この例は、大家族の集まりのようです。globalVarは祖父母のように、誰にでも知られています。outerVarは親のように、outerFunctionの家族に知られています。blockVarは控えめないとこで、(ifブロック)の部屋にだけ現れます。functionVarはvarで宣言されたので、関数全体で見えます。

以下に、異なる種類の変数宣言とそのスコープを簡単な表にまとめます：

デクリレーション	スコープ	ホイスト	再代入可能
var	関数	はい	はい
let	ブロック	いいえ	はい
const	ブロック	いいえ	いいえ

varは古いスタイルのクールな子で、少し予測不可能です。letとconstは新しい子で、より厳しい規則に従います。

変数スコープを理解することはJavaScriptで非常に重要です。これにより、クリーンで効率的なコードを書くことができ、厄介なバグを避けることができます。常に適切なスコープで変数を宣言し、どこでアクセスしようとしているかを気にしてください。

このレッスンを終えるにあたり、あなたのコードを整然と組まれた都市のように考えてください。グローバル変数は誰にでも訪れることができる公共の公園です。関数スコープは階段のある建物（ブロック）で、それぞれの部屋（ローカルスコープ）があります。変数を適切な「家」に置くことで、調和の取れた、効率的なJavaScriptの都市を作成できます！

練習を続け、変数スコープのマスターになろう。次回まで、ハッピーコーディング！

Credits: Image by storyset