JavaScript | 基礎構文:変数・定数 – let と const の違い

JavaScript
スポンサーリンク

まず「共通点」と「一言での違い」

letconst は、どちらも 「変数(名前付きの箱)を作るためのキーワード」 です。

共通しているのは、

  • ブロックスコープ({} の中だけ有効)
  • var より新しい書き方で、今の JavaScript では基本的にこの2つを使う

違いを一言で言うと、

  • let:あとから中身を変えていい箱
  • const:あとから中身を変えちゃダメな箱

です。

ここが重要です。
「変わる可能性がある値なら let」「変えない約束の値なら const
この軸で使い分けるのが、いちばんシンプルな考え方です。


let の特徴:中身を変えてよい「ふつうの変数」

基本的な使い方

let は、「あとから値を上書きしてよい変数」を作ります。

let count = 0;
console.log(count); // 0

count = count + 1;
console.log(count); // 1

count = 10;
console.log(count); // 10
JavaScript

同じ count という名前の箱の中身が、
0 → 1 → 10 と変わっているのが分かると思います。

「ユーザーの残高」「現在ページ番号」「クリックされた回数」など、
時間とともに変化するデータ を扱うときは、let が自然です。

宣言だけして、あとで入れることもできる

let message;
message = "こんにちは";
console.log(message); // こんにちは
JavaScript

「とりあえず箱だけ用意して、内容はあとで決めたい」というときも let でOKです。

スコープ(有効範囲)も押さえておく

let で作った変数は、{} の中だけで有効です。

if (true) {
  let x = 10;
  console.log(x); // 10
}

console.log(x); // エラー(x はここでは定義されていない)
JavaScript

これは const も同じですが、
let はブロックの中だけ有効な変数」 という感覚は持っておいてください。


const の特徴:中身を変えない「約束付きの変数」

基本的な使い方

const は、「一度代入した“参照”を変更できない変数」を作ります。

const pi = 3.14;
console.log(pi); // 3.14

pi = 3.1415; // エラー(再代入できない)
JavaScript

const で作った変数に対して、
もう一度 = で別の値を入れようとするとエラーになります。

「この値は、プログラムの途中で変えたら困る」というものは const にしたほうが安全です。
例:税率、定数、設定情報、DOM 要素の参照など。

宣言と同時に代入が必須

const は、宣言だけして値を入れないことはできません。

const x;      // エラー:初期値が必要
x = 10;
JavaScript

必ずこう書きます。

const x = 10; // OK
JavaScript

「const で変数を作る=その場で値を決める」
というルールだと思ってください。


初心者が必ずつまずくポイント:「オブジェクトや配列は変更できちゃう」問題

ここが一番ややこしいので、しっかり噛み砕きます。

const なのに中身が変えられるように見える例

const user = { name: "Taro", age: 20 };

user.age = 21;           // これはOK
console.log(user.age);   // 21

// でもこれはダメ
user = { name: "Hanako", age: 30 }; // エラー
JavaScript

「え、const なのに age 書き換えられてるじゃん!」と思いますよね。

ここで区別したいのは、

  • 変数 user が指している「オブジェクトそのもの」
  • そのオブジェクトの中の「プロパティ」(nameage

const で禁止されているのは
「変数が指している“オブジェクトそのもの”を、別のオブジェクトに差し替えること」 だけです。

中身のプロパティを変えることまでは禁止していません。

同じことが配列でも起きます。

const numbers = [1, 2, 3];

numbers.push(4);           // OK(配列の中身を変えている)
console.log(numbers);      // [1, 2, 3, 4]

numbers = [10, 20, 30];    // エラー(配列そのものを別のものに差し替えている)
JavaScript

どう理解すればいいか

イメージとしては、

  • const user = {...}
    → 「user というラベルは、このオブジェクトを指し続ける」という約束
  • そのオブジェクトの中身(age など)は可変

です。

ここが重要です。
const は「オブジェクトの中身を不変にする」のではなく、「変数がどのオブジェクトを指すかを固定する」だけ。
だから、オブジェクトのプロパティや配列の要素は変えられてしまう。

初心者のうちは、

  • 数値や文字列なら、「const にしたら完全に変えられない」
  • オブジェクトや配列は、「const でも中身の変更はできてしまう」

この違いを、頭の片隅に置いておいてください。


実務的な使い分けの基本方針

先に結論:基本は const、必要なところだけ let

最近の JavaScript では、
「まず const を使う。どうしても値を変える必要があるときだけ let にする」
という書き方が一般的です。

理由はシンプルで、

  • const は「この変数は途中で変わらない」と宣言してくれている
    → 読む人にとって安心感がある
    → 間違えて書き換えるバグを防げる
  • 本当に変えたいもの(カウンター、フラグなど)だけ let にすると、「変わるもの」が目立つ

からです。

具体例で見てみる

たとえば、配列の合計を計算したいとします。

悪い例(全部 let):

let numbers = [1, 2, 3];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
  sum = sum + numbers[i];
}
console.log(sum);
JavaScript

少し良くするなら、
「変えないもの」を const にします。

const numbers = [1, 2, 3]; // 配列の「参照」は変えない
let sum = 0;               // 合計は変えていく値

for (let i = 0; i < numbers.length; i++) {
  sum = sum + numbers[i];
}

console.log(sum);
JavaScript

さらにモダンに書くなら、
ループ変数 i もブロック内だけで使うものなので、

const numbers = [1, 2, 3];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}
JavaScript

という感じですね。

ここが重要です。
「変わらないもの」はどんどん const にする。
let で宣言されている変数は、「このあとどこかで値が変わるかもしれない」というサインになる。
この区別がついているコードは、読む人にとって理解しやすく、壊れにくいです。


よくある疑問をいくつか整理する

質問1:全部 let で書いちゃダメなの?

「とりあえず全部 let で書いておけば動くし、それでいいのでは?」と思うかもしれません。

動きます。
ですが、

  • どの変数が途中で変わるのか
  • どこでうっかり上書きしてしまっているのか

が分かりにくくなります。

const を使っておけば、

  • 「ここに入れた値は変わらないだろう」と信じて読める
  • もし誤って書き換えようとすると、その場でエラーになって気づける

ので、将来の自分を守るための“安全装置” になります。

質問2:オブジェクトや配列は全部 let にしたほうが分かりやすくない?

これもよく聞かれます。

「中身を変えるから let にしたほうが正直では?」と。

これはどちらもアリですが、
おすすめは次の感覚です。

  • 「この変数が指すオブジェクト自体を途中で別のものに差し替えるか?」
    → No(差し替えない)なら const
    → Yes(差し替えるかも)なら let

たとえば、

const user = { id: 1 }; // user という「枠」はそのまま
user.name = "Taro";     // 中身だけ増やす・変える
JavaScript

のような使い方なら const で良い、という考え方です。


まとめ:let と const の違い(初心者向けの核心)

最後に、いちばん大事なポイントだけを整理します。

letconst はどちらも「変数(名前付きの箱)を作るキーワード」。

let:あとから値を変えてよい。
カウンター、状態が変わっていくものなどに使う。

const:あとから再代入できない。
「この変数は途中で別の値に変わらない」という約束になる。
定数・設定・一度決めたら動かさない参照などに使う。

オブジェクトや配列を const にしても、「変数が指すオブジェクト自体」は変えられないだけで、「オブジェクトの中身」や「配列の要素」は変更できる点に注意。

実務的には、「まず const を使う。値を変える必要が出たところだけ let にする」方針が読みやすくて安全。

ここが重要です。
“変数が途中で変わるのか、変わらないのか” を let / const で明示することが、JavaScript のコードを理解しやすく、バグに強くするカギです。

練習としては、

「今まで全部 let で書いていたコード」を見直して、
「変えていない変数」を const に置き換えてみてください。

置き換える途中で、
「ここ、本当は変えないほうがよかったんだな」
「ここは変えてるから let のままだな」
と、自分のコードの“データの流れ”が、前よりはっきり見えてくるはずです。

タイトルとURLをコピーしました