JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのブロックスコープとは？letとconstによる変数のスコープをわかりやすく解説

ブロックスコープとは、2つの波括弧 { } で囲まれた領域のことを指します。この領域は、ループ処理、if文、switch文などの内部に存在します。

ES2015（ES6）で導入された let と const を使うことで、そのブロック内でのみアクセスできる「ブロックスコープ変数」を作成できます。従来の var は関数スコープであり、ブロックの外からでもアクセスできてしまうため、意図しないバグの原因になることがありました。let や const を使えば、変数の有効範囲を明確に制限できます。

ブロックスコープの特徴

  • ブロック外からのアクセス不可： ブロック内で宣言した変数は、ブロックの外から参照しようとするとエラー（ReferenceError）が発生します。
  • try〜catchで動作確認が可能： ブロック外からアクセスした際のエラーは、try...catch 構文を使って捕捉できます。
  • constとの併用： 再代入不要な定数には const を使うことで、より安全なコードになります。

以下は、JavaScriptにおけるブロックスコープの動作を示すサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ブロックスコープのデモ</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result{
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScriptのブロックスコープ</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、ブロック内外の変数へのアクセス結果を確認できます</h3>
<script>
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        let b = 44;{
            let a = 22;
        }
        resEle.innerHTML = 'ブロック内の変数 b = ' + b + '<br>';
        try{
            a
        }
        catch(err){
            resEle.innerHTML += 'ブロック外からのアクセス a = ' + err;
        }
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptのブロックスコープとは？letとconstによる変数のスコープをわかりやすく解説

「クリックしてください」ボタンを押すと −

JavaScriptのブロックスコープとは？letとconstによる変数のスコープをわかりやすく解説

コードの解説

このサンプルでは、変数 b（値：44）はボタンのクリックイベント内で宣言されているため問題なくアクセスできます。一方、独立した波括弧 { } の中で宣言された変数 a（値：22）は、そのブロックの外から参照しようとすると ReferenceError が発生し、catch 節によってエラーメッセージが画面に表示されます。

このように、let や const で宣言された変数はブロックスコープを持つため、変数の意図しない上書きや漏えいを防ぎ、より安全で保守性の高いコードを書くことができます。

  1. JavaScriptのブロックスコープとは？letとconstによる変数のスコープをわかりやすく解説

    ブロックスコープとは、2つの波括弧 { } で囲まれた領域のことを指します。この領域は、ループ処理、if文、switch文などの内部に存在します。 ES2015（ES6）で導入された let と const を使うことで、そのブロック内でのみアクセスできる「ブロックスコープ変数」を作成できます。従来の var は関数スコープであり、ブロックの外からでもアクセスできてしまうため、意図しないバグの原因になることがありました。let や const を使えば、変数の有効範囲を明確に制限できます。 ブロックスコープの特徴 ブロック外からのアクセス不可： ブロック内で宣言した変数は、ブロックの外から参

  2. JavaScriptはブロックスコープ（block scope）に対応している？let・const・varの違いを実例付きで解説

    JavaScriptとブロックスコープの関係 JavaScriptでは、let または const キーワードを使って宣言された変数に対してのみ、ブロックスコープが適用されます。 一方で、var キーワードで宣言された変数は関数スコープには従いますが、ブロックスコープには従いません。つまり、波括弧 { } で囲まれたブロックの中で var を使って変数を宣言しても、その変数はブロックの外側からでもアクセスできてしまいます。 let・const と var のスコープの違い let / const： ブロック単位でスコープが生成されるため、ブロックの外部からは参照できません。 var： 関数