JavaScript

JavaScriptの変数とは？let・const・varの違いを徹底解説！

はじめに

JavaScriptを学び始めたときに必ず出てくるのが「変数（へんすう）」です。
変数とは、データを一時的に保存しておくための“箱”のようなもの。

たとえば、ゲームでスコアやプレイヤー名を記録したり、
フォームで入力された情報を一時的に保存したりするときに使われます。

この記事では、初心者でも理解できるように👇
✅ 変数とは何か
✅ let・const・var の違い
✅ よくあるミスと注意点
をわかりやすく解説します！

変数とは？

変数とは「データを入れておける名前付きの箱」です。

📦 たとえば、次のようなイメージです。

変数名：score
中身：100

JavaScriptで変数を作る（＝宣言する）には、次のように書きます👇

let score = 100;

この例では、

  • 変数名 → score
  • 値 → 100
    を意味しています。

変数の基本構文

let 変数名 = 値;

📘 例：

let name = "Taro";
let age = 25;
let isStudent = true;

💡ポイント：

  • 文字は "ダブルクォーテーション" か 'シングルクォーテーション' で囲む
  • 数字はそのまま
  • true / false は 論理値（真偽値）

変数の宣言方法：let・const・var の違い

JavaScriptでは、変数を宣言するために3つのキーワードがあります👇

キーワード再代入再宣言特徴
let○×現在の主流。ブロックスコープ。
const××定数（値の変更不可）。
var○○古い書き方。スコープの扱いが特殊。

🔹 let：いちばんよく使う変数宣言

let message = "こんにちは";
message = "おはよう"; // 再代入OK
console.log(message); // → おはよう

✅ ポイント

  • let は再代入が可能（値を後から変更できる）
  • ただし、同じ名前で再宣言はできない
let message = "こんにちは";
let message = "おはよう"; // ❌ エラー！

🔹 const：値を変えたくないときに使う

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

const で宣言した変数は「定数（constant）」と呼ばれます。
一度代入すると変更できません。

const pi = 3.14;
pi = 3.14159; // ❌ エラー！

💡 ポイント：

  • 値が固定されているもの（設定値・URL・定義値など）に使うのが基本

🔹 var：昔の書き方（非推奨）

var name = "Taro";
var name = "Jiro"; // ✅ 再宣言できてしまう
console.log(name); // → Jiro

var はJavaScriptの古い書き方で、再宣言ができてしまうため
予期せぬバグが起きやすいのが欠点です。

💡 現代では、基本的に
👉 let と const のみを使いましょう！

スコープ（変数の有効範囲）を理解しよう

スコープとは、「変数が使える範囲」のことです。

{
  let local = "ブロック内だけ有効";
  console.log(local); // ✅ OK
}
console.log(local); // ❌ エラー：外から使えない

💡 let と const は「ブロックスコープ」を持ちます。
{} の中で宣言された変数は、その中でしか使えません。

一方、var は「関数スコープ」で、意図せず外からもアクセスできてしまうことがあります。
これが var が避けられる理由のひとつです。

変数の命名ルール

JavaScriptでは、変数名に使える文字・使えない文字のルールがあります👇

✅ 使える例

let userName;
let user_age;
let totalPrice;

❌ 使えない例

let 1user;     // 数字で始まるのはNG
let user-name; // ハイフンはNG（演算子とみなされる）

💡 命名のコツ

  • 英語を使う（日本語は避ける）
  • 単語をつなぐときは「キャメルケース」が基本
    例：userName, totalAmount, isStudent

よくあるエラーと対処法

エラー内容原因解決法
Uncaught ReferenceError宣言前に変数を使っている変数を先に宣言する
Assignment to constant variableconst に再代入しているlet に変更する
Identifier has already been declared同じ名前で再宣言している変数名を変更する

実践例：変数を使った簡単なスクリプト

<script>
  let name = prompt("あなたの名前を入力してください");
  alert("こんにちは、" + name + "さん！");
</script>

🖥 実行結果：

  1. 名前を入力すると
  2. 「こんにちは、〇〇さん！」とポップアップで表示されます 🎉

💡 変数を使うことで、ユーザーの入力を動的に扱うことができます！

まとめ：変数はプログラミングの基礎中の基礎！

JavaScriptの変数は、データを扱ううえで最も重要な概念です。

✅ 今日のまとめ

  • 変数はデータを入れる「箱」
  • let：再代入OK（柔軟）
  • const：再代入NG（固定値）
  • var：古い書き方（非推奨）
  • 変数名はキャメルケースでわかりやすく！

-JavaScript