プログラミングを学び始めると、「変数」という言葉によく出会いますよね。
でも、実はもうひとつ似たようなものに「定数」というものがあります。
「えっ、また新しい言葉？ 難しそう…」と感じるかもしれませんが、安心してください！
今回は 「定数って何？」 というところから、どうやって使うのか、どんなときに使うと便利なのか まで、初めての人でも理解できるようにやさしく解説していきます！
この書籍は本当にわかりやすく書いてありオススメです。
目次
1. この記事でできるようになること
この記事を読むと、こんなことがわかるようになります。
| 「定数ってどんなもの？」というイメージが持てる |
| JavaScriptで定数を使う方法がわかる |
| 変数との違いや、使い分け方が理解できる |
2. 変数と定数ってどう違うの？
まず、「変数」と「定数」のざっくりした違いを見てみましょう。
| 用語 | 特徴 |
|---|---|
| 変数（let） | 中身を何度でも変更できる |
| 定数（const） | 一度入れた値は変更できない |
🍱 お弁当箱でたとえると…
- 変数は「何度でも中身を入れ替えられるお弁当箱」
- 定数は「一度フタを閉めたら中身を変えられないお弁当箱」
「え？それって不便じゃないの？」と思ったかもしれません。
でも、実は定数の“変更できない”という性質が、とても大切な役割を果たしてくれるんです！
イメージしやすいように図も用意しました。
3. 定数が活躍するシーン
プログラムを書いていると、ある値を間違えて上書きしてしまうことがあります。
たとえば、お店で商品を「500円」に設定していたはずなのに、うっかり「800円」に変えてしまったら…
お客さんとのトラブルにつながってしまいますよね。
そこで登場するのが 定数 です！
定数を使えば、うっかり値を変更してしまうことをプログラム側でガッチリ防いでくれます。
4. 定数を使ってみよう！
それでは実際に、定数を使ってみましょう！
① ファイルを用意する
Visual Studio Code（無料でダウンロードできるエディタです。メモ帳でも書けますけど便利です。）を開いて、jsフォルダの中に price.js というファイルを新しく作ります。
② 定数を宣言してみる
次のコードを price.js に書いてみましょう。
// 定数を宣言＆値を入れる
const price = 500;
// コンソールに表示
console.log(price);
このコードでは const を使って price（値段）という名前の定数に「500」を入れています。
③ ブラウザで確認しよう
次に、index.html でこの price.js を読み込むように記述しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>定数の学習</title>
</head>
<body>
<script src="js/price.js"></script>
</body>
</html>
ブラウザで index.html を開いて、デベロッパーツールの「コンソール」タブ（キーボード右上のF12を押すと開きます）を見ると…
「500」 と表示されているはずです！
5. 定数を変えようとするとどうなる？
では、ちょっと実験です。
定数にもう一度値を入れようとすると、どうなると思いますか？
実は、エラーになります！
次のように書き換えてみましょう：
const price = 500;
console.log(price);
// 再代入してみる（エラーになる！）
price = 800;
console.log(price);
これを実行すると、「Uncaught TypeError: Assignment to constant variable.」というエラーが出ます。
これは、「定数にはもう値を入れ直せませんよ」という意味です。
このようにして、定数は勝手に値を変更されるミスを防いでくれるのです！
6. じゃあ、変数と定数ってどう使い分けるの？
ここまで読んできて、こんな疑問が出てきたかもしれません。
「じゃあ、変数じゃなくて全部定数にすればいいの？」
いい質問ですね！
基本的には、
- 変更しない値 → const（定数）
- 途中で値が変わる予定のもの → let（変数）
というルールで使い分けます。
たとえば、繰り返し処理（for文など）でカウンターの数字を増やしたい場合は let を使いますが、そうでないときは const を使うのが一般的です。
まとめ
- 定数（const）は、一度値を入れると変更できない
- 予期せぬミスを防ぐためにとても重要な存在
- 基本はconstを使い、変更が必要なときだけletを使おう！
そんな詳しく細かく書かんでもと思うほど細かいところまでキッチリ説明がついてますが、分厚いです。極めたい人向けかもと思う反面わかりやすかったのでオススメしておきます。
📝 ワンポイントメモ
- 定数の名前は大文字にするルールもある（例：
TAX_RATE）けど、JavaScriptではキャメルケース（doubleHandsなど）もよく使われる！（後ろに続く単語の最初の文字を大文字にする命名規則です。最初の単語は小文字で始めることが多いです。大文字部分がラクダのこぶのように見えることから、キャメルケースと呼ばれます。）
- 定数にオブジェクトや配列を入れるときは、中身のプロパティの変更は可能なので注意！（これは最初は気にしなくていいです。）
以上、定数についての解説でした！
数少ないデザイナー向きJavaScriptの本です。Manaさんが書いているものは人気ありますよね。
