【JavaScript】定数とは？使い方を初心者向けにわかりやすく解説

フロントエンド開発•2025/2/15

JavaScript

はじめに

JavaScriptを学習するとき、まず気になるのが変数と定数の使い分けではないでしょうか。特に定数は一度決めた値を再代入できない特性があるため、プログラム全体の安定性や可読性に大きく貢献します。

しかし「定数」という言葉だけを聞くと、変数と違って融通が利かないイメージを持つ方も少なくないかもしれません。とはいえ、実際の開発シーンで定数は非常に便利で、コードの明確化に役立つことが多いです。

ここでは、JavaScript 定数の基本的な考え方や宣言の方法、さらに実務でどのように使うのかについて、わかりやすく説明します。初心者の皆さんでも理解しやすいように丁寧に解説を進めますので、ぜひ参考にしてみてください。

この記事を読むとわかること

JavaScriptにおける定数の概要
constキーワードの使い方と注意点
実務での定数利用シーン
定数を用いるメリットと、初心者でも実践しやすい管理方法
具体的なコード例を通した学習ポイント

JavaScriptにおける定数の概要

JavaScriptにおいて定数とは、宣言後に再代入できない値のことを指します。一般的にconstというキーワードを用いて宣言しますが、同じコードの中で重複して使えない、宣言後に値の再代入ができないといった制約を持っています。

こうした厳密さは一見不便に思えるかもしれませんが、開発現場では「値を間違って変更してしまうミス」を防止できるため、コードが安定しやすくなる利点があります。また、特定の数値や設定値などを動かさないようにしたい場合にも、定数は有効な手段となります。

定数が必要とされる理由

変数は自由に値を変更できる反面、どこかで意図せず値を上書きしてしまうリスクがつきまといます。大型のプロジェクトや複数人での開発になると、コードが複雑になり、そうしたリスクはより増大する傾向があります。

定数を導入すると、値が勝手に変わることがないという安心感を得られます。これによってプログラムの挙動を追いやすくなり、原因不明のバグや想定外の値の変化を抑えられるメリットがあるのです。

変数と定数の違い

JavaScriptでは、主に以下のキーワードを使って値を宣言できます。

var
let
const

変数と呼ばれるものにはvar・letが当てはまりますが、実務的にはvarよりもスコープが明確なletが推奨されることが多いです。一方、定数として使われるのがconstです。

let: 再代入が可能
const: 再代入が不可能

こうした違いがあるため、値をどう扱いたいかによって使い分けるとよいでしょう。

constを使った定数の宣言方法

JavaScriptで定数を宣言する場合、最もシンプルなのは以下のような形です。コード例を見ながらイメージをつかんでみてください。

基本的な書き方


const TAX_RATE = 0.1;
console.log(TAX_RATE); // => 0.1

上記のコードでは、TAX_RATEという定数を0.1で宣言し、コンソールに出力しています。定数名はすべて大文字とアンダースコアでつなげるケースがよく見られますが、必ずしもそうしなければいけないわけではありません。ただし「他の変数とは違う」ということを明示するため、一定の命名規則を設けるのは非常に有効です。

constで宣言された値が再代入不可になる理由

constで宣言した値は、一度代入したら再代入できません。これは言語仕様上で定義されており、定数としての安全性を確保するための仕組みです。

例えば以下のように値を変更しようとすると、エラーが発生します。


const PI = 3.14;
PI = 3.1415; // => エラーとなる

こうした挙動があるおかげで、誤った代入を防ぎ、コードの予測可能性を高めることができます。

constでオブジェクトや配列を扱う場合

constで定義したオブジェクトや配列の場合、変数自体の再代入は許されませんが、オブジェクトのプロパティ値や配列要素は変更が可能です。これは、constによって確保された参照自体は固定されるものの、その中身の構造までは固定されないというJavaScriptの仕組みによります。


const user = {
  name: "Alice",
  age: 25
};

// user自体を別のオブジェクトに再代入することはできない
// user = { name: "Bob", age: 30 }; // エラーになる

// ただしオブジェクトのプロパティは書き換え可能
user.name = "Bob"; // これはOK
user.age = 30;     // これもOK

この挙動は初心者の方が戸惑いやすいポイントです。定数という名前から、オブジェクトのプロパティも変更できないと思い込んでしまうことが多いので、注意しておきましょう。

実務での活用シーン

定数は、実務的に次のようなシーンでよく使われます。これらのシーンで上手に使うことで、開発の効率やコードの保守性を高めることができます。

システム設定値としての定数利用

アプリケーション内で、例えば税率やサービス手数料などの計算に必須な値が存在する場合、これらを定数として管理すると安全です。間違って手数料の値が変わってしまうと、売上計算などに大きく影響が及ぶ可能性があります。定数にしておけば、予期しない変更が起きにくく安心感が高まります。

APIのエンドポイント管理

フロントエンドのコードからサーバーサイドのAPIを叩く場合に、APIのURLやパスを定数化して管理すると便利です。複数の場所で同じURLを使っているときに、コードを一括で修正できるため、保守性が向上します。

例えば、以下のような形で定義しておくと見通しがよくなります。


const API_BASE_URL = "https://example.com/api/v1";

function fetchUsers() {
  return fetch(`${API_BASE_URL}/users`);
}

今後、エンドポイントが変更になったとしても、定数を1カ所修正すれば済むので、非常に効率的です。

ロジック内の特定の値の固定化

ビジネスロジックで用いられる優先度のレベルや特定ステータスなど、あまり頻繁に変化しない値は定数で固定しておくと管理が楽です。万一、値が変わるときも一括で見直しやすくなるため、チームでの開発でも混乱が少なくなります。

定数を使いこなすメリット

ここでは、定数を利用することによって得られる主なメリットを確認していきましょう。実際の開発で感じる効果をイメージできると、定数の重要性がさらに理解しやすくなるはずです。

可読性向上

定数を導入すると、その値が「変わらないもの」だと明示的にわかります。たとえばconst MAX_SCORE = 100;と記述されていると、「常にスコアの上限は100なんだな」という情報がすぐに伝わります。

一方で、単純に数字や文字列をコードのあちこちに埋め込んでしまうと、同じ値を複数箇所に書いているのか、それとも一部だけ別の数値なのかが判断しづらくなります。定数を使うことにより、プログラムの意図をドキュメント化する手段としても機能するのです。

バグの抑止

先ほども述べたように、一度定義した値をうっかり変更してしまうミスを防ぐことができます。特に大規模なシステムや、共同開発の現場では、知らないうちに値が上書きされてしまうケースが想定されます。

そうしたリスクを下げられる点は、デバッグ時間の短縮にもつながるでしょう。「なぜこの数値が書き換わってるの？」という調査に時間を取られないで済むのは、大きなメリットです。

パフォーマンス面での効果

JavaScriptの処理速度そのものに直結する劇的な効果はありませんが、定数を使うことでコードの最適化がある程度期待できるケースもあります。特定のJavaScriptエンジンが、再代入のない値を最適化しやすい場合もあるといわれています。

ただし、ここは実行環境やJavaScriptエンジンのバージョンによって違いがあるため、あまり過度な期待は避けるほうが無難です。主にコードの安全性や可読性を高める効果に注目するのがよいでしょう。

注意点とベストプラクティス

定数を使うときに気をつけるべきポイントや、より使いやすくするためのベストプラクティスを紹介します。

定数命名規則

冒頭で少し触れましたが、開発チーム内で命名規則を統一しておくと、コードが一気にわかりやすくなります。具体的には以下のようなルールを設けることがよくあります。

定数名は大文字のスネークケースを推奨する

例：MAX_VALUE, API_BASE_URL

特別な理由がない限り、再代入される可能性がある場合は定数ではなく変数を使う
名前から用途が伝わるように心がける

このようなガイドラインを共有しておくだけでも、初心者の方がチームに合流したときに混乱せずに済みます。

スコープ管理

JavaScriptでは、ブロックレベルスコープが採用されています。 constやletで宣言した変数・定数はブロック（{}）の中でのみ有効になります。


{
  const MESSAGE = "Hello, block scope!";
}
console.log(MESSAGE); // => エラー

このように、ブロック外からアクセスするとエラーになる点は気をつけましょう。また、定数をグローバルスコープに置くことは避けたほうが望ましいです。必要以上にグローバルスコープを汚染すると、他のコードとの衝突や予期せぬエラーが生じやすくなるからです。

複数の定数をまとめる方法

プロジェクトが大きくなると、定数の数もどんどん増えていきます。管理が煩雑にならないよう、うまく仕組みを作ることが重要です。

定数オブジェクトの導入

同じ領域で使う定数が複数ある場合は、まとめてオブジェクト化しておく方法があります。例えばユーザーの権限レベルやステータスが複数種類存在するなら、それらをひとつのオブジェクトに集約しておくと便利です。


const USER_STATUS = {
  ACTIVE: "active",
  INACTIVE: "inactive",
  SUSPENDED: "suspended",
};

function checkUserStatus(status) {
  if (status === USER_STATUS.ACTIVE) {
    // アクティブユーザーへの処理
  }
}

こうすると、ステータスに関する情報がひとつのオブジェクトにまとまるため、コード全体を見渡したときに把握しやすくなります。

Enumライクな使い方

JavaScriptには他の言語のようなEnum（列挙型）が存在しませんが、オブジェクトや凍結（Object.freeze()）を使うことで、Enumライクな書き方をすることができます。例えば以下のようにすると、定義したオブジェクトを変更しにくくなります。


const PERMISSIONS = Object.freeze({
  READ: "read",
  WRITE: "write",
  DELETE: "delete",
});

// PERMISSIONS.WRITE = "update"; // => 変更しようとしてもエラーにはならないが、実際には値が書き換わらない

厳密に値の変更を防げるわけではありませんが、最低限の抑止力としては機能するため、開発現場で活用されることも少なくありません。

実務でありがちな疑問と対処方法

JavaScriptの定数を使うときに、現場でよく出てくる疑問点と、それに対する考え方をまとめました。

ランタイムに変わる値はどう扱うか

例えば、ユーザーから入力された値や、サーバーから取得した情報は、実行中に変わる可能性があります。したがって、こういった値は定数よりも変数で扱うほうが自然です。

ただし、取得した値に対して「変わってほしくない部分」だけを定数に落とし込む考え方もあります。たとえば、取得したデータの一部のみを別のロジックで再利用する際に定数化するケースもあるでしょう。要は、何が動かなくて、何が動くのかを明確に把握することが大切です。

コード管理での定数の配置場所

定数が増えてくると、どこに定数を定義しておくべきか悩みがちです。一般的には、使用されるモジュールや機能ごとに定数ファイルを分割することが多いでしょう。

API関連の定数 → apiConstants.js
ユーザー管理関連の定数 → userConstants.js

このように分割しておくと、定数を探すときや修正するときにすぐに場所がわかります。あまりに巨大なファイル1つにまとめてしまうと、逆に検索に時間がかかる場合もあるので、用途や機能ごとにほどよく分割する方法が推奨されます。

コード例：定数活用パターン

ここからは、もう少し具体的に定数を活用したコード例をいくつか紹介します。初心者の方にとってはイメージしやすいサンプルになると思いますので、必要に応じてアレンジしてみてください。

オブジェクトを定数として扱う

1つのまとまった情報を定義したいとき、オブジェクトを定数として扱う方法はとても便利です。たとえば以下のように、ユーザー情報やコンフィグ設定を定義できます。


const APP_CONFIG = {
  APP_NAME: "My Awesome App",
  VERSION: "1.0.0",
  MAINTENANCE_MODE: false
};

console.log(APP_CONFIG.APP_NAME); // => "My Awesome App"

このようにまとめると、アプリ名やバージョン情報を別々の変数にするよりも整理しやすくなります。万一、バージョンを変更する際はAPP_CONFIG.VERSIONを更新するだけで済む点がメリットです。

オブジェクトの中身は変更可能なので、厳密に値の変更を防ぎたい場合は Object.freeze() のようなメソッドも検討してみるといいかもしれません。

配列を定数として扱う

定数の値が一揃いの要素を列挙する形で存在する場合は、配列として定義しておくのも手です。たとえば、開発しているアプリでサポートする言語のリストをまとめておくケースなどが考えられます。


const SUPPORTED_LANGUAGES = ["en", "ja", "es", "fr"];

function isLanguageSupported(lang) {
  return SUPPORTED_LANGUAGES.includes(lang);
}

console.log(isLanguageSupported("ja")); // => true
console.log(isLanguageSupported("de")); // => false

ここでも、配列そのものを別の配列に再代入しようとするとエラーになりますが、配列の要素自体は変更できてしまいます。どうしても固定化したい場合は、やはりObject.freeze()や別の方法を検討してください。

ネストしたオブジェクトの利用

より複雑な設定値を一元管理したい場合は、ネストしたオブジェクトを定数として保持する方法があります。


const APP_SETTINGS = {
  UI: {
    THEME: "dark",
    LANGUAGE: "ja"
  },
  SERVER: {
    ENDPOINT: "https://api.example.com",
    TIMEOUT: 5000
  }
};

// 変更時
// APP_SETTINGS.UI.THEME = "light"; // これはOK（プロパティの変更は可能）

ネストが深くなると読みにくくなるため、無理に1つのオブジェクトへまとめすぎないように注意しましょう。プロジェクトの規模やチームの方針に合わせて、適切な単位で区切る工夫をするとよいです。

必要以上にオブジェクトを深くネストすると管理が難しくなるので、運用しながら最適な構造を探っていくのが大切です。

まとめ

ここまで、JavaScript 定数であるconstを軸にして、基本から実務での活用まで幅広く解説しました。定数を適切に使うことで、値が意図せず変更されるリスクを防ぎ、コードの可読性を高める効果が期待できます。

実際の開発では、複数人での作業や長期的な保守を見据えながら、いかに安心してコードを扱えるかが重要です。定数をうまく活用すれば、特定の値を一元管理したり、変更があった場合に素早く修正箇所を見つけられたりと、多くのメリットがあります。

ぜひ皆さんも学習や実務の中で、constを使った定数の管理方法を身につけてみてください。その際、値の命名やスコープ、ファイル分割などを含めて整理すると、よりスムーズにプロジェクトを進められるようになるでしょう。