前回の記事で、JavaScriptが扱う「データ型」について学びましたね。そのデータ型（文字列、数値など）を実際にプログラム内で利用するには、一時的に情報を保存しておくための「箱」が必要です。この箱のことを変数と呼びます。
しかし、JavaScriptには、この箱の作り方や扱い方について、いくつかのルールがあります。特に重要なのが、var、let、constという3つのキーワードで、これらを正しく使い分けることが、バグの少ない、安定したコードを書くための鍵となります。
今回は、この3つの変数の違いと、「スコープ」という、変数が利用できる範囲のルールについて深く掘り下げていきましょう。
1. 変数宣言の3つのキーワード
var：古くて、ちょっと危ない箱（非推奨）
varはJavaScriptが生まれた頃からある古い宣言方法です。現在ではほとんど使われていません。
- 特徴: 再宣言・再代入が可能。
- 問題点: 後述する「スコープ」のルールが緩すぎるため、意図しない場所で変数が上書きされてしまい、バグの原因になりやすいです。
JavaScript
var name = "Alice";
var name = "Bob"; // 同じ名前で再宣言できてしまう（危険）
let：中身は変えられるが、安全な箱（標準）
letは、現代のJavaScriptで最も標準的に使われる宣言方法です。
- 特徴: 再宣言は不可能だが、再代入は可能。
- 用途: 後から値が変わる可能性のあるデータ（カウンターの値、状態フラグなど）に使います。
JavaScript
let count = 0;
// let count = 10; // ← エラーになる（再宣言は不可能）
count = 1; // ← 成功（再代入は可能）
const：中身を絶対に守る箱（定数）
constは「Constant（定数）」の略で、一度値を入れたら二度と変更できない変数を宣言します。
- 特徴: 再宣言・再代入ともに不可能。
- 用途: アプリケーション全体で変わらない値（消費税率、APIのURLなど）に使います。
JavaScript
const TAX_RATE = 0.1;
// TAX_RATE = 0.08; // ← エラーになる（再代入は不可能）
Web制作では、値が変わらない変数（定数）が多いため、基本的にはconstを使い、値を変える必要があるときだけletを使うのが現在の主流です。
2. 変数が使える範囲「スコープ」のルール
変数がコードのどの範囲で利用できるかという「有効範囲」のことをスコープと呼びます。このスコープのルールが、varとlet/constで大きく異なります。
ブロックスコープ (let, const)
letとconstはブロックスコープを持ちます。「ブロック」とは、if文やfor文、関数などで使われる**波括弧 {}**で囲まれた範囲のことです。
letやconstで宣言された変数は、この{}の外側からはアクセスできません。これにより、予期せぬ外部からの干渉を防ぎ、安全性が高まります。
JavaScript
function checkScope() {
if (true) {
let message = "ブロック内"; // この変数は外から見えない
}
// console.log(message); // ← エラー: messageは定義されていません
}
関数スコープ (var)
一方、varは関数スコープを持ちます。これは、varで宣言された変数が、関数全体を通してどこからでもアクセスできることを意味します。if文やfor文の{}はスコープを区切りません。
JavaScript
function checkVarScope() {
if (true) {
var greeting = "こんにちは"; // ifブロックの外でも有効
}
console.log(greeting); // ← 成功: "こんにちは"
}
この「ブロックを無視する」という性質が、大規模なプログラムで混乱やバグを引き起こす最大の原因となるため、varは非推奨とされているのです。
まとめ：constとletを使いこなす
安定したJavaScriptのコードを書くための最も簡単なルールは、以下の通りです。
- 基本的にすべて
constで宣言する。 - 値が変わる可能性があるときだけ、
letに切り替える。 varは使わない。
このルールを守るだけで、あなたのコードは格段に読みやすく、そして安全になります。変数を宣言するときは、そのデータが「今後変わるのか、変わらないのか」を必ず意識しましょう。
