JavaScript変数の基礎を完全マスター！1時間で理解できる実践ガイド

こんにちは、とまだです。

JavaScriptを学び始めて、「変数とは？」「const、let、varの違いがわからない」と悩んでいませんか？

私もプログラミングを始めたばかりの頃、変数という概念がピンとこなくて苦労しました。でも実は、変数って日常生活でも使っているものなんです。

今回は、プログラミングスクール講師として数百名の初心者を指導してきた経験をもとに、JavaScript変数を15分で完全理解できる方法をお伝えします。

JavaScript変数とは？収納ボックスで理解する基本概念

JavaScriptの変数を理解するには、まず「収納ボックス」をイメージしてみてください。

家の中で、よく使うものを収納ボックスに入れて、ラベルを貼りますよね。

• 「文房具」と書いたボックスにはペンや消しゴム
• 「薬」と書いたボックスには常備薬
• 「工具」と書いたボックスにはドライバーやハンマー

JavaScriptの変数も、まさにこれと同じなんです。

データ（値）を入れる箱に、わかりやすい名前（変数名）をつけて、必要なときに取り出して使う。これが変数の基本的な考え方です。

なぜ変数が必要なのか

変数を使わないプログラミングを想像してみてください。

// 変数を使わない場合
console.log("山田太郎さん、こんにちは！");
console.log("山田太郎さんの年齢は25歳です");
console.log("山田太郎さんは東京都に住んでいます");

「山田太郎」という名前を3回も書いています。もし名前が変わったら、3箇所すべて修正が必要です。

これを変数を使って書き直すと：

// 変数を使った場合
const userName = "山田太郎";
console.log(userName + "さん、こんにちは！");
console.log(userName + "さんの年齢は25歳です");
console.log(userName + "さんは東京都に住んでいます");

名前を変更したいときは、1箇所を修正するだけで済みます。これが変数の力です。

JavaScript変数の3つの宣言方法：const・let・var完全比較

JavaScriptには、変数を宣言する方法が3つあります。

それぞれに特徴があるので、用途に応じて使い分けることが大切です。

const：変更できない変数（定数）

constは「constant（定数）」の略で、一度値を設定したら変更できない変数です。

const TAX_RATE = 0.1;  // 消費税率
const SITE_NAME = "Learning Next";  // サイト名

// これはエラーになります
// TAX_RATE = 0.08;  // TypeError: Assignment to constant variable.

実は、JavaScriptでは約80%のケースでconstが使えます。

なぜなら、多くの場合、変数の値を後から変更する必要がないからです。

let：変更可能な変数

letは値を後から変更できる変数です。

カウンターや一時的な計算結果など、値が変わる可能性があるものに使います。

let score = 0;  // ゲームのスコア
console.log("現在のスコア: " + score);

// ポイントを追加
score = score + 100;
console.log("更新後のスコア: " + score);  // 100

// さらにポイントを追加
score = score + 50;
console.log("最終スコア: " + score);  // 150

var：昔の宣言方法（現在は非推奨）

varは古いJavaScriptで使われていた宣言方法です。

現在では、さまざまな問題があるため使用は推奨されていません。

// varの問題点：同じ名前で再宣言できてしまう
var userName = "田中";
var userName = "佐藤";  // エラーにならない！

// letやconstなら、エラーになって問題に気づける
let age = 20;
// let age = 30;  // SyntaxError: Identifier 'age' has already been declared

どれを使えばいい？実践的な使い分けルール

私がプログラミングスクールで教えていた経験から、こんなルールをおすすめします。

1. 基本はconstを使う（約80%のケース）
2. 値を変更する必要がある場合のみletを使う（約20%のケース）
3. varは使わない（0%）

この3つのルールを守るだけで、バグの少ない読みやすいコードが書けるようになります。

実践！JavaScript変数の正しい使い方

では、実際に変数を使ってみましょう。

ここでは、よく使うパターンを紹介します。

基本的な変数の宣言と代入

// 文字列の変数
const greeting = "こんにちは";
const language = "JavaScript";

// 数値の変数
const currentYear = 2025;
let userAge = 25;

// 真偽値（true/false）の変数
const isLoggedIn = true;
let isLoading = false;

// 配列の変数
const fruits = ["りんご", "バナナ", "オレンジ"];

// オブジェクトの変数
const user = {
  name: "山田太郎",
  age: 25,
  city: "東京"
};

それぞれの型に応じて、適切な変数名をつけることが大切です。

実践的な例：ショッピングカートを作ってみよう

実際のWebアプリケーションでよく使われる例として、ショッピングカートを実装してみましょう。

// 商品情報（変更しないのでconst）
const product = {
  name: "JavaScript入門書",
  price: 2980
};

// カートの中身（商品を追加・削除するのでlet）
let cartItems = [];
let totalPrice = 0;

// 商品をカートに追加
cartItems.push(product);
totalPrice = totalPrice + product.price;

console.log("カートの中身:", cartItems);
console.log("合計金額:", totalPrice + "円");

// 割引クーポンを適用（10%OFF）
const DISCOUNT_RATE = 0.1;
const discountAmount = totalPrice * DISCOUNT_RATE;
const finalPrice = totalPrice - discountAmount;

console.log("割引額:", discountAmount + "円");
console.log("支払い金額:", finalPrice + "円");

このように、変更されない値（商品情報、割引率）はconst、変更される値（カートの中身、合計金額）はletを使い分けています。

よくある間違いと対処法

初心者がつまずきやすいポイントを3つ紹介します。

1. constで宣言した配列やオブジェクトの中身は変更できる

const numbers = [1, 2, 3];
numbers.push(4);  // これはOK！配列の中身は変更できる
console.log(numbers);  // [1, 2, 3, 4]

// numbers = [5, 6, 7];  // これはエラー！変数自体の再代入はできない

2. 変数名の付け方にはルールがある

// 良い変数名の例
const userName = "田中";      // キャメルケース（推奨）
const MAX_RETRY_COUNT = 3;    // 定数は大文字とアンダースコア
const isVisible = true;       // 真偽値はis/hasで始める

// 悪い変数名の例
// const 123name = "太郎";    // 数字から始まるのはNG
// const user-name = "花子";  // ハイフンは使えない
// const let = "予約語";      // 予約語は使えない

3. 変数のスコープ（有効範囲）を理解する

// グローバルスコープ（どこからでもアクセス可能）
const globalMessage = "どこからでも見える";

function showMessage() {
  // 関数スコープ（関数内でのみアクセス可能）
  const localMessage = "関数内でしか見えない";

  console.log(globalMessage);  // OK
  console.log(localMessage);   // OK
}

showMessage();
// console.log(localMessage);  // エラー！関数の外からはアクセスできない

JavaScriptマスターへの第一歩：変数から始めよう

ここまで読んでいただき、ありがとうございます。

JavaScript変数について、以下のポイントを押さえておけば、もう大丈夫です。

覚えておくべき3つのポイント

1. 変数は「データを入れる箱」
2. 基本はconst、変更が必要ならlet
3. わかりやすい変数名をつける

変数は、プログラミングの基礎中の基礎です。

でも、この基礎をしっかり理解しているかどうかで、その後の学習スピードが大きく変わってきます。

もし「もっと体系的にJavaScriptを学びたい」と思われた方は、Learning NextのJavaScriptカリキュラムをチェックしてみてください。

変数の次は「条件分岐」「繰り返し処理」「関数」と、段階的にステップアップできるよう設計されています。しかも月額約2,000円で、他の言語も含めて学び放題です。

まずは今回学んだ変数を使って、簡単なプログラムを書いてみましょう。

最初の一歩を踏み出したあなたなら、必ずJavaScriptをマスターできます。

一緒に頑張りましょう！