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

JavaScript学習中の皆さん、こんな疑問を持ったことはありませんか？

「constって何？varやletとどう違うの？」 「定数を使ったほうがいいって聞くけど、いつ使えばいいの？」

そんな悩みを抱えている方も多いと思います。 でも大丈夫です！

この記事では、JavaScriptの**const（定数）**について初心者向けに詳しく解説します。 let、varとの違いから実用的な使い方まで、分かりやすく説明していきますね。

constを理解することで、より安全で読みやすいコードが書けるようになりますよ。 ぜひ最後まで読んで、JavaScriptの定数をマスターしましょう。

const（定数）って何？一度決めたら変わらない特別な箱

constの基本的な考え方

constは、値を変更できない定数を宣言するためのキーワードです。

簡単に言うと、「一度値を決めたら、後から変更できない特別な箱」のことです。 普通の変数とは違って、設定した値がずっと守られます。

2015年に登場した比較的新しい機能で、より安全なコードを書くために使われます。

基本的な書き方を覚えよう

constの基本的な宣言方法を見てみましょう。

// const の基本的な書き方
const 定数名 = 値;

// 具体例
const PI = 3.14159;
const APP_NAME = "My Application";
const MAX_USERS = 100;

console.log(PI);       // 3.14159
console.log(APP_NAME); // "My Application"
console.log(MAX_USERS); // 100

このコードでは、円周率、アプリ名、最大ユーザー数を定数として定義しています。 constを使うことで、これらの値が間違って変更されることを防げます。

プログラムの設定値など、「絶対に変わってほしくない値」に使うと安心ですね。

constの重要な特徴を理解しよう

constには、普通の変数とは違う特別なルールがあります。

// 1. 宣言時に必ず初期値が必要
const userName = "田中太郎"; // ✅ 正しい書き方

// const age; // ❌ エラー：値を設定しないとダメ

// 2. 再代入はできない
const price = 1000;
// price = 1500; // ❌ エラー：値を変更できない

// 3. 再宣言もできない
const color = "red";
// const color = "blue"; // ❌ エラー：同じ名前は使えない

// 4. ブロックスコープを持つ
if (true) {
    const localVariable = "ローカル";
    console.log(localVariable); // "ローカル"
}
// console.log(localVariable); // ❌ エラー：スコープ外では使えない

最初は厳しく感じるかもしれませんが、これらのルールが安全なコードを作ってくれます。 「一度決めたら変更しない」という約束を守ることで、予期しないバグを防げるんです。

let・varとの違いは？3つの宣言方法を比較してみよう

基本的な違いを確認しよう

JavaScriptには3つの変数宣言方法があります。 それぞれの特徴を見比べてみましょう。

// var（古いタイプ）
var oldStyle = "古いスタイル";
oldStyle = "変更可能";     // ✅ 再代入できる
var oldStyle = "再宣言";   // ✅ 再宣言もできる

// let（新しいタイプ）
let modernStyle = "モダンスタイル";
modernStyle = "変更可能";  // ✅ 再代入できる
// let modernStyle = "再宣言"; // ❌ 再宣言はできない

// const（定数タイプ）
const constantStyle = "定数スタイル";
// constantStyle = "変更不可"; // ❌ 再代入できない
// const constantStyle = "再宣言"; // ❌ 再宣言もできない

console.log(oldStyle);      // "再宣言"
console.log(modernStyle);   // "変更可能"
console.log(constantStyle); // "定数スタイル"

varは何でもできちゃいますが、逆に危険です。 letは適度に制限があって使いやすく、constは最も厳しいルールで安全性を保ちます。

初心者の方は、まずletとconstの使い分けを覚えることをおすすめします。

スコープの違いが重要

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

// varは関数スコープ、let・constはブロックスコープ
function scopeTest() {
    // varの場合
    if (true) {
        var varVariable = "var変数";
    }
    console.log(varVariable); // "var変数" - 関数内どこでも使える
    
    // let・constの場合
    if (true) {
        let letVariable = "let変数";
        const constVariable = "const変数";
    }
    // console.log(letVariable);   // ❌ エラー：ブロック外では使えない
    // console.log(constVariable); // ❌ エラー：ブロック外では使えない
}

scopeTest();

varは関数全体で使えちゃうので、予期しない場所で値が使われることがあります。 letとconstは、{}の中だけで使えるので、より安全に管理できます。

実際のプログラムでも、この違いはとても重要になってきます。

ループでの動作を見てみよう

特にループ処理では、この違いが顕著に現れます。

// より実用的な例
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log("var:", i), 100); // "var: 3" が3回出力
}

for (let j = 0; j < 3; j++) {
    setTimeout(() => console.log("let:", j), 200); // "let: 0", "let: 1", "let: 2"
}

for (const k of [0, 1, 2]) {
    setTimeout(() => console.log("const:", k), 300); // "const: 0", "const: 1", "const: 2"
}

varだと予期しない結果になりがちですが、letやconstなら期待通りの動作をします。 このように、新しい宣言方法の方が直感的で分かりやすいんです。

constでオブジェクトや配列を扱うときの注意点

オブジェクトの中身は変更できる？

constで宣言したオブジェクトや配列には、実は面白い特徴があります。

// オブジェクトの場合
const user = {
    name: "田中太郎",
    age: 30,
    email: "tanaka@example.com"
};

console.log("初期ユーザー:", user);

// プロパティの変更は可能
user.age = 31;
user.city = "東京";
delete user.email;

console.log("変更後ユーザー:", user);
// {name: "田中太郎", age: 31, city: "東京"}

// ただし、オブジェクト自体の再代入は不可
// user = {}; // ❌ エラー：オブジェクト全体は変更できない

constは「箱そのもの」を変更不可にしますが、「箱の中身」は変更できます。 userという箱は変更できませんが、user.ageのような中身は変更可能なんです。

これはちょっと不思議に感じるかもしれませんが、とても実用的な仕組みです。

配列でも同じ仕組み

配列でも同じことが起こります。

// 配列の場合
const fruits = ["りんご", "バナナ", "オレンジ"];
console.log("初期配列:", fruits);

// 配列の要素変更は可能
fruits.push("ぶどう");
fruits[0] = "青りんご";
fruits.pop();

console.log("変更後配列:", fruits);
// ["青りんご", "バナナ", "オレンジ"]

// ただし、配列自体の再代入は不可
// fruits = []; // ❌ エラー：配列全体は変更できない

fruitsという配列の箱は変更できませんが、中に入っている果物は自由に変更できます。 pushで追加したり、要素を変更したりしても大丈夫なんです。

完全に変更不可にしたい場合

もし本当に中身も変更できないようにしたい場合は、Object.freeze()を使います。

// Object.freeze()を使って完全に変更不可にする
const frozenUser = Object.freeze({
    name: "佐藤花子",
    age: 25
});

// プロパティの変更を試行（無視される）
frozenUser.age = 26;        // 変更されない
frozenUser.city = "大阪";   // 追加されない

console.log("凍結オブジェクト:", frozenUser);
// {name: "佐藤花子", age: 25}

Object.freeze()を使うと、オブジェクトの中身も含めて完全に固定されます。 設定ファイルなど、絶対に変更されてはいけないデータに使うと安心ですね。

いつconstを使う？いつletを使う？適切な使い分け方法

constを使うべき場面

constは以下のような場面で威力を発揮します。

// ✅ constを使うべき場面

// 1. 設定値や定数
const API_BASE_URL = "https://api.example.com";
const MAX_RETRY_COUNT = 3;
const DEFAULT_TIMEOUT = 5000;

// 2. 関数の定義
const calculateTax = (price, rate) => price * rate;
const formatCurrency = (amount) => `¥${amount.toLocaleString()}`;

// 3. 変更されないオブジェクト・配列（中身は変更可能）
const config = {
    api: {
        baseUrl: API_BASE_URL,
        timeout: DEFAULT_TIMEOUT
    },
    features: {
        darkMode: true,
        notifications: false
    }
};

const supportedLanguages = ["ja", "en", "ko", "zh"];

// 4. DOM要素の参照
const submitButton = document.getElementById('submit');
const userForm = document.querySelector('#user-form');

基本的に「変更する予定がないもの」にはconstを使いましょう。 設定値、関数、DOM要素など、一度決めたら変わらないものが対象です。

letを使うべき場面

一方、letは値が変わる可能性があるときに使います。

// ✅ letを使うべき場面

// 1. 値が変更される変数
let counter = 0;
let userName = "";
let isLoggedIn = false;

function updateCounter() {
    counter++;
    console.log("カウンター:", counter);
}

// 2. ループ変数
for (let i = 0; i < 5; i++) {
    console.log("ループ:", i);
}

// 3. 条件に応じて値が変わる変数
let message;
if (isLoggedIn) {
    message = "ようこそ！";
} else {
    message = "ログインしてください";
}

// 4. 一時的な計算結果
let total = 0;
const prices = [100, 200, 300];

for (const price of prices) {
    total += price;
}

console.log("合計:", total);

カウンター、ユーザー入力、計算結果など、「値が変わる可能性があるもの」にはletを使います。

varは使わないのがおすすめ

現代のJavaScriptでは、varの使用は避けることをおすすめします。

// ❌ varは現代的なJavaScriptでは避けるべき

// 問題のある例
function problematicVar() {
    console.log("varの値:", varVariable); // undefined（予期しない動作）
    
    if (true) {
        var varVariable = "値";
    }
    
    console.log("varの値:", varVariable); // "値"（ブロックスコープが効かない）
}

// より良い書き方
function betterApproach() {
    let letVariable;
    
    if (true) {
        letVariable = "値";
    }
    
    console.log("letの値:", letVariable); // "値"（予測しやすい動作）
}

problematicVar();
betterApproach();

varは古い仕組みで、予期しない動作を引き起こすことがあります。 letとconstを使うことで、より安全で分かりやすいコードが書けますよ。

実用的な使用例で理解を深めよう

設定管理での活用

実際のアプリケーションでは、このように設定を管理します。

// アプリケーション設定の例
const APP_CONFIG = Object.freeze({
    NAME: "Task Manager",
    VERSION: "1.2.0",
    API: {
        BASE_URL: "https://api.taskmanager.com",
        ENDPOINTS: {
            USERS: "/users",
            TASKS: "/tasks",
            AUTH: "/auth"
        }
    },
    UI: {
        THEME: "light",
        LANGUAGE: "ja",
        ITEMS_PER_PAGE: 20
    },
    VALIDATION: {
        MIN_PASSWORD_LENGTH: 8,
        MAX_USERNAME_LENGTH: 20,
        EMAIL_PATTERN: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    }
});

このように設定をまとめることで、アプリ全体で一貫した値を使えます。 Object.freeze()で完全に固定しているので、間違って変更される心配もありません。

設定を使う関数も簡潔に書けます。

// 設定の使用例
function validatePassword(password) {
    if (password.length < APP_CONFIG.VALIDATION.MIN_PASSWORD_LENGTH) {
        return {
            valid: false,
            message: `パスワードは${APP_CONFIG.VALIDATION.MIN_PASSWORD_LENGTH}文字以上で入力してください`
        };
    }
    return { valid: true };
}

function buildApiUrl(endpoint) {
    return `${APP_CONFIG.API.BASE_URL}${APP_CONFIG.API.ENDPOINTS[endpoint]}`;
}

console.log("ユーザーAPI URL:", buildApiUrl("USERS"));
console.log("パスワード検証:", validatePassword("abc123"));

設定が一箇所にまとまっているので、メンテナンスが楽になります。

関数とクラスの定義

関数やクラスの定義でもconstが活躍します。

// 関数定義でのconst使用
const MathUtils = {
    // 円の面積を計算
    calculateCircleArea: (radius) => {
        const PI = 3.14159;
        return PI * radius * radius;
    },
    
    // 複利計算
    calculateCompoundInterest: (principal, rate, time, frequency = 1) => {
        return principal * Math.pow((1 + rate / frequency), frequency * time);
    },
    
    // 配列の平均値
    calculateAverage: (numbers) => {
        if (numbers.length === 0) return 0;
        const sum = numbers.reduce((acc, num) => acc + num, 0);
        return sum / numbers.length;
    }
};

このように関数をまとめたオブジェクトを作ると、関連する機能を整理できます。 constで定義することで、間違って関数が上書きされることを防げますね。

タスク管理クラスの例

実用的なクラスの例も見てみましょう。

// クラス定義での使用
const TaskManager = class {
    constructor() {
        this.tasks = [];
        this.nextId = 1;
    }
    
    addTask(title, priority = 'medium') {
        const task = {
            id: this.nextId++,
            title: title,
            priority: priority,
            completed: false,
            createdAt: new Date()
        };
        
        this.tasks.push(task);
        return task;
    }
    
    completeTask(taskId) {
        const task = this.tasks.find(t => t.id === taskId);
        if (task) {
            task.completed = true;
            task.completedAt = new Date();
        }
        return task;
    }
    
    getTasks(filter = 'all') {
        switch (filter) {
            case 'completed':
                return this.tasks.filter(task => task.completed);
            case 'pending':
                return this.tasks.filter(task => !task.completed);
            default:
                return [...this.tasks];
        }
    }
};

// 使用例
const taskManager = new TaskManager();
const area = MathUtils.calculateCircleArea(5);
const average = MathUtils.calculateAverage([10, 20, 30, 40, 50]);

console.log("円の面積:", area);
console.log("平均値:", average);

taskManager.addTask("レポート作成", "high");
taskManager.addTask("メール返信", "low");
console.log("タスク一覧:", taskManager.getTasks());

クラスをconstで定義することで、誤って上書きされることを防げます。 また、メソッド内でもconstを活用して、安全なコードを書いています。

ベストプラクティス：より良いコードを書くコツ

命名規則を統一しよう

定数を使うときは、一貫した命名規則を守ることが大切です。

// 定数の命名規則

// ✅ 良い例
const API_BASE_URL = "https://api.example.com";
const MAX_RETRY_COUNT = 3;
const USER_ROLES = Object.freeze({
    ADMIN: "admin",
    USER: "user",
    GUEST: "guest"
});

// ✅ 関数・オブジェクトはキャメルケース
const calculateTotalPrice = (items) => {
    return items.reduce((total, item) => total + item.price, 0);
};

const userPreferences = {
    theme: "dark",
    language: "ja"
};

// ❌ 避けるべき例
const api_url = "https://api.example.com";      // スネークケース
const Maxretrycount = 3;                        // 一貫性がない
const user_ROLES = { admin: "admin" };          // 混在

大文字の定数は設定値、キャメルケースは関数やオブジェクトに使うと統一感が出ます。 チーム開発では特に重要なポイントですね。

パフォーマンスも考慮しよう

constを使うことで、パフォーマンスの向上も期待できます。

// パフォーマンスを考慮したconst使用

// ✅ 関数外で定数を定義（再作成を避ける）
const CALCULATION_CONSTANTS = Object.freeze({
    PI: Math.PI,
    E: Math.E,
    GOLDEN_RATIO: (1 + Math.sqrt(5)) / 2
});

const REGEX_PATTERNS = Object.freeze({
    EMAIL: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    PHONE: /^\d{3}-\d{4}-\d{4}$/,
    ZIP_CODE: /^\d{3}-\d{4}$/
});

// ✅ 効率的な関数定義
const formatters = Object.freeze({
    currency: (amount) => `¥${amount.toLocaleString()}`,
    percentage: (value) => `${(value * 100).toFixed(1)}%`,
    date: (date) => date.toLocaleDateString('ja-JP')
});

よく使う定数やパターンは一度だけ作成して再利用します。 これにより、メモリ使用量とCPU負荷を削減できますよ。

エラーハンドリングにも活用

エラー処理でもconstが役立ちます。

// エラーハンドリングでのconst活用
const ErrorHandler = {
    // エラータイプの定数
    TYPES: Object.freeze({
        VALIDATION: "VALIDATION_ERROR",
        NETWORK: "NETWORK_ERROR",
        AUTH: "AUTHENTICATION_ERROR",
        UNKNOWN: "UNKNOWN_ERROR"
    }),
    
    // エラーメッセージの定数
    MESSAGES: Object.freeze({
        REQUIRED_FIELD: "必須項目が入力されていません",
        INVALID_EMAIL: "有効なメールアドレスを入力してください",
        NETWORK_TIMEOUT: "ネットワークタイムアウトが発生しました",
        AUTH_FAILED: "認証に失敗しました"
    }),
    
    // エラーハンドリング関数
    handle: (error, type = null) => {
        const errorType = type || ErrorHandler.TYPES.UNKNOWN;
        const timestamp = new Date().toISOString();
        
        const errorLog = {
            type: errorType,
            message: error.message || error,
            timestamp: timestamp,
            stack: error.stack || null
        };
        
        console.error("エラーログ:", errorLog);
        return errorLog;
    }
};

エラーの種類やメッセージを定数化することで、一貫したエラー処理ができます。 typoによるバグも防げるので、とても実用的ですね。

まとめ：constをマスターして安全なコードを書こう

JavaScriptのconst（定数）は、値の変更を防ぐことで安全で予測しやすいコードを書くための重要な機能です。

この記事でお伝えした重要なポイントをまとめると以下のようになります。

• constは一度設定したら変更できない定数を作る
• オブジェクトや配列の中身は変更可能
• 設定値、関数、DOM要素などにはconstを使う
• 値が変わる可能性があるときはletを使う
• varは現代のJavaScriptでは避けるべき

安全で読みやすいコードを書くために、constとletを適切に使い分けることが重要です。

まずは基本的なconst使用から始めて、実際のアプリケーション開発で活用してみてください。 constを使いこなすことで、バグの少ない安全なJavaScriptコードが書けるようになります。

// 今日から使ってみよう！
const message = "const学習完了！";
console.log(message);

// あなたのJavaScriptスキルがレベルアップしますように！

ぜひこの機会に、より安全で保守しやすいJavaScriptコードの書き方を身につけてみてくださいね。