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

JavaScriptのletキーワードとは？ブロックスコープ変数の宣言方法を解説

letキーワードとは

2015年（ECMAScript 2015／ES6）に導入されたletキーワードは、ブロックスコープを持つ変数を宣言するためのものです。letで宣言した変数は、それを囲む波括弧 { } の内側でのみ有効となり、ブロックの外からアクセスしようとするとエラーが発生します。

varとの主な違い

  • スコープ： varは関数スコープですが、letはブロックスコープになります。
  • 再宣言： 同じスコープ内であればvarによる再宣言は可能ですが、letで再宣言するとSyntaxErrorになります。
  • 宣言前の参照： letで宣言した変数は、宣言より前にアクセスするとReferenceErrorが発生します（一時的なデッドゾーン／TDZ）。

letを使った変数宣言のサンプルコード

以下は、JavaScriptでletキーワードを使って変数を宣言する例です。

<!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;
   }
   .sample{
      font-size: 18px;
      font-weight: 500;
      color: red;
   }
</style>
</head>
<body>
<h1>JavaScriptのlet</h1>
<div class="sample"></div>
<div style="font-weight: bold; color: black;" class="result"></div>
<button class="Btn">クリックしてください</button>
<h3>
上のボタンをクリックして、変数へのアクセスを確認してみましょう
</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   document.querySelector(".Btn").addEventListener("click", () => {
      {
         let a = 22;
         sampleEle.innerHTML ="ブロック内から変数aにアクセス = " + a + "<br>";
      }
      try {
         sampleEle.innerHTML = "ブロック外から変数aにアクセス = " + a;
      } catch (err) {
         sampleEle.innerHTML +="ブロック外から変数aにアクセス = " + err;
      }
   });
</script>
</body>
</html>

実行結果

JavaScriptのletキーワードとは？ブロックスコープ変数の宣言方法を解説

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

JavaScriptのletキーワードとは？ブロックスコープ変数の宣言方法を解説

コードの解説

ボタンをクリックすると、まずブロック { } の内側でletにより変数aが宣言され、値22が代入されます。この時点ではブロック内なので正常にアクセスでき、値が画面に表示されます。

その後、try文の中でブロックの外側から同じ変数aにアクセスしようとしますが、letはブロックスコープを持つため、「a is not defined」というReferenceErrorが発生します。このエラーはcatch文で受け取られ、エラー内容がそのまま画面に出力されます。

このように、letを使うことで変数の有効範囲をブロック単位で厳密に管理でき、意図しない変数の上書きやバグを防ぐことができます。現代のJavaScript開発では、varの代わりにlet（および再代入しない場合はconst）を使うことがベストプラクティスとされています。

  1. JavaScriptで2つの配列を結合する方法【concat()とスプレッド構文】

    JavaScriptで2つの配列を1つにまとめたい場合、最も一般的なのが concat() メソッドです。このメソッドは、元の配列を変更することなく、複数の配列や値を連結した新しい配列を返します。 concat()メソッドの基本構文 let 新しい配列 = 配列A.concat(配列B); サンプルコード 以下は、ボタンをクリックすると2つの配列を結合し、その結果を画面に表示する完全なサンプルです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8&

  2. JavaScriptで2つの配列を乗算する方法｜forループとmap()の実装例

    JavaScriptで2つの配列の各要素同士を乗算し、その結果を新しい配列として取得する方法を解説します。基本的にはforループでインデックスを順番に処理しながら、対応する位置にある要素同士を掛け合わせていくシンプルなアプローチです。 2つの配列を乗算するサンプルコード 以下の例では、「CLICK HERE」ボタンをクリックすると、配列 arr と arr1 の対応する要素が乗算され、結果が新しい配列 multArray に格納された上で画面に表示されます。 <!DOCTYPE html> <html lang=en> <head> <meta ch