PR

【JavaScript】let・const・var の違いとは？初心者向けに使い分けを3分で整理

JavaScript

JavaScriptの変数宣言を学ぶと、let と const と var の違いで迷いやすいです。が、結論からいうと、いま新しく書くコードでは「基本は const、再代入が必要なときだけ let、var は古いコードを読むための知識」と考えれば大丈夫です。

ただし、3つの違いを曖昧なまま使うと、変数のスコープや再宣言の挙動で混乱しやすくなります。この記事では、let・const・var の違い、使い分け、よくあるつまずきを初心者向けに整理します。

迷ったら、まず const で書けないかを考えるのがいちばん実務的です。

スポンサーリンク

結論：let・const・var の違いはここだけ押さえればOK

宣言方法スコープ再代入再宣言使いどころ
var関数スコープできるできる古いコードを読むとき
letブロックスコープできるできない値が変わる変数
constブロックスコープできないできない値を固定したいとき

ポイント 「スコープ」と「再代入できるか」で見分けると整理しやすいです

1. var は古い書き方で、挙動が少し特殊

var は昔からある変数宣言です。いまでも古いJavaScriptコードではよく見かけますが、ブロックスコープを持たないため、初心者が混乱しやすい書き方でもあります。

if (true) {
  var message = "varで宣言";
}

console.log(message); // varで宣言

この例では、if 文の中で宣言した message を外でも使えています。これは var が { } のブロックではなく、関数単位で有効になるためです。

さらに var は同じスコープで再宣言もできるので、意図しない上書きが起きやすくなります。

var count = 1;
var count = 2;

console.log(count); // 2

この柔らかさが便利な場面もありますが、現在の開発ではバグの原因になりやすいため、新しく書くコードではあまり使いません。

2. let は「あとで値が変わる変数」に使う

let はブロックスコープを持つ変数宣言です。つまり、if 文や for 文などの { } の中で宣言すると、その外では使えません。

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

// console.log(total); // ReferenceError

また、let は再代入できます。

let score = 0;

score = 100;

console.log(score); // 100

そのため、カウントアップや入力値の更新など、途中で値が変わる前提の変数に向いています。

3. const は「基本の選択肢」

const も let と同じくブロックスコープです。違いは、再代入できないことです。

const taxRate = 0.1;

// taxRate = 0.2; // TypeError

一度決めた値を後から変えたくないときに使うことで、「この値は書き換えないつもりです」という意図がコードから伝わります。

ただし、ここで1つだけ勘違いしやすい点があります。const は「中身が完全に不変」という意味ではありません。再代入できないのは変数そのもので、オブジェクトや配列の中身は変更できます。

const user = {
  name: "田中"
};

user.name = "佐藤";

console.log(user.name); // 佐藤

この性質まで知っておくと、const への苦手意識がかなり減ります。

4. どう使い分ければよいのか

実務でも学習でも、使い分けは次のルールでほぼ十分です。

  • 基本は const
  • あとで値を入れ替えるなら let
  • var は古いコードを読むときの知識

たとえば、APIのURLや設定値、固定のメッセージなどは const に向いています。ループ回数や状態の更新などは let が自然です。

変数の有効範囲まで含めて理解したい方は、JavaScriptのスコープの記事もあわせて読むと、より整理しやすくなります。

5. よくあるつまずき

宣言前に使おうとしてエラーになる

let と const は、宣言より前で使うとエラーになります。これは不具合ではなく、安全のための仕様です。

// console.log(price); // ReferenceError
let price = 500;

const なのに中身を書き換えられる

const は再代入を禁止するだけなので、配列の push やオブジェクトのプロパティ変更はできます。ここで「壊れている」と感じやすいですが、仕様どおりです。

var を使っていて思わぬ場所で値が見えてしまう

古いサンプルコードをそのまま写すと、if 文の外でも値が使えてしまい、なぜ動くのか分からなくなることがあります。そういうときはまず「var だからかもしれない」と疑うと解決しやすいです。

補足：コードと実務場面で見る let・const・var の選び方

ここまでで let・const・var の基本的な違いを整理しました。ここでは、実際にコードを書いているときに迷いやすい場面を、もう少し具体的に見ていきます。

特に初心者の方がつまずきやすいのは、「値を変えられるか」だけで判断してしまうことです。もちろん再代入できるかどうかは大事ですが、実務ではそれと同じくらい「その変数がどこから見えるか」も重要になります。

まずは次の画像で、var と let の見え方の違いを確認してください。コードそのものは短いですが、JavaScriptの変数宣言で混乱しやすいポイントが詰まっています。

JavaScriptのvarとletのスコープ差をコードと実行結果で示した図
varはブロックの外からも見えますが、letはブロックの外では使えません。

この画像で見てほしいのは、if の中で宣言した変数が、外側から使えるかどうかです。var で宣言した oldName は外側でも表示されますが、let で宣言した newName は外側で参照すると ReferenceError になります。

一見すると、外側でも使える var のほうが便利に見えるかもしれません。しかし、実務では「思ったより広い範囲から変数が見えてしまう」ことがバグにつながります。たとえば、画面の入力チェック、一覧の絞り込み、フォームの送信処理などでは、同じ名前の変数を別の場所で使ってしまうことがあります。そのとき、変数の有効範囲が広すぎると、どこで値が変わったのか追いかけにくくなります。

そのため、今から新しくJavaScriptを書くなら、まずは const を基本にして、値を後から入れ替える必要がある場合だけ let を使うのが安全です。var は「古いコードを読むために知っておくもの」と考えると、かなり整理しやすくなります。

JavaScriptのlet const varの選び方を初心者向けに整理した比較表
新しく書くコードでは、constを基本にして、値が変わるときだけletを選ぶと整理しやすくなります。

この図では、迷ったときの判断順を示しています。最初に「その値は後から変わるか」を考えます。変わらないなら const、変わるなら let、古いコードを読むときだけ var を理解する、という流れです。

たとえば、消費税率、APIのURL、HTML要素を取得した結果など、基本的に差し替えない値は const が向いています。一方で、クリック回数、フォーム入力の途中状態、ループの中で更新する合計値などは let が向いています。

const taxRate = 0.1;
let total = 0;

for (const price of [100, 200, 300]) {
  total += price;
}

console.log(total); // 600

この例では、taxRate のように変わらない値は const、total のように後から加算していく値は let にしています。こうして役割を分けると、後から読んだ人も「この値は変わるのか、変わらないのか」をすぐ判断できます。

よくあるミスは、すべてを何となく let で書いてしまうことです。動きはしますが、変わらないはずの値まで再代入できる状態になってしまいます。逆に、すべてを const にしてしまうと、カウントや合計のように値を更新する処理で困ります。大事なのは、宣言方法を暗記することではなく、変数の役割に合わせて選ぶことです。

実務でよく見る場面

実際の開発では、const は「参照先を変えないもの」によく使います。たとえば、フォーム要素を取得した結果、APIのエンドポイント、画面に表示する固定メッセージなどです。これらは一度決めたら別の値に差し替えないため、const にしておくと読み手が安心できます。

let は、処理の途中で値が変わること自体に意味がある場面で使います。たとえば、検索条件を組み立てる途中の文字列、合計金額、ページ番号、バリデーション結果などです。あとで値が変わることが分かっているなら、let を使う理由があります。

var は、古い記事や古い社内システムのコードを読むときに出てきます。新しく書くコードでは避けることが多いですが、既存コードを保守する場面では、var がなぜ外側から見えてしまうのかを理解しておく必要があります。

迷ったときのチェックリスト

  • その値を後から入れ替える必要がないなら、まず const を選ぶ
  • カウントや合計のように値を更新するなら、let を選ぶ
  • 古いコードを読むときだけ、var の関数スコープに注意する
  • 同じ名前の変数を近い場所で何度も使っていないか確認する

この違いが分からないと困ること

変数宣言の違いを曖昧にしたままだと、最初は動いているように見えても、少しコードが長くなった時点で原因を追いにくい不具合が出ます。たとえば、同じ画面の中で検索条件、並び替え条件、入力チェック結果を扱っているとき、意図しない場所で変数が上書きされると、表示結果だけがおかしく見えることがあります。

このような不具合は、文法エラーとしてすぐ止まるとは限りません。画面は表示されるのに、検索結果だけ違う、ボタンを2回押したときだけ値が変になる、という形で現れることがあります。だからこそ、最初から変数の範囲を狭くし、変えない値は変えられないようにしておくことが大切です。

実務では、コードを書いた本人だけでなく、あとから別の人が読むことも多いです。const が使われていれば「この値は基本的に変わらない」、let が使われていれば「後で変わる可能性がある」と読み取れます。宣言方法そのものが、コードを読む人への小さなメッセージになります。

この考え方は、JavaScriptのスコープ や function（関数） を学ぶときにもつながります。変数がどこから見えるのか、どこで値が変わるのかを意識できると、JavaScriptのコードはかなり読みやすくなります。

もう少し実務寄りに考えると、変数宣言は「将来の自分が読み返したときのヒント」にもなります。数週間後に同じコードを見たとき、const で宣言されていれば、その値は途中で差し替えない前提だとすぐ分かります。

逆に let が使われている場合は、処理のどこかで値が変わる可能性を意識して読みます。デバッグするときも、最初から「この変数は更新されるものだ」と分かるため、確認すべき場所を絞り込みやすくなります。

初心者の段階では、まず「基本は const、必要なときだけ let、古いコードで var を読む」と決めておくと迷いが減ります。このルールだけでも、変数の上書きミスやスコープの勘違いをかなり減らせます。

小さなルールですが、コードが長くなるほど効果が出ます。変数宣言を丁寧に選ぶことは、バグを防ぐだけでなく、チームで読みやすいコードを書く第一歩になります。

関連して学びたい記事

まとめ

まとめ let・const・var の使い分け

  • var は古い書き方で、関数スコープを持つ
  • let は再代入できるブロックスコープの変数
  • const は再代入できないブロックスコープの定数
  • 新しく書くコードでは、基本は const、必要に応じて let を使う
  • var は主に古いコードを読むときに理解しておけば十分

JavaScriptの変数宣言は、最初にきちんと整理しておくと後の学習がかなり楽になります。特にスコープと再代入の違いを押さえておくと、関数やアロー関数、非同期処理を学ぶときにもつまずきにくくなります。

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