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

JavaScriptでブロックスコープ変数を宣言するには？letとconstの使い方を解説

ブロックスコープ変数とは

JavaScriptでブロックスコープ変数を宣言するには、ES2015（ES6）で導入された let および const キーワードを使用します。これらのキーワードで宣言された変数は、{ }（波括弧）で囲まれたブロックの中でのみ有効となり、ブロックの外からアクセスしようとするとエラーが発生します。

let と const の違い

let は値の再代入が可能な変数を宣言するキーワードで、const は再代入ができない定数を宣言するキーワードです。どちらもブロックスコープを持つため、従来の var（関数スコープ）と異なり、意図しない変数の上書きや漏れを防ぐことができます。特別な理由がない限り、const を優先して使うことが現代のJavaScriptでは推奨されています。

サンプルコード

以下は、JavaScriptでブロックスコープ変数を宣言し、その動作を確認するコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>ブロックスコープ変数の宣言</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、ブロックスコープ変数の宣言と表示が行われます</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");{
        let a = 22;
        const b = 44;
        sampleEle.innerHTML = "let a = " + a + "<br>";
        sampleEle.innerHTML += "const b = " + b + "<br>";
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        try {
            a + b;
        }
        catch (err) {
            resEle.innerHTML = "a+b = " + err;
        }
    });
</script>
</body>
</html>

実行結果

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

JavaScriptでブロックスコープ変数を宣言するには？letとconstの使い方を解説

この状態で「CLICK HERE」ボタンをクリックすると、ブロックの外から変数 a と b へのアクセスが試みられます。これらの変数はブロックスコープを持つためブロック外では存在せず、try...catch によって捕捉されたエラー（ReferenceError）の内容が画面に表示されます。

JavaScriptでブロックスコープ変数を宣言するには？letとconstの使い方を解説

まとめ

ブロックスコープ変数を宣言するには let と const を使います。変数の有効範囲をブロック内に限定できるため、バグの少ない安全なコードを書くうえで非常に重要な機能です。var との違いを理解し、適切に使い分けましょう。

  1. Androidでグローバル変数を宣言する方法【シングルトンパターンで実装】

    Androidにおけるグローバル変数の宣言方法本記事では、Androidアプリ全体で共有できるグローバル変数を宣言する方法を、実際のサンプルコードとともにわかりやすく解説します。AndroidにはJavaなどの言語にあるような厳密な意味での「グローバル変数」は存在しませんが、シングルトンパターンを利用することで、アプリ内のどこからでもアクセスできる変数を実現できます。手順1：新規プロジェクトを作成するAndroid Studioを起動し、「File」⇒「New Project」を選択して、必要事項を入力して新しいプロジェクトを作成します。手順2：レイアウトファイル（activity_main.

  2. Androidでグローバル変数を宣言する方法！シングルトンクラスを使った実装手順を徹底解説

    このチュートリアルでは、Androidアプリでグローバル変数のように使えるデータを宣言し、アプリ全体で共有する方法を解説します。具体的にはシングルトンクラスを作成し、どの画面からでも同じデータを保存・取得できるようにしていきます。 Androidでグローバル変数が必要になるケース Androidでは各Activityが独立したライフサイクルを持つため、通常のプログラミング言語のように単純にグローバル変数を宣言することは推奨されません。そこで定番となるのが、インスタンスがアプリ内に1つだけしか存在しないことを保証する「シングルトンパターン」です。これにより、画面をまたいで安全にデータを共有できま