「constで宣言したら、その中身はもう変更できない」と思っている方が、時々いらっしゃいます。実はこれは誤解で、constが禁止しているのは「変数に別の値を再代入すること」だけです。配列やオブジェクトの中身を書き換えることは、constのままでも普通にできます。

実際に試してみる

const arr = [1, 2, 3];

arr.push(4);
console.log(arr); // [1, 2, 3, 4]

arr[0] = 100;
console.log(arr); // [100, 2, 3, 4]

constで宣言したarrに対して、pushで要素を追加したり、インデックスを指定して中身を書き換えたりしても、エラーにはなりません。実際に上のコードを実行すると、どちらも問題なく配列の中身が変わります。

では何が禁止されているのか

const arr = [1, 2, 3];
arr = [9, 9, 9]; // これはエラーになる
TypeError: Assignment to constant variable.

constが禁止しているのは、arr = [9, 9, 9]のように、変数arrが指し示す先を、まったく別の配列に付け替えることです。中身をいじることと、変数の指し示す先を変えることは、別の操作だと分けて考える必要があります。

オブジェクトでも同じです。

const obj = { name: "太郎" };
obj.name = "花子"; // OK、プロパティの書き換えはできる
console.log(obj); // { name: "花子" }

obj = { name: "次郎" }; // これはエラーになる

なぜこの誤解が起きやすいのか

constという単語を素直に読むと「定数（constant）＝変わらない値」という印象を受けます。数値や文字列のような値であれば、確かにconstで宣言すると実質的に変更する手段がありません（const x = 5; x = 6;は再代入エラーになりますし、数値そのものを書き換える操作もそもそも存在しません）。

ところが配列やオブジェクトの場合、変数に入っているのは値そのものではなく「どこにその配列があるか」という参照（住所のようなもの）です。constが固定するのは、この「住所」の方だけです。住所が指している先の建物（配列やオブジェクトの中身）をリフォームすることまでは止めていません。

実務での付き合い方

「constにしておけば安全」という感覚だけで配列やオブジェクトを扱っていると、意図せず中身を書き換えてしまうコードに気づきにくくなります。本当に中身まで変更されたくない場合は、constだけに頼らず、Object.freeze()で凍結する、あるいは変更したい時は元のデータをコピーしてから新しいデータを作る、といった書き方を選ぶ必要があります。

const frozen = Object.freeze([1, 2, 3]);

frozen[0] = 999; // 単純な代入は、通常のNode.jsスクリプトだとエラーにならず黙って失敗する
console.log(frozen); // [1, 2, 3]（変わっていない）

frozen.push(4); // pushは失敗すると必ずエラーを投げる（strictモードかどうかに関わらず）
TypeError: Cannot add property 3, object is not extensible

⚠️ ここで言う「黙って失敗する」は、"use strict"を付けていない通常のスクリプトの場合の話です。import/exportを使うコード（ES Modules）や"use strict"を付けた環境では、単純な代入でも次のようにエラーになります。Next.jsのコードは基本的にこの形式（実質的に常にstrictモード）なので、実務ではむしろ「単純な代入も含めて全部エラーになる」と考えておく方が安全です。

TypeError: Cannot assign to read only property '0' of object '[object Array]'

まとめ

  • constが禁止しているのは「変数への再代入」だけで、配列やオブジェクトの中身の書き換えは禁止していない
  • 配列・オブジェクトは「参照」を扱っているため、constで固定されるのは参照先の住所であって、中身そのものではない
  • 本当に中身まで変更を防ぎたい場合はObject.freeze()などを別途使う

AIが生成したコードでconstが使われていても、「このデータは変更されない」と鵜呑みにせず、その後でpushやsplice、プロパティの直接代入がないかを確認するようにしています。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全24セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください