JavaScript: JavaScriptの変数
最終更新：2026-10-13
変数はデータを格納する箱のようなものです。各箱に名前を付け、データを入れたり出したり、いつでも交換したりできます。
1. 変数とは
名前の付いた箱の列を想像してください。「名前」という箱に「太郎」が入り、「年齢」という箱に25が入ります。中身は変わりますが、ラベルは同じまま — それが変数です。
JSでは、宣言キーワード（var / let / const）で変数を作成し、イコール記号で値を代入します：
HTML
<script>
var name = "太郎";
let age = 25;
const PI = 3.14;
</script>
varはES6以前の唯一の変数宣言方法でした。頭を悩ませる2つの動作があります：
- 関数スコープ —
ifやforブロック内で宣言されたvar変数は外側からもアクセスでき、直感に反します - ホイスティング —
var宣言はスコープの先頭に「持ち上げられ」ますが、代入はされません。宣言前に変数を使用してもエラーにならず（値はundefined）、微妙なバグにつながります
この2つの動作により、varはバグの温床となっています。モダンJSでは、varはletとconstに大きく取って代わられました。
2. let — ブロックスコープ、推奨されるデフォルト
letはES6（2015年）で導入され、varの2つの問題を修正しました：
- ブロックスコープ —
{}内でのみアクセス可能で、ブロックの外からはアクセスできない - ホイスティングなし — 宣言前に変数を使用するとエラーが発生する（テンポラルデッドゾーン）
日常開発では、再代入が必要な変数にはletを使いましょう。
3. const — 定数、再代入不可
constもブロックスコープを持ちますが、宣言時に代入が必要で、その後の再代入はできません。
注意：constが制限するのは「再代入」であり、「変更」ではありません。constがオブジェクトや配列を保持している場合、オブジェクトのプロパティや配列の要素は変更できます。変数を別のオブジェクトに向けることはできないだけです。
デフォルトはconstを使い、再代入が必要な場合にletに切り替える — これがベストプラクティスです。
4. 変数の命名ルール
- 英字、アンダースコア
_、ドル記号$で始める必要がある - 以降の文字は英字、数字、アンダースコア、ドル記号が使用可能
- 数字で始めることはできない
- JSのキーワード（
var、let、functionなど）は使用できない - camelCaseが推奨：
firstName、totalPrice
5. 複数の変数を宣言する
カンマで区切って複数の変数を一度に宣言できます：
HTML
<script>
let a = 1, b = 2, c = 3;
</script>
ただし、可読性のため、1行に1つの変数を宣言することが推奨されます。
▶ サンプル：varのホイスティングと関数スコープ
▶ 試してみよう▶ サンプル：letのブロックスコープ
▶ 試してみよう▶ サンプル：const定数
▶ 試してみよう▶ サンプル：var / let / const Comparison
▶ 試してみよう❓ よくある質問
Q constオブジェクトが変更できるなら、constの意味は何ですか？
A constは変数の参照が変わらないことを保証します。
personを別のオブジェクトに誤って再代入することはできませんが、既存のオブジェクトプロパティの変更は問題ありません。箱のラベルをロックするようなもの（この箱は常に「太郎の箱」）ですが、中身は自由に入れ替えられます。Q letとconst、いつどちらを使うべきですか？
A シンプルなルール：「この値は変わりますか？」と自問してください。変わらないならconst、変わるならletを使います。例えば、カウンターはlet、設定定数はconstを使います。実際には、letよりもconstをはるかに多く使うことになります。
Q varを今後も使えますか？
A 技術的には使えますが、使う理由はありません。letとconstはvarの完全なアップグレードで、varが必須でlet/constが動作しない場面はありません。レガシーコードでのvarの理解は問題ありませんが、新しいコードでは常にlet/constを使いましょう。
📖 まとめ
- 変数はデータを格納する箱で、宣言キーワード + 変数名 + 代入で作成する
varは関数スコープとホイスティングの問題がある — モダンJSでは避けるletはブロックスコープでホイスティングなし — 再代入が必要な場合に使用constはブロックスコープで再代入不可 — 宣言時に代入が必要constは再代入を防ぐが、オブジェクト/配列のプロパティや要素は変更可能- 優先順位：constが最優先、letが次点、varは避ける
📝 練習問題
- 基礎：
constであなたの名前を持つ定数SITE_NAMEを宣言し、letでvisitCountを0に設定して、両方の値をページに表示してください。 - 中級：ボタンを持つページを作成し、「訪問カウンター」をシミュレートしてください。クリックごとに
visitCountが1増加し、現在の値を表示します。letが再代入を許可し、constが許可しないことに注目してください。 - 上級：
constの学生オブジェクト{ name: "太郎", scores: [80, 90, 75] }を持つページを作成してください。その後、新しいスコア85を追加し、平均を計算し、名前を「花子」に変更してください — すべてconstを再代入せずに、オブジェクトの内容が変更可能であることを証明してください。
