• Xでシェア
  • LINEでシェア
  • このエントリーをはてなブックマークに追加

JavaScript const(変数宣言)の使い方

  • JavaScript
  • 変数
最終更新日:

この記事のポイント

  • JavaScriptのconst｜再代入不可能な定数宣言の基本
  • オブジェクトの不変性と参照の理解
  • letとの使い分けによる可読性と保守性の向上
  • 実用的なコード例で理解を深める

目次

JavaScriptのconstとは？

JavaScriptのconstキーワードは、ES2015(ES6)で導入された変数宣言方法の一つです。ES2015とは、2015年に制定されたJavaScriptの標準規格になります。

constは、この規格のなかで再代入できない定数を作成する役割を担います。constで宣言された変数は、宣言時に必ず初期化しなければなりません。そのあとで別の値を代入しようとすると、エラーになります。

constの主な特徴は、変数の値を「固定」できることです。この特徴により、プログラムの実行中に重要な値が誤って変更されることを防ぎ、コードの安全性と信頼性が向上します。また、const はletと同様にブロックスコープを持つため、変数の有効範囲が明確になることも大きな特徴です。

ただし、constで宣言したオブジェクトや配列の内容（プロパティやメソッド）は、変更できます。constが保証するのは変数自体の再代入防止であり、オブジェクトの不変性（イミュータビリティ）ではないことに注意が必要です。

なお、モダンなJavaScript開発では、再代入が必要ない変数はすべてconstで宣言することが推奨されています。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

JavaScriptのconstを使用した定数宣言の基本構文は、とてもシンプルです。以下のように記述します。

const 定数名 = 値; // 宣言と同時に初期化（必須） const 定数名1 = 値1, 定数名2 = 値2; // 複数の定数を同時に宣言

constの基本的な使用例を見てみましょう。

// 定数宣言と初期化 const ANIMAL = "イヌ"; console.log(ANIMAL); // イヌ // 再代入しようとするとエラー // ANIMAL = "ネコ"; // TypeError: Assignment to constant variable.

constで宣言した変数は再代入できません。そのため、以下のような操作を行うとエラーになります。

const COUNT = 1; // COUNT = 2; // エラー：constで宣言した変数には再代入できない // const COUNT; // エラー：初期化なしでは宣言できない

constもletと同様にブロックスコープを持ちます。それはつまり、宣言されたブロック内でのみアクセス可能ということです。

{ const BLOCK_ANIMAL = "キツネ"; console.log(BLOCK_ANIMAL); // キツネ } // console.log(BLOCK_ANIMAL); // エラー：スコープ外の変数にアクセスできない

実用例

constキーワードは、JavaScript開発のさまざまな場面で活躍するものです。ここでは実際のコード例を通して、constの活用方法を見ていきましょう。特に「再代入禁止」という特性を活かした使い方や、オブジェクトとの関係に注目してください。

各例では、コードの挙動を確認するための出力結果も含めています。constを適切に理解しうまく使えるようになると、コードの意図が明確になり、予期せぬバグが防ぎやすくなるはずです。

JavaScriptプログラミング力を向上させるためには、さまざまなコードに触れるなかで、想定外の動作やエラーなどに直面する「多くの経験」が必要です。

このセクションで紹介するコード例は、皆さんの環境に実装できるシンプルなものばかりです。自分の環境で実際に動かしながら、JavaScriptプログラミング全体のスキルを向上させてみてください。

プリミティブ値の定数宣言

プリミティブ値（数値、文字列、ブール値など）をconstで宣言した場合、その値は変更できなくなります。

この特性は、設定値や固定パラメータの定義でとても役立つものです。一度宣言した定数は再代入できないため、コード全体で一貫した値を保証可能となります。それはつまり、意図しない変更を防止できることでもあるでしょう。

定数名は、JavaScriptの慣習として大文字とアンダースコアで書かれることが多いです。

const MAX_ANIMALS = 5; const PREFERRED_PET = "イヌ"; const IS_MAMMAL = true; console.log(`最大動物数: ${MAX_ANIMALS}`); console.log(`好きなペット: ${PREFERRED_PET}`);







出力結果：
最大動物数: 5
好きなペット: イヌ
オブジェクトとconstの関係
constで宣言されたオブジェクトのなかで、変数の参照自体を変更することはできません。その一方で、オブジェクトの内容（プロパティ）は変更可能となります。
この特徴は、constが変数の再代入のみを禁止し、参照先のオブジェクトの変更は制限しないことで実現しています。それはつまり、オブジェクト自体を別のオブジェクトに置き換えることはできないものの、そのプロパティの追加・変更・削除は自由に行えることを意味するでしょう。

  
const animal = {type: "イヌ", age: 3};
console.log(animal);

animal.type = "ネコ"; // OK：プロパティは変更可能
animal.color = "白"; // OK：新しいプロパティも追加可能
console.log(animal);

  


  







出力結果:
{type: "イヌ", age: 3}
{type: "ネコ", age: 3, color: "白"}
配列を使った定数の活用
constで宣言した配列も、内容変更が可能です。一方で、別の配列に再代入することはできません。その理由は、先述のオブジェクトと同様に、配列も参照型のデータ構造だからです。
push()やpop()などのメソッドによる要素の追加・削除や、インデックスによる要素変更は可能ですが、変数自体に新しい配列を代入することはできません。

  
const animals = ["イヌ", "ネコ"];
animals.push("ウサギ"); // OK：配列の内容変更は可能
animals[0] = "キツネ"; // OK：要素の変更も可能
console.log(animals);

  


  







出力結果:
[ 'キツネ', 'ネコ', 'ウサギ' ]
関数定義での利用
constをアロー関数と組み合わせた場合、関数を定数として定義できます。これにより可能になるのが、関数の上書きを防止と、コード全体における一貫した動作の保証です。
constとアロー関数の組み合わせは、頻繁に使用するユーティリティ関数や、変更されると問題が発生する重要な関数を定義する場合に特に有効です。関数内部で使われる定数も、これらと同様にconstで宣言するとよいでしょう。

  
const getAnimalSound = (animal) => {
    const sounds = {イヌ: "ワン", ネコ: "ニャー", ウシ: "モー"};
    return sounds[animal] || "鳴き声不明";
};
console.log(getAnimalSound("イヌ"));
console.log(getAnimalSound("ネコ"));

  


  







出力結果:
ワン
ニャー
モジュールレベルの設定
アプリケーションの設定値をconstで定義すると、誤って変更される問題を防げます。具体的には、設定オブジェクトを作成し、アプリケーション全体で参照できるようにすることで、一元管理が可能になるでしょう。
また、設定値の変更が必要になった場合も、constを使うと変更箇所が一カ所に限定されることになります。保守性の向上に役立つテクニックでしょう。

  
const CONFIG = {
    apiUrl: "<https://api.animals.example>",
    maxResults: 10,
    defaultAnimal: "イヌ"
};
console.log(`デフォルト動物: ${CONFIG.defaultAnimal}`);
console.log(`最大結果数: ${CONFIG.maxResults}`);

  


  







出力結果:
デフォルト動物: イヌ
最大結果数: 10
定数オブジェクトのプロパティ操作
以下のコード例は、constで宣言したオブジェクトのプロパティを操作するさまざまな方法です。オブジェクトのプロパティに対しては、追加、変更、削除などの操作が可能となります。
また、オブジェクトのプロパティが配列の場合、その配列の要素も自由に操作できます。これらの操作は再代入ではなくプロパティの変更です。constの制約に違反することはありません。

  
const zoo = {mammals: ["イヌ", "ネコ"], reptiles: []};
zoo.mammals.push("ウマ"); // 配列プロパティに要素を追加
zoo.birds = ["ワシ", "スズメ"]; // 新しいプロパティを追加
delete zoo.reptiles; // プロパティを削除
console.log(zoo);

  


  







出力結果：
{ mammals: [ 'イヌ', 'ネコ', 'ウマ' ], birds: [ 'ワシ', 'スズメ' ] }
Object.freezeとの併用
完全に不変なオブジェクトを作成する場合、constとObject.freeze()を組み合わせて使いましょう。
constだけでは、オブジェクトのプロパティ変更を防げません。しかしそこでObject.freeze()を使うと、オブジェクトのプロパティも変更できなくなります。この組み合わせを用いることで、プログラム全体では絶対に変更されてはならない値の保護が可能です。
ただし、ネストされたオブジェクトには効果がありません。注意しましょう。

  
const ANIMAL_SOUNDS = Object.freeze({
    イヌ: "ワン",
    ネコ: "ニャー",
    ウマ: "ヒヒーン"
});
console.log(ANIMAL_SOUNDS.イヌ);
// ANIMAL_SOUNDS.イヌ = "バウ"; // 厳格モードではエラー
// ANIMAL_SOUNDS.ウシ = "モー"; // 厳格モードではエラー

  


  







出力結果:
ワン
まとめ
JavaScriptのconstキーワードは、再代入禁止の変数宣言ツールです。コードの意図を明確にし、予期せぬバグを削減する機能があります。プリミティブ値は変更できませんが、オブジェクトや配列の内容は変更可能です。完全な不変性にはObject.freeze()が必要となります。
アプリケーション開発の現場では、基本原則として、「変更されない変数はconst、再代入が必要な場合のみletを使う」というアプローチが推奨されています。このポイントを大切にすると、コードの予測可能性と保守性が向上するでしょう。
また、モダンなJavaScript開発では、varよりもconstとletの適切な使い分けをすることが一般的です。
constを使うことで「この変数は変更すべきでない」という意図が他の開発者に伝わりやすくなり、チーム開発の効率が高まります。また、開発チーム内では一貫した変数宣言パターンを維持する必要があるため、これらの使い分けはコーディング規約に含めたほうがよいでしょう。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript const(変数宣言)の使い方