【JavaScript】定数（const）による堅牢な値の管理と再代入の防止

2026年1月22日

概要

JavaScript（ES6以降）において、値を保持するための最優先の選択肢は const です。 const は「定数」を定義し、一度代入された値の再代入を防ぐことで、意図しない値の上書きによるバグを未然に防ぎます。本記事では、設定値の定義や不変オブジェクトの取り扱いなど、実務的なシナリオでの const の活用法を解説します。

仕様（入出力）

入力: 消費税率、商品単価、APIのエンドポイントなどの固定値
出力:
1. 定数を使用した計算結果の出力
2. 文字列結合によるURL生成結果
3. 定数化された関数の実行ログ

基本の使い方

const は宣言と同時に初期値を設定する必要があります。その後、プログラム中で 変数名 = 値 のように代入を行おうとすると、ブラウザがエラーを出して実行を停止します。これによりデータの安全性が保たれます。

コード全文（HTML / JavaScript）

HTML (index.html)

検証用HTMLです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>const活用デモ</title>
    <script src="const-guide.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>システムログを確認してください</h1>
        <p>計算結果や設定値がコンソールに出力されます。</p>
    </div>
</body>
</html>

JavaScript (const-guide.js)

商品計算やシステム設定など、変更されるべきでない値を const で管理する例です。

/**
 * 定数（const）を使用した安全なコード設計例
 * 再代入が不可能な変数を定義します。
 */
const runConstExample = () => {
    // 1. 数値の定数化（マジックナンバーの排除）
    // 消費税率のような固定値は、全て大文字で書く慣習があります
    const TAX_RATE = 0.1;
    const ITEM_PRICE = 2980;
    
    // 計算結果も、その後変更しないならconstで宣言します
    const taxAmount = ITEM_PRICE * TAX_RATE;
    const totalAmount = ITEM_PRICE + taxAmount;
    
    console.log(`本体価格: ${ITEM_PRICE}円`);
    console.log(`税込価格: ${totalAmount}円`);


    // 2. 文字列の定数化と結合
    // APIのパスなど、分割管理される固定文字列
    const API_BASE = "https://api.myservice.com";
    const API_VERSION = "v1";
    const ENDPOINT = "users";

    // テンプレートリテラルを用いた結合
    const requestUrl = `${API_BASE}/${API_VERSION}/${ENDPOINT}`;
    console.log("リクエストURL:", requestUrl);


    // 3. 関数の定数化
    // 関数そのものが上書きされることを防ぎます
    const logSystemStatus = () => {
        const status = "OK";
        console.log(`システム状態: ${status}`);
    };

    logSystemStatus();
};

// 実行
runConstExample();

カスタムポイント

定数の命名規則: TAX_RATE のように、環境設定や物理定数など「プログラム開始前から決まっている絶対的な値」は全て大文字（アッパースネークケース）で記述すると、コードの可読性が高まります。一方で、totalAmount のように「計算結果として得られるが、その後は変わらない値」は通常のキャメルケースで記述するのが一般的です。

注意点

宣言と初期化の同時実行: const myData; のように値なしで宣言すると構文エラー（SyntaxError）になります。必ず const myData = 10; のように右辺を記述してください。
スコープ（有効範囲）: const はブロック { ... } の中で宣言すると、そのブロックの外からはアクセスできません。if文やfor文の中で宣言した定数が外で使えない点に注意してください。
オブジェクトのプロパティ変更: const config = { mode: "dark" }; と宣言した場合、config = {}; という再代入はエラーになりますが、config.mode = "light"; のように中身の変更は可能です。完全に変更不可にするには Object.freeze(config) を使用します。

応用

Object.freeze() による完全な定数化

オブジェクトの中身まで変更不可（イミュータブル）にする方法です。

// 設定オブジェクト
const APP_CONFIG = Object.freeze({
    THEME_COLOR: "#FF5722",
    MAX_RETRY: 3
});

// 以下の操作は無視されるか、strictモードではエラーになります
// APP_CONFIG.MAX_RETRY = 5; 

console.log(APP_CONFIG.MAX_RETRY); // 3 のまま

まとめ

JavaScriptを書く際は「まずは const で宣言できないか？」を常に考え、ループカウンタやトグルスイッチのように「どうしても変更が必要な場合」だけ let を使うようにしましょう。このルールを徹底することで、変数の値がどこで変わったかを追う必要がなくなり、デバッグ効率が飛躍的に向上します。

よかったらシェアしてね！