JavaScriptの変数宣言(var・let・const)の正しい使い分け方と基礎知識

暗めの背景に配置された、JavaScriptの変数宣言(VAR、CONST、LET)の機能比較を表すインフォグラフィック。再代入の可否やスコープの範囲がアイコンで視覚化されているイメージ。
JavaScriptの変数宣言(var・let・const)における機能とスコープの違い

JavaScriptでプログラムを書く際、最初に向き合うのが「変数の宣言」です。JavaScriptには varletconst という3つのキーワードがありますが、これらの違いを曖昧にしたまま記述すると、予期せぬバグの原因になります。

現代のJavaScript開発においては、「原則として const を使い、再代入が必要な場合のみ let を使う。var は使わない」というルールが定着しています。

この記事では、なぜそのような使い分けが必要なのか、スコープや再代入といった重要な基礎知識を交えて分かりやすく解説します。

3つの変数宣言ツールの基本特徴

まずは、3つのキーワードの特徴を一覧で比較します。変数宣言を正しく理解するためには、「再代入」と「再宣言」という2つの言葉の意味を押さえる必要があります。

  • 再代入:一度値を代入した変数に、後から別の値を入れ直すこと。
  • 再宣言:同じ変数名で、もう一度宣言し直すこと。
キーワード再代入再宣言スコープ(有効範囲)
const不可不可ブロックスコープ( { } の中)
let可能不可ブロックスコープ( { } の中)
var可能可能関数スコープ(関数の中)

なぜ現代のJavaScriptでvarを使ってはいけないのか

以前のJavaScriptでは var しか存在しませんでしたが、現在の開発で var の使用は推奨されません。それには明確な2つのデメリットがあるためです。

1. 同じ名前の変数を何回でも宣言できてしまう(再宣言)

var を使うと、すでに定義されている変数と同じ名前の変数を、エラーを出さずに上書きできてしまいます。

var userName = "山田";
// 数十行のコードが間にあると想定
var userName = "鈴木"; // エラーにならず、上書きされてしまう

console.log(userName); // 鈴木

大規模な開発において、他の人が使っている変数名を誤って再宣言してしまうと、プログラムが意図しない挙動を起こすリスクが高まります。

2. 変数の有効範囲(スコープ)が広すぎる

var の有効範囲は「関数スコープ」です。これは、if 文や for 文などの { }(ブロック)の中で宣言した変数であっても、その外側からアクセスできてしまうことを意味します。

if (true) {
  var message = "こんにちは";
}
console.log(message); // エラーにならず「こんにちは」と表示される

意図しない場所から変数にアクセスできてしまう性質は、バグの温床となります。

さらに基礎からJavaScriptの仕組みを学びたい場合は、JavaScriptの基本構文とデータ型をマスターするロードマップを参照してください。

原則として最優先で使うべき「const」

現代のJavaScriptにおいて、最も頻繁に使用するのが const です。const は「定数」を定義するキーワードであり、一度代入した値を後から変更することはできません。

constの特徴とコード例

const maxLoginAttempts = 5;
maxLoginAttempts = 6; // TypeError: Assignment to constant variable.(エラーが発生)

上記のように、値を書き換えようとするとエラーが発生するため、プログラムの途中で値が勝手に変わらないという安心感があります。コードの可読性(読みやすさ)と安全性を高めるために、値が変わる予定のない変数はすべて const で宣言します。

注意点:オブジェクトや配列の中身は変更できる

const で宣言した変数自体への「再代入」は禁止されていますが、変数に格納された「オブジェクト」や「配列」の内部の値を変更することは可能です。

const userProfile = {
  name: "山田",
  age: 25
};

// オプションのプロパティの変更は可能
userProfile.age = 26; 

console.log(userProfile.age); // 26

オブジェクトそのものを丸ごと入れ替える行為(再代入)はエラーになりますが、プロパティの書き換えは制限されません。この挙動はJavaScriptを扱う上で重要な要素です。

オブジェクトや配列の操作方法について詳しく知りたい場合は、JavaScriptの配列・オブジェクト操作の基本まとめで詳しく解説しています。

値が変化する場合にのみ使う「let」

let は、プログラムの実行途中で値が変化する(再代入を行う)可能性がある場合に使用します。

letの特徴とコード例

よくあるユースケースは、for 文などのループ処理におけるカウンタ変数や、条件によって中身を書き換えるフラグ管理です。

let currentScore = 0;
currentScore = 10; // 再代入が可能

console.log(currentScore); // 10

letとconstが持つ「ブロックスコープ」の安全性

letconst は、どちらも「ブロックスコープ」を持っています。{ } で囲まれた範囲内でのみ有効となるため、スコープの外側に影響を与える心配がありません。

if (true) {
  let localMessage = "限定メッセージ";
  console.log(localMessage); // 限定メッセージ
}

// ブロックの外側からアクセスを試みる
console.log(localMessage); // ReferenceError: localMessage is not defined(エラーが発生)

このように、安全な有効範囲が保証されているため、var のような予期せぬエラーを防ぐことができます。

変数宣言と同時に押さえておきたい関数の仕組みについては、JavaScriptの関数の書き方とスコープの仕組みをご覧ください。

実践的な使い分けの判断フロー

日々の開発において、どのキーワードを選ぶべきか迷った際は、以下のステップに沿って判断します。

  1. 基本はすべて const で記述する
    • 変数を定義する際は、まず const を使って書く習慣をつけます。
  2. 後から値を変更する必要が出てきた場合のみ let に変更する
    • ループのカウントや、条件分岐による値の更新が必要だと分かった時点で、その変数だけを let に書き換えます。
  3. var は一切使用しない
    • 過去に作られた古いプログラムを改修する場合を除き、新規のコードで var を選択する理由はありません。

このシンプルなルールを守るだけで、コードの品質は劇的に向上し、チーム開発でもトラブルの少ないプログラムを記述できるようになります。

関連記事

  • JavaScript初心者が最初につまずくポイントと解決策
  • モダンJavaScript(ES6以降)の新機能と記述方法の変更点