JavaScriptの変数とは？letとconstの違いと使い分けを初心者向けに徹底的に解説

プログラミングを学び始めて最初にぶつかる壁、それが「変数（へんすう）」です。

「数値や文字を入れておく箱」という説明はよく聞きますが、いざコードを書こうとすると、「let と const はどう違うの？」「どっちを使えば正解なの？」と混乱してしまう方も多いはず。

実は、変数の使い分けを理解することは、単にルールを覚えることではありません。「バグの少ない、安全で美しいプログラムを書くための思考法」を身につけることでもあります。

本記事では、JavaScriptの変数の基本から、現代の開発現場で必須となる let と const の使い分け、そして初心者が絶対に避けるべき古い書き方まで、プロの視点で徹底的に解説します。

変数とは？「データに名前をつけて保存する箱」
1. なぜ変数が必要なのか？
2. 変数を使うメリット
現代のスタンダード：letとconstの基本
1. const（定数：再代入不可）
2. let（変数：再代入可能）
【実践】変数の宣言・代入・参照のステップ
プロの現場の鉄則：なぜ「まずconst」なのか？
初心者がハマる！変数の命名ルール（識別子）
【警告】古い書き方「var」を使ってはいけない理由
変数の「型」について知っておこう
実践演習：変数を使った計算プログラム
信頼できる学習ステップ：次は何を学ぶべき？
まとめ：変数を制する者はJavaScriptを制す

変数とは？「データに名前をつけて保存する箱」

変数とは、数値や文字列などのデータを一時的に入れておくための「名前付きの箱」です。

なぜ変数が必要なのか？

例えば、消費税の計算をするプログラムを考えてみましょう。10%の税率をあちこちのコードに直書きしていると、税率が変わった時にすべての箇所を修正しなければなりません。

しかし、「税率」という名前の箱（変数）に入れておけば、その箱の中身を1箇所書き換えるだけで、プログラム全体の計算が更新されます。

変数を使うメリット

再利用ができる：同じ値を何度も書く必要がなくなる。
意味がわかりやすくなる： 0.1 と書くより taxRate と書くほうが、何のための数値か一目でわかる。
修正が楽になる：1箇所変えれば、それを使っているすべての場所に反映される。

現代のスタンダード：letとconstの基本

JavaScriptには変数を宣言するためのキーワードが主に2つあります。

const（定数：再代入不可）

一度入れたら中身を入れ替えることができない箱です。

const favoriteColor = "Blue";
favoriteColor = "Red"; // ❌ エラー！一度決めたら変えられません。

「ずっと変わらない値」や「途中で変えたくない大切な値」に使います。

let（変数：再代入可能）

後から中身を入れ替えることができる箱です。

let count = 1;
count = 2; // ⭕ OK！中身を入れ替えることができます。

「計算の途中で値が変わるもの」や「ループの回数」などに使います。

【実践】変数の宣言・代入・参照のステップ

変数を使うには、3つのステップがあります。

宣言（Declaration）

「これからこの名前の箱を使います」と宣言することです。

let userName;

代入（Assignment）

箱の中にデータを入れます。数学の「＝」とは違い、「右側の値を左側の箱に入れる」という意味になります。

userName = "なると";

参照（Reference）

箱の中身を取り出して使います。

console.log(userName); // "なると" と表示される

通常は、宣言と代入を同時に行う「初期化」という書き方をよく使います。
const userName = “なると”;

プロの現場の鉄則：なぜ「まずconst」なのか？

私が現場でコードを書く際、新人に必ず伝えるアドバイスがあります。それは「すべての変数を、まずは const で書こう」ということです。

9割の変数は書き換える必要がない

意外かもしれませんが、プログラムの中で「後から中身を入れ替える必要のある変数」はそれほど多くありません。

バグを未然に防ぐ「防波堤」

const を使うと、もし間違えて値を上書きしようとした時にエラーが出て教えてくれます。これが let ばかり使っていると、知らないうちに大切なデータが書き換えられてしまい、原因不明のバグに繋がることがあります。

読み手の負担を減らす

他のエンジニアがあなたのコードを読むとき、const で宣言されていれば「ああ、この値は最後まで変わらないんだな」と安心して読み進めることができます。

初心者がハマる！変数の命名ルール（識別子）

変数名には好きな名前をつけられますが、いくつか守らなければならないルールと、守ったほうが良いマナーがあります。

絶対ルール（エラーになるもの）

数字から始めてはいけない（例：1abc は ❌）
記号は $ と _ 以外使えない
JavaScriptの予約語（ if , for , function など）は使えない

業界のマナー「キャメルケース」

JavaScriptでは、複数の単語を繋げる際に2つ目の単語の頭文字を大文字にする「キャメルケース」が一般的です。

user_name（スネークケース：PHPなどで多い）
userName（キャメルケース：JavaScriptの標準）

名前に命をかける

a や b といった意味のない名前をつけるのは避けましょう。3ヶ月後の自分が読んでも意味がわかる名前をつけるのが、一流への第一歩です。

【警告】古い書き方「var」を使ってはいけない理由

古い解説サイトや書籍では var というキーワードで変数を紹介していることがあります。しかし、現代のJavaScriptでは var は原則禁止です。

再宣言ができてしまう

var は同じ名前の変数を何度でも宣言できてしまいます。

var price = 100;
var price = 200; // ⭕ なぜかOKになってしまう（バグの元）

スコープ（有効範囲）が曖昧

var は変数の有効範囲が非常に広く、意図しない場所で変数が使われてしまうトラブルが多発しました。

巻き上げ（Hoisting）の怪現象

宣言する前の変数を参照してもエラーにならずに underfined が返ってくるなど、直感に反する動きをします。これらを解決するために生まれたのが let と const なのです。

変数の「型」について知っておこう

変数に入れるデータには「型（種類）」があります。

数値（Number）: 123, 3.14
文字列（String）: "こんにちは", 'Hello'（引用符で囲む）
真偽値（Boolean）: true（真）, false（偽）
オブジェクト（Object）: 複雑なデータの集まり

JavaScriptは「動的型付け言語」と呼ばれ、箱に入れるデータの種類を厳密に指定する必要はありませんが、「今、この箱には何型のデータが入っているか」を常に意識することが重要です。

実践演習：変数を使った計算プログラム

学んだ知識を活かして、商品の合計金額を計算するプログラムを作ってみましょう。

// 消費税率は変わらないので const
const taxRate = 0.1;

// 商品価格（後で値引きするかもしれないので let）
let itemPrice = 1000;

// 100円引きセール！
itemPrice = 900;

// 税込価格を計算
const totalPrice = itemPrice * (1 + taxRate);

console.log("お支払い合計: " + totalPrice + "円");