再代入できない const を活用｜コードで実践

再代入できない const を活用とは

const は束縛を固定するが、配列やオブジェクトの中身は変更できることを体感する。本レッスンでは、再代入できない const を活用の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

再代入できない const を活用

const を使うと「再代入できない」と覚えますが、これは 変数と値の結び付き が固定されるという意味です。値が 配列やオブジェクト の場合、中身そのものは書き換えられます。本レッスンではこの「束縛」と「値の内部状態」の違いを体感し、const を使ったまま配列を更新する書き方に慣れます。

ポイント const は箱に貼ったラベルを固定するイメージ。箱の中身は出し入れできます。

束縛と内部状態

変数は値を直接持っているのではなく、値の参照 (どこに値があるかの矢印) を保持しています。const arr = [1, 2]; は「arr という名前が、ある配列を指し示している」状態です。再代入 arr = [3] は矢印の付け替えなので禁止ですが、arr.push(3) は指している配列の中身を変えているだけなので OK です。

JavaScript

const arr = [1, 2];
arr.push(3);            // OK 中身を追加
arr[0] = 99;            // OK 要素を書き換え
console.log(arr);       // [99, 2, 3]

// arr = [1, 2, 3];     // NG TypeError 束縛の再代入

オブジェクトも同じ

オブジェクトの場合も、const で宣言した後にプロパティの追加・更新・削除ができます。参照型 は全部この性質を持つと覚えましょう。

JavaScript

const user = { name: "なお" };
user.age = 30;          // 追加 OK
user.name = "Tom";      // 更新 OK
delete user.age;        // 削除 OK
console.log(user);      // { name: "Tom" }

// user = { name: "X" }; // NG 束縛の再代入

ヒント「const で守られるのは矢印だけ、中身は守られない」が合言葉です。

図で整理

diagram (will load when visible)

完全に固めたいとき

配列やオブジェクトの中身まで変更不能にしたい場合は Object.freeze(obj) を使います。フリーズされた配列に push すると、strict mode では TypeError が、緩いモードでは無言で失敗します。プロパティのネストまで固めるには再帰的にフリーズする必要があり、ライブラリの deep-freeze が定番です。

JavaScript

const config = Object.freeze({ apiUrl: "https://api.example.com" });
config.apiUrl = "https://evil.example.com"; // strict mode で TypeError
console.log(config.apiUrl); // 変わっていない

よくある間違い

1 つ目は const arr = []; で配列を push したら警告が出る、と誤解するパターンです。push は中身の変更なので問題ありません。2 つ目は const obj = {}; のオブジェクトに後からプロパティを追加できないと思い込むこと。obj.key = value は何の問題もありません。3 つ目は const の参照を 複数の変数で共有 しているとき、片方を変更するともう片方にも反映される問題です。これは別の変数を作っても 同じ参照 を共有しているために起こります。配列・オブジェクトをコピーしたいときは [...arr] や { ...obj } のスプレッド構文を使います。

注意「コピー」と「参照のコピー」を混同すると、知らないうちに副作用を生み出します。

破壊的変更を避けるテクニック

実務では「元の配列を変えずに、新しい配列を返す」設計が好まれます。React のステート更新などで特に重要です。push を直接使う代わりに、スプレッド構文や concat で新しい配列を作って返すのが定石です。

JavaScript

const original = [1, 2];
const added = [...original, 3];    // 新しい配列
const added2 = original.concat(3); // 同じく新しい配列
console.log(original); // [1, 2] そのまま
console.log(added);    // [1, 2, 3]

補足破壊的・非破壊的の使い分けは、後のレッスンで配列操作を学ぶときにじっくり扱います。

やってみよう

配列 arr と数値 value を受け取り、arr の 末尾に value を追加した上で、その arr を返す 関数 appendTo を作ってください。実装の中で const だけ を使うこと。arr.push(value) で中身を変更してから arr を返すのが定石です。const で受け取った引数のままで push できることを体感しましょう。

よくある質問

Q. ブラウザと Node.js で動作は変わりますか？

A. JavaScript の構文・組み込み機能（配列・文字列・Promise 等）はどちらでも同じです。違いは DOM API（ブラウザ専用）と fs などのファイル系（Node 専用）など、実行環境固有の機能です。コアロジックは両方で動くため、テストもしやすくなります。

Q. ES6 以降の新機能は使っても大丈夫ですか？

A. 現代のブラウザ・Node.js は ES2020 以降の機能をほぼサポートしています。古い IE 等を対象にする必要が無ければ、let/const、アロー関数、分割代入、async/await を積極的に使ってください。トランスパイル（Babel/Vite）が必要なケースは年々減っています。

Q. TypeScript に進む価値はありますか？

A. 型情報があるとリファクタやエディタ補完が劇的に効くため、規模が大きくなるなら TypeScript への移行を強くおすすめします。最初は any を許容しつつ徐々に型を付ければ、JS の知識をそのまま活かせます。

次のレッスン

次は 第2章まとめクイズ で、const は束縛を固定するが、配列やオブジェクトの中身は変更できることを体感するを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

const と参照の要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. const と参照とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

再代入できない const を活用

再代入できない const を活用

束縛と内部状態

オブジェクトも同じ

図で整理

完全に固めたいとき

よくある間違い

破壊的変更を避けるテクニック

やってみよう

よくある質問

Q. ブラウザと Node.js で動作は変わりますか？

Q. ES6 以降の新機能は使っても大丈夫ですか？

Q. TypeScript に進む価値はありますか？

次のレッスン

要件

入出力例

ヒント

メモ