【JavaScript入門】変数とは？ var・let・constの違いと使い分けを徹底解説
この記事の要約 JavaScriptの変数とはプログラミングを行う際に一時的に値を保持できる便利なもので、変数名を自分で決めてそちらに値を代入して使います。近年のJSはvarではなく、letとconstを使い分けて開発をするとよいです。
JavaScriptを学び始めて最初に出会う大きな壁が「変数」です。
「var、let、constのどれを使えばいいの？」
「数学のイコール（=）とは何が違うの？」
といった疑問をこの記事でスッキリ解決しましょう。
プログラムにメモを残す「コメント」の書き方
本題に入る前にコードの中にメモを残す「コメント」について学びましょう。コメントはプログラムの実行時には無視されるため、自分やチームメンバーへの伝言として活用します。
1行だけコメントするにはスラッシュを2つ書くと、その行の末尾までがコメントになります。
// ここはコメントです。実行されません。
let size = 27; // 行の途中から書くこともできます
複数行コメント長い説明を書きたい場合は、以下のように囲みます。
/*
チケット番号：12345
期日：2026年1月23日
このプログラムはdivの位置の○○を計算します。
*/
ポイントはコメントで「なぜこのコードを書いたのか」という意図を残すために書きますが、プログラムに慣れない内は積極的にこの行は何をしているコードなのか、自分だけ見るという前提でコメントを残して学習するとよいですよ！
変数について
JavaScriptにおける変数は「名前をつけて、一時的に保存しておくための箱」とイメージすると分かりやすいです。
// nameが変数名で値が瀬長
const name = "瀬長";
変数に値を代入するときは、記号の「=」を使います。ここで重要なルールがあります。プログラムの「命令（予約語や演算子など）」は、すべて半角の英数字と半角の記号で書かなければなりませんので注意しましょう。
ちなみに一般的に全角スペース「 」を使うとエラーになると言われていますが、さまざまなブラウザで試すとエラーにはなりませんでした。これは仕様が変わったのか、それともブラウザが気を利かせているのか、どちらかでしょう。
「=」は等しいという意味ではない？
プログラミングにおいて、「=（イコール）」は代入演算子と呼ばれます。数学の「左辺と右辺が等しい」という意味ではなく、「右側の値を左側の箱に入れる」という意味になり、これを「代入する」と言ったりします。
// 100という数値を、xという名前の箱に入れる
x = 100;
// xの中身を200に入れ替える（上書き）
x = 200;
最後にxを確認すると、値は200になっています。この「上書きされていく感覚」がプログラミングでは非常に重要です。
var / let / const の違いと使い分け
JavaScriptで変数を使うためには宣言と呼ばれる、簡単に言うと「この変数を使用します！」というコードが必要です。主に var / let / const を使います。
JavaScriptには変数を宣言するためのキーワードが3つあります。
| 種類 | 再宣言 （箱の作り直し） |
再代入 （中身の入れ替え） |
特徴・イメージ |
|---|---|---|---|
| var | 〇 |
〇 |
制限が緩い「古い書き方」です。意図せず同じ名前で箱を作り直せてしまうため、予期せぬバグの原因になりやすいのが欠点です。 |
| let | × |
〇 |
制限が適度にある「現代の標準」的な書き方です。計算の途中で中身を入れ替える必要がある変数に適しています。 |
| const | × |
× |
「定数」と呼ばれ、一度決めたら中身を変えられません。鉄のカゴで守られているイメージで、最も安全でバグが起きにくい種類です。 |
変数の「宣言」と「初期化」
『これからこの名前の変数を使うよ！』とコンピュータに伝えることを宣言と言います。そして、宣言した変数に最初の値を入れることを初期化と言います。
プログラミングで使う宣言とは？
「これからこの名前の変数を使うよ！」とコンピュータに予約を出す状態です。
let x; // 宣言（中身は undefined という空の状態）
x = 10; // 値の代入
// ただし、constは再代入不可なので値を入れないとエラーになります
const z;
変数の宣言で現在のJavaScriptはUnicode文字（日本語など）対応
僕は勘違いをしていましたが、JavaScriptって日本語の文字で変数を宣言しても大丈夫です。記事をAIにチェックさせて日本語も変数名に使えると指摘をいただいて、試してみたら実際にOKでした。
let 変数A1 = "これはOK";
alert(変数A1);
JavaScriptの注意点
昔から使われてるjsファイルや古い書き方などレガシーなものはvarで宣言された変数がある場合が多く、注意が必要です。
なぜ var は使われないのか？
var は同じ名前の変数を何度でも作り直せてしまいます（再宣言）。
var name = "シュェリー";
/*
この間に様々な処理が入るとします
*/
var name = "瀬長"; // エラーにならない（バグの元！）
複数人で開発をして、Aさんが変数名をnameとし、値はシュェリーという文字列で宣言しました。しかし、途中でBさんが変数名を同じnameで宣言してしまい、中身は瀬長としました。
もし、誰かがシュェリーという文字列を期待してnameを使うと瀬長に変わっているという現象が起こります。
大規模な開発では、知らないうちに誰かが同じ名前を使って変数を上書きしてしまうリスクがあるため、現在は特別な理由がない限り let か const を使うのが鉄則です。上の画像のvarのイメージのように、varはかなりオープンで許容範囲が広いため、エラーが出にくく、バグになりやすいのです。
constなのに中身が変わる？（参照型の注意点）
constは『再代入』を防ぐものであり、『中身の変更』まで完全に防げるわけではありません。 特に配列やオブジェクト（参照型といいます）の場合、constで宣言しても要素の追加や変更ができてしまいます。
const members = ["瀬長", "シュェリー"];
// × これはエラー（箱ごと入れ替えようとしているから）
members = ["新しい人"];
// 〇 これはOK（箱の中身をいじっているだけだから）
members[0] = "一高";
members.push("ホムラ");
変数の正体は「メモリの住所」
最後に、少しだけ踏み込んだ話をします。変数は「箱」とよく例えられますが、コンピュータの内部では「メモリ上の特定の場所（アドレス）」を指し示しています。「変数名」というラベルを貼ることで、私たちは複雑なメモリの住所を意識せずに、データを取り出したり保存したりできるのです。
この仕組みのおかげで、人間にとって理解しやすいプログラムを書くことができます。
現代のJavaScriptを使った開発では、まずは const を使い、どうしても値を書き換える必要がある場合だけ let を使うというスタイルが推奨されています。
この記事からみたよくある質問
- varはもう絶対に使ってはいけないのですか？
- これから書く新しいコードでは使うべきではありません。ただし、数年前に書かれた古いコードを修正する場合は、あえてvarのままにしておくこともあります（無理にletに変えると動かなくなることがあるため）。「新規開発なら使わない」と覚えましょう。
- 変数名に日本語は使えますか？
- 技術的には使えますが、推奨されません。海外のライブラリと相性が悪かったり、チーム開発で混乱を招く原因になります。ローマ字や英単語を使う癖をつけましょう。
- 結局、letとconstどちらを多く使えばいいですか？
- カウントアップなど、どうしても後で値を書き換える必要がある箇所だけletに変更するのが、バグを減らすコツです。
- constで宣言した配列の中身が変わってしまうのはなぜですか？
- JavaScriptのconstは「変数の名前とデータ（メモリの場所）の紐付け」を固定する機能だからです。配列やオブジェクトの場合、その中身（要素）まではロックされないため、追加や変更が可能になっています。