【入門編】 constの不変性とオブジェクトのミュータビリティ – JavaScript実践ガイド

こんにちは。フロントエンドの現場で長年コードを書き続けていると、「JavaScriptの変数って、意外と意地悪だよね」と感じることがよくあります。

特に初学者の皆さんが最初にぶつかる壁が、この「`const`で宣言したはずなのに、中身が変わっちゃう！」という現象です。公式マニュアルを見ると「`const`は定数です」と書かれていますが、実際にコードを書いてみると「あれ？値が書き換わってる……壊れたかな？」と不安になりますよね。

結論から言います。あなたのコードは壊れていません。JavaScriptの仕様通りです。

今日は、この「`const`の正体」について、少しだけ視点を変えて紐解いていきましょう。

—

よく「変数は値を入れる箱」と例えられますが、`const`を理解するには、少し別のイメージを持ったほうがうまくいきます。

「メモ帳に書かれた名前（タグ）」を想像してみてください。

`const`で宣言するということは、「このメモ帳に書いた名前は、一度決めたら他のものには書き換えないよ！」と誓うことです。
例えば、`const myBag = “リュック”` と書いたら、「`myBag`という名前は、一生この『リュック』という実体を指し示すものだ」と決めたことになります。

後から `myBag = “ハンドバッグ”` と書き換えようとすると、JavaScriptは「おいおい、さっき『一生変えない』って言ったじゃないか！」と怒ってエラーを出します。これが`const`の不変性です。

—

では、なぜオブジェクト（中身がいろいろ入った箱のようなもの）だと話が変わるのでしょうか。

ここで先ほどの「名札」のイメージを思い出してください。
オブジェクトを`const`で宣言するというのは、「この名札は、このオブジェクトという『大きな引き出し』に固定する！」と決めるだけなんです。

引き出しの中身（プロパティ）を入れ替えることは、名札の付け替えとは別の話ですよね。

// 「user」という名札を、この引き出し（オブジェクト）に固定します
const user = {
name: “たろう”,
age: 25
};

// 中身を書き換えることは、「名札を別の引き出しに付け替える」ことではないのでOK！
user.age = 26;

console.log(user.age); // 26 に変わりました！

// でも、名札そのものを別のものに変えようとするとエラーになります
// user = { name: “じろう” }; // これは「名札を別の引き出しに付け替えようとしている」のでNG！

つまり、「名札（変数）」を固定しているだけで、「中身（引き出しの中身）」まではロックしていないのです。これが、JavaScriptが「参照」という仕組みを使っている理由です。

—

「ややこしいから、中身も全部ロックしてくれればいいのに！」と思うかもしれません。でも、これには現場ならではの深い理由があります。

もし`const`ですべてをロックしてしまうと、開発現場で非常に困ったことが起きます。

柔軟性がなくなる: 例えば、大きなアプリを作っているとき、ユーザーのステータスを少しだけ更新したいという場面は山ほどあります。そのたびに「新しいオブジェクトを丸ごと作り直す」なんてことをしていたら、プログラムが非常に重くなってしまいます。
メモリの無駄遣い: 毎回新しいデータを作り直すと、古いデータの掃除（ガベージコレクション）が追いつかず、ブラウザが重くなる原因になります。

現場のエンジニアは、「名札（変数）」を変えないことで「この変数が何を指しているか」を安定させつつ、「中身」を書き換えることで処理を効率化しているのです。

—

とはいえ、意図せず中身が書き換わってしまうのはバグの元です。もし「絶対に中身も変えさせたくない！」という強い意志がある場合は、JavaScriptが用意してくれている`Object.freeze()`という魔法を使いましょう。

const car = Object.freeze({
brand: “Toyota”,
model: “Prius”
});

// freeze（凍結）されているので、中身の変更を試みても無視されます
car.model = “Corolla”;

console.log(car.model); // “Prius” のまま！

—

「`const`なのに書き換わっちゃう！」と疑問に思ったあなたは、JavaScriptの挙動を深く見つめようとしている、とても素敵なエンジニアの卵です。

最初は「名札」と「中身」を分けるイメージを持つだけで十分です。慣れてくれば、自然と「あ、ここは名札を固定したいだけだな」「ここは中身も凍結しておくべきだな」と、手が勝手に判断できるようになります。

現場のコードも、実はこうやって一つひとつ小さな積み重ねで作られています。あまり難しく考えず、まずはこの「名札と引き出し」のイメージを大切に、コードを書いてみてくださいね。

困ったときはいつでもここに戻ってきてください。応援していますよ！