JavaScriptのconstで正しく変数宣言｜実例付きで解説

（最終更新月：2023年11月）

✔以下の疑問を持つ方に向けたものです

✔当記事でお伝えしたいこと

• JavaScript constの基礎知識
• JavaScript constの使い方とその活用法
• JavaScript constによる実際の事例

当記事では、javascript constの基本から応用法まで、実例を通じて詳細に解説します。

理解しやすいように具体的なケースを交えて説明していきますので、ぜひ最後までお読みください。

constとは？基本を理解しよう

こちらでは、constの基本的な性質と動作原理について詳しく解説します。

constを正しく使用することで、バグのリスクを減少させ、コードの安定性を向上させられるでしょう。

• JavaScriptとconstの役割
• constの定義と構文
• constの動作原理

JavaScriptとconstの役割

JavaScriptは進化し続ける言語であり、ES6（ECMAScript 2015）からはconstという新しい変数宣言の方法が導入されました。

constは、再代入が不可能な変数を宣言するためのキーワードです。

これにより、変数の値が変更されることなく、一貫性を保てます。

constの定義と構文

constは、再代入が不可能な変数を宣言するためのキーワードです。

一度constで宣言された変数には、新しい値を代入できません。

const PI = 3.14159;
PI = 3.14; // TypeError: Assignment to constant variable.

constの動作原理

constで宣言された変数は、そのスコープ内でのみアクセス可能です。

また、宣言時に初期値を設定する必要があります。

この特性により、constは変数の値が変更されることなく、一貫性を保てるのです。

実践！constを使う上での基本的な知識

こちらでは、constを日常のプログラミングに適用するための基本的な知識とテクニックを見ていきましょう。

constを効果的に使用することで、コードの品質やメンテナンス性を向上させられます。

• constの基本的使用法
• constのブロックスコープ理解
• constでの定数初期化の重要性
• オブジェクトと配列におけるconstの動き

constの基本的使用法

constは、再代入が不要な変数や定数を宣言する際に使用します。

例えば数学の定数や設定値など、プログラムの実行中に変更されることのない値を宣言する際に使いましょう。

const MAX_USERS = 100;
const API_ENDPOINT = "https://api.example.com/data";

constのブロックスコープ理解

constで宣言された変数はブロックスコープを持ちます。

const変数は、それが宣言されたブロック（例：if文やfor文の中）内でのみアクセス可能であるということです。

if (true) {
    const message = "Hello, World!";
    console.log(message); // "Hello, World!"
}
console.log(message); // ReferenceError: message is not defined

constでの定数初期化の重要性

constで宣言された変数は、宣言時に初期値を設定する必要があります。

この初期値は後から変更できません。

const NAME; // SyntaxError: Missing initializer in const declaration

オブジェクトと配列におけるconstの動き

constで宣言されたオブジェクトや配列は、そのオブジェクトや配列自体の再代入が不可能です。

しかし、オブジェクトのプロパティや配列の要素は変更できます。

const person = { name: "John" };
person.name = "Doe"; // This is fine
person = { name: "Jane" }; // TypeError: Assignment to constant variable.

JavaScriptの変数：var, let, const の比較

こちらでは、JavaScriptの3つの主要な変数宣言方法であるvar、let、およびconstの違いと特性について詳しく解説します。

これらの違いを理解することで、適切な変数宣言方法を選択し、より効果的なコードを書けるでしょう。

• 変数宣言方法の違い
• 再代入について
• 変数の再宣言とは?

変数宣言方法の違い

varはES5以前から存在する変数宣言方法で、関数スコープを持ちます。

一方、letとconstはES6で導入され、ブロックスコープを持ちます。

constは再代入が不可能な変数を宣言するためのキーワードであり、letは再代入が可能です。

if (true) {
    var varVariable = "var";
    let letVariable = "let";
    const constVariable = "const";
}
console.log(varVariable); // "var"
console.log(letVariable); // ReferenceError
console.log(constVariable); // ReferenceError

再代入について

varとletで宣言された変数は再代入が可能ですが、constで宣言された変数は再代入が不可能です。

var varVariable = "var";
let letVariable = "let";
const constVariable = "const";

varVariable = "new var"; // This is fine
letVariable = "new let"; // This is fine
constVariable = "new const"; // TypeError: Assignment to constant variable.

変数の再宣言とは?

varで宣言された変数は、同じスコープ内で再宣言できます。

しかし、letやconstで宣言された変数は、同じスコープ内で再宣言できません。

var varVariable = "var";
var varVariable = "new var"; // This is fine

let letVariable = "let";
let letVariable = "new let"; // SyntaxError

const constVariable = "const";
const constVariable = "new const"; // SyntaxError

スコープとは？：var, let, constとスコープの理解

このセクションでは、変数のスコープについて詳しく解説します。

スコープは、変数がアクセス可能な範囲を示すもので、JavaScriptにおける変数のスコープの理解は非常に重要です。

• グローバルスコープとは？
• ローカルスコープの認識

グローバルスコープとは？

グローバルスコープに宣言された変数は、プログラムのどこからでもアクセスできます。

これらの変数は、通常、ウェブページのライフサイクル全体で利用可能です。

var globalVar = "I am global";
console.log(globalVar); // "I am global"

ローカルスコープの認識

ローカルスコープに宣言された変数は、そのスコープ内でのみアクセス可能です。

関数やブロック内で宣言された変数は、その関数やブロックの外からはアクセスできません。

• ブロックスコープの理解
• 関数スコープとは？

ブロックスコープの理解

letとconstはブロックスコープを持ちます。

これらのキーワードで宣言された変数は、そのブロック（例：if文やfor文の中）内でのみアクセス可能です。

if (true) {
    let blockScopedLet = "I am block scoped";
    const blockScopedConst = "Me too";
}
console.log(blockScopedLet); // ReferenceError
console.log(blockScopedConst); // ReferenceError

関数スコープとは？

varで宣言された変数は関数スコープを持ちます。

これは、関数内で宣言されたvar変数は、その関数の外からはアクセスできません。

function testFunction() {
    var functionScopedVar = "I am function scoped";
}
console.log(functionScopedVar); // ReferenceError

constの注意点と適用シチュエーション

constの使用にはいくつかの注意点があります。

特定のシチュエーションでconstを使用することで、コードの効率や可読性を向上させられるでしょう。

• const使用時の注意点
• constが一番活躍する場面

const使用時の注意点

constで宣言された変数は再代入ができませんが、オブジェクトや配列の中身自体は変更可能です。

これは、constが変数の再代入を防ぐだけで、変数が指すオブジェクトや配列の中身までの変更を防ぐわけではないためです。

const obj = { name: "John" };
obj.name = "Doe"; // これは問題ない
obj = { name: "Jane" }; // TypeError: Assignment to constant variable.

constが一番活躍する場面

constは、プログラムの中で変更されることがない値や、変更されるべきでない値を宣言する際に最も効果的です。

以下のように一度設定されたら変更されることがない値を宣言する際にはconstを使用すると良いでしょう。

• 設定値
• 環境変数
• 数学の定数

まとめ

当記事では、JavaScriptのconstについて学習してきました。

constを適切に使用することで、コードの安全性や可読性を向上させられます。

再代入が必要ない変数にはconstを、再代入が必要な変数にはletを使用することを心がけましょう。