JavaScriptの定数（const）とは？変数との違いを初心者向けに解説

みなさん、JavaScriptの学習を進めていて困ったことはありませんか？

「constって何？」 「変数とどう違うの？」 こんな疑問を持っている方、きっと多いですよね。

プログラミングを始めたばかりの方にとって、const（定数）と変数の違いはちょっと分かりにくいかもしれません。 でも大丈夫です！この記事で一緒に理解していきましょう。

この記事では、JavaScriptの定数（const）の基本的な使い方と変数（let、var）との違いを分かりやすく解説します。 実際のコード例を見ながら、使い分けのコツを学んでいきますね。

定数（const）って何？基本を知ろう

constは「変更できない箱」

constは「constant（定数）」の略で、一度値を設定すると変更できない箱のようなものです。

簡単に言うと、「この値はもう変えないよ」と決めて使う仕組みなんです。 一度決めたら、後から「やっぱり別の値にしよう」ということができません。

基本的な書き方

定数を使うときは、こんな風に書きます。

const userName = "田中太郎";
const maxScore = 100;
const isActive = true;

このように、constキーワードを使って値を決めます。 そうすると、その値は後から変更できなくなるんです。

定数の特徴まとめ

定数には、こんな特徴があります。

• 再代入不可: 一度設定した値は変更できない
• 宣言時に初期化必須: 作ると同時に値を入れる必要がある
• ブロックスコープ: 作った場所でのみ使える

これらの特徴のおかげで、間違いの少ないプログラムが書けるんです。

変数（let、var）との違いを見てみよう

constとletの基本的な違い

JavaScriptには、データを入れておく箱が3種類あります。 一番大きな違いは、値を後から変更できるかどうかです。

// const（定数）- 後から変更できない
const siteName = "マイサイト";
siteName = "新しいサイト"; // エラーになる！

// let（変数）- 後から変更できる
let userName = "田中太郎";
userName = "鈴木花子"; // これは大丈夫

letは値を後から変更できますが、constは変更できません。 constで決めた値を変えようとすると、エラーが出てしまいます。

varとの違いも知っておこう

varは古い書き方で、今はあまり使われません。

// var（古い変数の書き方）
var oldStyle = "古い書き方";

// let（新しい変数の書き方）
let newStyle = "新しい書き方";

// const（定数）
const constant = "変更不可";

varよりもletやconstの方が、思わぬエラーを防げるので推奨されています。 今から学ぶなら、letとconstを覚えておけば大丈夫です。

有効範囲（スコープ）の違い

それぞれの有効範囲も違います。

function example() {
    if (true) {
        var varExample = "varは関数全体で使える";
        let letExample = "letはブロック内だけ";
        const constExample = "constもブロック内だけ";
    }
    
    console.log(varExample); // 正常に動く
    console.log(letExample); // エラーになる
    console.log(constExample); // エラーになる
}

constとletはブロック内でのみ有効です。 varは関数全体で有効ですが、これが原因で思わぬバグが生まれることもあります。

どんな時に定数を使うの？

設定値や固定値に使おう

変更されることのない値には定数を使います。

// アプリの設定
const APP_NAME = "マイアプリ";
const VERSION = "1.0.0";
const MAX_USERS = 1000;

// 計算で使う固定値
const PI = 3.14159;
const TAX_RATE = 0.1;

このような値は、プログラムが動いている間に変わることがありません。 だから定数として決めておくのが適しています。

エラーメッセージや決まった文字

繰り返し使う文字列も定数として決められます。

// エラーメッセージ
const ERROR_MESSAGES = {
    INVALID_EMAIL: "メールアドレスの形式が正しくありません",
    EMPTY_FIELD: "必須項目が入力されていません",
    SERVER_ERROR: "サーバーエラーが発生しました"
};

// メニュー項目
const MENU_ITEMS = ["ホーム", "サービス", "お問い合わせ"];

このように定数を使うと、同じ文字を何回も書く必要がなくなります。 後で変更したい時も、1箇所を直すだけで済むんです。

HTML要素への参照

HTML要素への参照も定数として保存できます。

// HTML要素を取得して定数に保存
const submitButton = document.getElementById("submit-btn");
const inputField = document.querySelector(".input-field");
const resultArea = document.getElementById("result");

一度取得した要素は変わらないので、定数として保存するのがピッタリです。

どんな時に変数を使うの？

値が変わる可能性がある場合

一方で、変数（let）を使うべき場面もあります。

// カウンター
let count = 0;
count = count + 1; // 値が変わる

// 計算結果
let total = 0;
let price = 100;
total = total + price; // 値が変わる

このように、プログラムが動いている間に値が変わる可能性がある場合は変数を使います。

ユーザーからの入力値

ユーザーからの入力は変化するので、変数で管理します。

// ユーザーの入力値
let userName = "";
let email = "";
let message = "";

// 入力値の更新
userName = "山田太郎";
email = "yamada@example.com";

これらの値は、ユーザーの操作によって変わります。 だから変数として扱うのが適しています。

使い分けのコツを覚えよう

基本的な判断基準

迷った時は、この基準で判断してみてください。

• 値が変わらない場合: const（定数）を使う
• 値が変わる可能性がある場合: let（変数）を使う
• varは使わない: 現在は推奨されていない

**「まずはconstを考えて、必要な時だけletを使う」**という考え方がおすすめです。

よくある間違いと解決法

初心者の方がよく間違える点をご紹介します。

// 間違い：constで決めた値を変えようとする
const score = 0;
score = 100; // エラーになる！

// 正しい：letで決めて値を変える
let score = 0;
score = 100; // これなら大丈夫

constで決めた値は変更できないことを覚えておきましょう。 「後で値を変えるかも」と思ったら、letを使うのが安全です。

オブジェクトと配列の特別なルール

オブジェクトや配列をconstで決める場合は、ちょっと特別です。

// オブジェクトの場合
const user = {
    name: "田中太郎",
    age: 25
};

// 中身の変更はできる
user.name = "鈴木花子"; // これは大丈夫
user.age = 30; // これも大丈夫

// 配列の場合
const numbers = [1, 2, 3];

// 要素の追加・変更はできる
numbers.push(4); // これは大丈夫
numbers[0] = 10; // これも大丈夫

constで決めても、オブジェクトや配列の中身は変更できるんです。 constが守るのは「箱そのもの」で、「箱の中身」ではないと覚えておきましょう。

実際のプログラムで使ってみよう

簡単な計算機の例

実際のプログラムでの使い方を見てみましょう。

// 定数（変わらない値）
const OPERATIONS = {
    ADD: "+",
    SUBTRACT: "-",
    MULTIPLY: "*",
    DIVIDE: "/"
};

const MAX_DISPLAY_LENGTH = 10;

// 変数（変わる値）
let currentNumber = 0;
let previousNumber = 0;
let operator = "";

// 計算する関数
function calculate(num1, num2, op) {
    const result = eval(`${num1} ${op} ${num2}`);
    return result;
}

この例では、操作の記号や最大表示長などの固定値は定数として定義しています。 一方で、現在の数値や前の数値などの変化する値は変数として定義しています。

イベント処理の例

ボタンクリックなどの処理でも使い分けができます。

// 定数（HTML要素への参照）
const button = document.getElementById("myButton");
const output = document.getElementById("output");

// 変数（状態を管理）
let clickCount = 0;
let isProcessing = false;

// ボタンがクリックされた時の処理
button.addEventListener("click", function() {
    if (!isProcessing) {
        isProcessing = true;
        clickCount = clickCount + 1;
        output.textContent = `クリック回数: ${clickCount}`;
        isProcessing = false;
    }
});

HTML要素への参照は定数として保存し、クリック回数や処理状態などの変化する値は変数として管理しています。

注意点とコツをまとめ

分かりやすい名前をつけよう

読みやすいコードを書くための名前のつけ方です。

// 定数（大文字とアンダースコア）
const MAX_FILE_SIZE = 1024;
const API_BASE_URL = "https://api.example.com";

// 変数（キャメルケース）
let userName = "田中太郎";
let isLoggedIn = false;

定数は大文字とアンダースコア、変数はキャメルケースで書くのが一般的です。 こうすることで、コードを見ただけで定数か変数かが分かりやすくなります。

エラーを避けるためのコツ

よくあるエラーを避けるためのアドバイスです。

// 良い例：まずはconstを考える
const greeting = "こんにちは";
const users = ["田中", "鈴木", "佐藤"];

// 値を変更する必要がある場合のみlet
let currentUser = "";
let loginCount = 0;

**「迷ったらまずはconstを試して、エラーが出たらletに変える」**という方法がおすすめです。 この習慣をつけると、より安全なコードが書けるようになります。

まとめ

JavaScriptの定数（const）と変数（let、var）の違いについて学びました。

覚えておきたいポイント

• const: 値を変更しない場合に使う（定数）
• let: 値を変更する可能性がある場合に使う（変数）
• var: 現在は使わない（古い書き方）

使い分けの基準

• 設定値や固定値 → const
• ユーザー入力や計算結果 → let
• まずはconstを考えて、必要に応じてletを使う

これらの違いを理解すると、より安全で読みやすいJavaScriptコードが書けるようになります。 最初は「どっちを使えばいいの？」と迷うかもしれません。

でも大丈夫です！実際にコードを書きながら慣れていけば、自然に使い分けられるようになりますよ。

ぜひ今日から、constとletを使い分けてみてくださいね！