JavaScript：変数宣言（let/const/var）を３分で整理

JavaScriptでの変数宣言にはvar, let, constの3つのキーワードがあります。それぞれのキーワードには特定の特徴とルール・制限が存在しており、場面に応じた適切な使い分けが重要になるので、このページではそもそも変数って何？という基本知識から、JavaScriptにおけるvar, let, constの3つのキーワードの使い分けまで整理して解説します。

参考　プログラミングにおける「変数」とは？

まとめ　JavaScriptにおける変数宣言（var）

関数スコープ: varで宣言された変数は、その変数が含まれる関数内でのみ参照可能。
再代入可能: 一度宣言された変数に対して、新たな値を代入することができる。
巻き上げあり: 宣言前に変数を参照してもエラーにはならず、undefinedが返される。
再宣言可能: 同じスコープ内であれば、同名の変数を再度宣言できる。

function testVar() {
  var x = 1;
  if (true) {
    var x = 2; // 同じ変数xを再宣言しています
    console.log(x); // 出力: 2
  }
  console.log(x); // 出力: 2 (関数スコープのため、ifブロック外でも値は2)
}

testVar();

まとめ　JavaScriptにおける変数宣言（let）

ブロックスコープ: letで宣言された変数は、その変数が含まれるブロック（{}で囲まれた範囲）内でのみ参照可能。
再代入可能: 一度宣言された変数に対して、新たな値を代入することが可能。
巻き上げなし: 変数は宣言されるまで参照できない（実際には巻き上げは発生するが、Temporal Dead Zoneのため参照不可）。
再宣言不可: 同じスコープ内で同名の変数をletで再宣言することはできない。

function testLet() {
  let y = 1;
  if (true) {
    let y = 2; // ブロックスコープ内で新たにyを宣言
    console.log(y); // 出力: 2
  }
  console.log(y); // 出力: 1 (ブロックスコープのため、元のyの値は変わらない)
}

testLet();

まとめ　JavaScriptにおける変数宣言（const）

ブロックスコープ: constもlet同様にブロックスコープを持ち、変数は宣言されたブロック内でのみ参照可能。
再代入不可: 一度constで宣言された変数は、新たな値を代入することができない。
巻き上げなし: letと同じく、宣言前に変数を参照しようとするとエラーが発生する。
再宣言不可: letと同様に、同じスコープ内で同名の変数をconstで再宣言することはできない。
初期化必須: constで変数を宣言する際は、宣言と同時に初期値を指定する必要がある。

function testConst() {
  const z = 1;
  console.log(z); // 出力: 1

  // z = 2; // エラー: "z" is read-only

  if (true) {
    const z = 2; // ブロックスコープ内で新たにzを宣言
    console.log(z); // 出力: 2
  }
  console.log(z); // 出力: 1 (ブロックスコープのため、元のzの値は変わらない)
}

testConst();


const obj = { key: 'value' };
console.log(obj.key); // 出力: value

obj.key = 'newValue'; // オブジェクトのプロパティは変更可能
console.log(obj.key); // 出力: newValue

// obj = {}; // エラー: "obj" is read-only

結論を超ザックリいえば、変数宣言するなら「let」。定数を宣言するなら「const」。「var」は古い宣言方法なので基本使わない！と覚えればOK。そのうえで、古いコードでは「var」も使われているから一応理解しておきましょう！という内容です。

キーワード	スコープ	再代入可能	巻き上げ(Hoisting)
`var`	関数スコープ	〇	〇
`let`	ブロックスコープ	〇	×
`const`	ブロックスコープ	×	×

表1：JavaScriptにおける変数宣言

関数スコープ
- 宣言された変数が関数内でのみ参照可能
ブロックスコープ
- 宣言された変数がブロック（{}で囲まれた範囲）内でのみ参照可能
再代入可能
- 変数に値を再度割り当てることが可能
巻き上げ
- 変数宣言がコード実行前にトップに移動されるJavaScriptの挙動

このページではvar, let, constがどのように使われるべきか、それぞれの選択がプログラミング上でどのような影響を与えるかについて深く掘り下げていきます。正しい変数宣言方法の選択は、エラーを減らし、コードの可読性を高める重要なステップです。それぞれの使い方・特徴・制限をしっかりおさえておきましょう！

それでは、各キーワードの詳細な解説を始めます。

参考　【JavaScript入門】基本文法/基礎文法を5分で復習

JavaScriptの変数宣言：var
JavaScriptの変数宣言：let
1. let：ブロックスコープ
2. let：変数の再代入
JavaScriptの「定数」宣言：const
1. const：ブロックスコープ
2. const：再代入の禁止

JavaScriptの変数宣言：var

JavaScriptでは、varキーワードを使用して変数を宣言することができます。この変数には数値、文字列、オブジェクトなど、どのようなタイプの値も格納することが可能です。

冒頭でも述べた通り、varはJavaScriptで最も古い変数宣言のキーワードです。ちょっと厄介な性質を持つので今ではあまり利用されませんが、古いコードではvarが利用されているシーンもあるので一応冒頭で解説しておきます。

サンプルコード　基本的な宣言と使用

var message = 'こんにちは、世界！';
console.log(message); // 出力: こんにちは、世界！

↑のコードでは、messageという名前の変数を宣言し、文字列'こんにちは、世界！'を代入しています。console.logを使ってこの変数の内容をコンソールに出力すると文字列'こんにちは、世界！'が表示されるという簡単なコードです。

ちなみに、変数というのは値を入れておく「箱」のようなもので、この「箱」の中に入っているデータを変えたり参照したりすることで１つのプログラムが動いていきます。プログラムで計算を行う際、文字列を操作する際など、ありとあらゆる場面で一般的に利用される概念です。詳しくはこちら（変数とは？）で解説します。

コンソール

コンソールは、開発者がプログラムの実行中にメッセージを表示したり、デバッグ情報を確認したりするためのツール。基本的にほぼすべてのブラウザに開発者ツールとして組み込まれているコンソールがあり、JavaScriptの実行結果の出力を確認したり、JavaScriptを直接実行したりすることができます。

console.logはJavaScriptにおける最も基本的なデバッグツールの１つで、指定されたメッセージや変数の内容をブラウザのコンソールに出力するために使用されます。この関数を使用することで、開発者はプログラムの実行中に変数の値を確認したり、特定のコードが実行されたかどうかをチェックすることができます。これはプログラムの動作を理解したり、バグを特定するのに役立ちます。

console.log("Hello, world!"); // 文字列をコンソールに出力します。

var number = 5;
console.log(number); // 変数numberの値をコンソールに出力します。

var obj = { name: "John", age: 30 };
console.log(obj); // オブジェクトの内容をコンソールに出力します。

var：変数の再代入

varで宣言された変数は後から値を変更することができます。

これを「再代入」と呼びます。

サンプルコード　変数の再代入

var number = 10;
console.log(number); // 出力: 10

number = 20;
console.log(number); // 出力: 20

最初にnumber変数に10を代入。次に20を再代入しています。varは何度でもこの値を変更することができ、プログラムの要求に応じて自由に再代入を繰り返すことが可能です。

これは、後述するconstキーワード（再代入ができない）とは異なる特徴を持ちますのでしっかりと頭に入れておきましょう。

var：巻き上げ（Hoisting）

varで宣言された変数は「巻き上げ」されます。「巻き上げ（Hoisting）」は、JavaScriptでの変数宣言や関数宣言がコード実行前にそのスコープの最上部に移動されるように見える挙動を指します。

ザックリいえば、どこで変数宣言しても、コード（もしくはそのスコープ内）の１番上で実行されるということ。

サンプルコード　巻き上げの挙動

console.log(myVar); // 出力: undefined

var myVar = '変数は巻き上げられます。';

console.log(myVar); // 出力: 変数は巻き上げられます。

↑の例では、myVar変数が宣言される前にconsole.logで参照されています。通常のプログラミング言語の場合、宣言される前の変数が参照された場合にはエラーが発生しプログラムはストップすることが多いのですが、JavaScriptは変数myVarを巻き上げるため、最初のconsole.logはundefinedを出力する形でエラーが発生しません。

参考　JavaScriptのデータ型：undefined

この「巻き上げ」が意図するものである場合は問題ありませんが、undefinedを出力するシーンというのは一般的には多くはない→つまり、コーディングミスであるにも関わらず、エラーが発生しないため、バグが多発してしまう・・・という欠点があります。

そのため「var」は現代ではあまり利用されず「const」が変数宣言としてポピュラーです。

var：関数スコープ

varで宣言した変数は関数スコープを持ちます。→関数内で宣言された変数は、その関数内部からのみアクセス可能であるということ。

参考　関数とは？

サンプルコード　関数スコープの例

function sayHello() {
  var greeting = 'Hello World!';
  console.log(greeting); // 出力: Hello World!
}

sayHello();
console.log(greeting); // エラー: greeting is not defined

参考　関数：function文

↑の例では、greeting変数はsayHello関数内で宣言されています。そのため、関数の外部からgreetingにアクセスしようとすると、エラーが発生します。

JavaScriptの変数宣言：let

JavaScriptでのletキーワードの使用は、varに比べてより現代的な変数宣言の方法です。letによる変数宣言は特にブロックスコープを利用することが大きな特徴。この章では、letの使い方について解説します。

サンプルコード　基本的な宣言と使用

let message = 'こんにちは、世界！';
console.log(message); // 出力: こんにちは、世界！

このコードでは、messageという名前の変数をletで宣言し、文字列'こんにちは、世界！'を代入しています。この変数は、宣言された場所からアクセス可能です。

宣言する際の基本的な構文ルールとしては「var」と相違ありません。

let：ブロックスコープ

letで宣言された変数はブロックスコープを持ちます。分かりやすく言い換えると、変数が{}で囲まれたブロック内でのみアクセス可能であるということ。

varが持つ関数スコープ（変数はその変数が宣言された関数全体からアクセス可能）とは異なり、ブロックスコープではより限定的な範囲で変数を制限することができます。

サンプルコード　ブロックスコープ内での使用

function testScope() {
  if (true) {
    let blockScopedVar = '私はこのブロック内でのみ存在します';
    console.log(blockScopedVar); // 出力: 私はこのブロック内でのみ存在します
  }

  // console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

}

testScope();

参考　JavaScript:if文

↑の例では、blockScopedVar変数はif文のブロック内でletを使って宣言されています。この変数はブロック内部からのみアクセス可能であり、ブロックの外側からは参照することができません。もしブロックの外側でblockScopedVarにアクセスしようとすると、ReferenceErrorが発生します。

letのこの挙動は、プログラムの特定の部分でのみ変数を使用したい場合に有用であり、変数のスコープをより細かく管理することを可能にします。

let：変数の再代入

letで宣言された変数も、varと同様で再代入が可能です。ただし、同じスコープ内で同じ名前の変数を再宣言することはできません。

サンプルコード　再代入の例

let number = 10;
console.log(number); // 出力: 10

number = 20;
console.log(number); // 出力: 20

let number = 30; // エラー: 'number' has already been declared

最初にnumberに10を代入し次に20を再代入しています。ただし、再度同じ名称のnumberを再宣言しようとするとエラーが発生します。これはvarとは異なる挙動のためしっかりと頭に入れておきましょう。

逆に言うと、同じ「箱」を何個も作れないようになっているので、その分プログラム全体が綺麗になります。var は同じ名前でいくらでも変数を作れてしまうので、バグが大量発生→let が誕生という経緯です。

ポイント　letの使用時の注意点

letで宣言された変数はブロックスコープを持つため使用する際はスコープに注意。
再宣言はできないため、同じ名前の変数を同一スコープ内で使用する際には注意が必要。
letはモダンなJavaScript開発においてvarの代替として推奨されている。

letを使用することで、コードの可読性と保守性が向上し、特に複雑なアプリケーションを開発する際にバグを減らすことができます。

varの再宣言

varキーワードを使用した場合、同じスコープ内で同じ名前の変数を複数回宣言することができます。これはJavaScriptがvar宣言を許容する柔軟性の一例なのですが、この挙動は予期しないバグの原因となることがあります。varによる再宣言が行われた場合、新しい宣言は無視され、変数の値は最後に代入された値によって決定されます。

var myVar = 1;
var myVar = 2; // 再宣言可能
console.log(myVar); // 出力: 2

JavaScriptの「定数」宣言：const

JavaScriptにおけるconstキーワードは「定数を宣言する」ために使用されます。constで宣言された変数は再代入が不可能で、ブロックスコープのルールに従います。これは一度値が割り当てられると、その変数の値を変更することができないことを意味します。

constの使用は、プログラム内で変更されるべきではない値を扱う際に非常に便利です。

サンプルコード　基本的な宣言

const greeting = 'こんにちは、世界！';
console.log(greeting); // 出力: こんにちは、世界！

const greeting = 10;
// greeting = 20; // TypeError: Assignment to constant variable.

↑のコードでは、greetingという名前の定数をconstで宣言し、文字列'こんにちは、世界！'を代入しています。constで宣言された後は値を変更することはできません。無理やり変えようとしてもエラーが発生するだけです。

const：ブロックスコープ

constで宣言された変数もletと同様にブロックスコープを持ちます。→変数が定義されたブロック（{}で囲まれた範囲）内でのみアクセス可能であるということです。

サンプルコード　ブロックスコープの例

{
  const localMessage = 'ブロック内のメッセージ';
  console.log(localMessage); // 出力: ブロック内のメッセージ
}
// console.log(localMessage); // エラー: localMessage is not defined

↑の例では、localMessage定数はブロック内でconstによって宣言されています。ブロックの外からはアクセスできません。

const：再代入の禁止

先ほども解説した通りなので、再度ご説明。constで宣言された変数は、再代入することができません。試みると、エラーが発生します。

サンプルコード　再代入の試み

const number = 10;
console.log(number); // 出力: 10

// number = 20; // エラー: Assignment to constant variable.

number定数に10を代入した後、20に値を変更しようとすると、JavaScriptエンジンはエラーを投げます。

ポイント　constの使用時の注意点

constで宣言された変数は再代入が不可能ですが、オブジェクトや配列のプロパティは変更できます。
初期化時に値を割り当てる必要があります。宣言のみで初期化を行わないとエラーになります。

const settings = { volume: 10, brightness: 70 };
settings.volume = 20; // これは可能
console.log(settings); // 出力: { volume: 20, brightness: 70 }

constはプログラム内の固定値を扱う際に非常に役立ち、コードの意図を明確にすることができます。値が変更されることを期待しない変数にconstを使用することで、プログラムの安全性と可読性を高めることができます。

まとめ　JavaScriptにおける変数宣言（var）

関数スコープ: varで宣言された変数は、その変数が含まれる関数内でのみ参照可能。
再代入可能: 一度宣言された変数に対して、新たな値を代入することができる。
巻き上げあり: 宣言前に変数を参照してもエラーにはならず、undefinedが返される。
再宣言可能: 同じスコープ内であれば、同名の変数を再度宣言できる。

function testVar() {
  var x = 1;
  if (true) {
    var x = 2; // 同じ変数xを再宣言しています
    console.log(x); // 出力: 2
  }
  console.log(x); // 出力: 2 (関数スコープのため、ifブロック外でも値は2)
}

testVar();

まとめ　JavaScriptにおける変数宣言（let）

ブロックスコープ: letで宣言された変数は、その変数が含まれるブロック（{}で囲まれた範囲）内でのみ参照可能。
再代入可能: 一度宣言された変数に対して、新たな値を代入することが可能。
巻き上げなし: 変数は宣言されるまで参照できない（実際には巻き上げは発生するが、Temporal Dead Zoneのため参照不可）。
再宣言不可: 同じスコープ内で同名の変数をletで再宣言することはできない。

function testLet() {
  let y = 1;
  if (true) {
    let y = 2; // ブロックスコープ内で新たにyを宣言
    console.log(y); // 出力: 2
  }
  console.log(y); // 出力: 1 (ブロックスコープのため、元のyの値は変わらない)
}

testLet();

まとめ　JavaScriptにおける変数宣言（const）

ブロックスコープ: constもlet同様にブロックスコープを持ち、変数は宣言されたブロック内でのみ参照可能。
再代入不可: 一度constで宣言された変数は、新たな値を代入することができない。
巻き上げなし: letと同じく、宣言前に変数を参照しようとするとエラーが発生する。
再宣言不可: letと同様に、同じスコープ内で同名の変数をconstで再宣言することはできない。
初期化必須: constで変数を宣言する際は、宣言と同時に初期値を指定する必要がある。

function testConst() {
  const z = 1;
  console.log(z); // 出力: 1

  // z = 2; // エラー: "z" is read-only

  if (true) {
    const z = 2; // ブロックスコープ内で新たにzを宣言
    console.log(z); // 出力: 2
  }
  console.log(z); // 出力: 1 (ブロックスコープのため、元のzの値は変わらない)
}

testConst();


const obj = { key: 'value' };
console.log(obj.key); // 出力: value

obj.key = 'newValue'; // オブジェクトのプロパティは変更可能
console.log(obj.key); // 出力: newValue

// obj = {}; // エラー: "obj" is read-only