【JavaScript入門】変数とスコープ

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

変数とスコープ

　プログラムを作るうえで欠かせないのが「変数」と、その変数が利用できる範囲である「スコープ」です。変数は、値を一時的に保存して使い回すための仕組みです。また、変数を宣言した箇所や構文によって、どこまで利用可能かが決まります。ここでは、変数を使うメリットや宣言の仕方、そしてスコープの考え方を紹介します。

１．変数とは

　プログラムの処理に直接数値や文字列を埋め込んでしまうと、その処理は特定の値しか扱えません。変数に値を入れて処理を書くことで、値を差し替えながら同じ処理を使い回せるようになります。

1.1. 変数を使うメリット

処理の書き方	問題点・利点
値を直接書く	特定の値に固定されるため、異なる値のときに流用できない。
変数を使う	値を差し替えるだけで同じ計算や処理を使い回せる。

　たとえば「金額 × 割引率」を計算するプログラムを、変数を使わずに固定値で書くと、割引率や金額が変わるたびにコードを修正しなければなりません。変数を使えば、金額や割引率だけを入れ替えれば同じ処理で別の値に対応できます。

1.2. 変数宣言と代入

　JavaScript では、let キーワードを用いて変数を宣言し、代入（値を入れる）することで、変数を利用できます。

変数宣言： let price; これで price という名前の変数枠を用意できます。まだ値を入れていない変数には undefined が入ります。
値の代入： price = 1000; 先ほど宣言した price に 1000 という数値を割り当てます。宣言と代入を同時に書くこともできます。 let rate = 20;

1.3. 変数の再代入

　同じ変数に別の値を入れることを再代入と呼びます。JavaScript の let で宣言した変数は再代入が可能です。

let discount = 20;
discount = 30; // ここで再代入

最初に 20 を入れた後、30 に差し替えることができます。

２．スコープとは

　宣言した変数がどの範囲で使えるかを示すのがスコープです。スコープの外では、変数名を参照できません。JavaScript には主に「ブロックスコープ」と「関数スコープ」があります。

2.1. ブロックスコープ

　「{ }」で囲まれた範囲をブロックスコープと呼びます。if や for のように、波括弧で囲まれた部分に変数を宣言すると、その変数はその波括弧の外からは使えなくなります。

if (条件) {
  let color = '赤';
  // color はここでは使える
}
// color はここでは使えない（エラー）

2.2. 関数スコープ

　関数の「{ }」内部も、そこだけで有効なスコープです。関数内で宣言した変数は、関数の外ではアクセスできません。

function sample() {
  let fruit = '梨';
  console.log(fruit); // "梨" と出力
}
sample();
console.log(fruit); // エラー: fruit は未定義

2.3. スコープの階層

　ブロックや関数が入れ子になっている場合、内側のスコープでは外側の変数が使えますが、外側から内側の変数を使うことはできません。

例：スコープの階層

let test = true;
if (test) {
    let food = 'ケーキ';
    console.log('階層2：', food); // "ケーキ"

    if (test) {
        console.log('階層3：', food); // "ケーキ"
    }

    console.log('階層2：', food); // "ケーキ"
}
console.log('階層1：', food); // エラー: food は未定義

この例では、food は外側の if ブロックからは見えないため、コンソールにエラーが出力されます。

３．サンプルHTML（変数とスコープの動作確認）

　ファイル名を「variableScopeCheck.html」とします。ブラウザで開き、コンソール（開発者ツール）を確認してみてください。

【variableScopeCheck.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>variableScopeCheck.html</title>
</head>
<body>
  <h1>変数とスコープのサンプル</h1>
  <p>コンソールを開いて結果を確認してください。</p>
  <script>
    // 変数の宣言と代入
    let price = 1000;
    let rate = 15;
    console.log('元の金額:', price, '割引率:', rate, '%');

    // 再代入
    rate = 25;
    console.log('再代入後の割引率:', rate, '%');

    // スコープ確認用の関数
    function showDiscount() {
      // 関数内で変数を宣言
      let discountedPrice = price * (100 - rate) / 100;
      console.log('割引後の金額:', discountedPrice, '円');
    }

    // 関数の呼び出し
    showDiscount();

    // ブロックスコープの確認
    if (true) {
      let message = 'このブロック内だけで有効';
      console.log('ブロック内のメッセージ:', message);
    }
    // ここで message は使えないのでエラーになる
    // console.log(message);
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

元の金額: 1000 割引率: 15 %
再代入後の割引率: 25 %
割引後の金額: 750 円
ブロック内のメッセージ: このブロック内だけで有効

このサンプルでは、

price と rate に値を入れて、再代入で割引率を変えています。
showDiscount() 関数の中で変数 discountedPrice を宣言し、関数の外からは使えないことを確認できます。
if (true) ブロックの中で宣言した message は、ブロックを抜けると参照できない（エラー）ことも試せます。

まとめ

　変数は柔軟に値を差し替えて処理を再利用できる仕組みであり、スコープは「変数がどこまで使えるか」を規定する大切なルールです。スコープを正しく理解すると、コードの意図しない部分で変数が参照・変更されるバグを減らしたり、読みやすい設計を実現できます。JavaScript の let キーワードで宣言した変数は、宣言されたブロックまたは関数内だけで使える点をしっかり押さえ、スコープを活かした書き方を練習してみてください。