JavaScript 基礎第4回『変数と定数の使い方を知ろう』

2024年4月26日2025年1月7日

JavaScript 基礎第3回 では JavaScript の基本ルールを確認しましたので、
今回から実際に手を動かしてコードを書き、慣れていきましょう！

JavaScript における変数、定数とは

JavaScript のプログラムを作成する上で、「変数」、「定数」とはデータを収納できる名前付きの箱のようなイメージです。
プログラム中でデータを取り出して使用することができます。

変数

変数は宣言された後に変更することができます。
JavaScriptでは、主にletまたはvarキーワードを使用して変数を宣言します。
letはES6から導入されたキーワードで、varに比べてより厳格なスコープ（有効範囲）を持ちます。一般的にはvarよりletの使用が推奨されています。

定数

定数も変数と同様にデータを格納しますが、一度値が設定されると、その値は変更できません。JavaScriptでは、constキーワードを使用して定数を宣言します。定数はプログラムの実行中にその値が変わらないことが保証されているため、再代入を試みるとエラーが発生します。

変数、定数を実際に JavaScript で書いてみよう

JavaScript の変数(let)の練習をしてみよう

第3回で作成したファイルを引き続き使用していきます。
下記コードでletを使用し、変数名fruitを変数宣言しています。
1行目は、前に記載したようにfruitという名前の付いた箱で、その箱の中にはりんごが入っているイメージをしてみてください。
4行目では既に変数宣言がされているfruitにぶどうが代入され、りんごがぶどうに上書きされます。ですので、5行目ではぶどうが出力されます。

let fruit = "りんご";
document.write(fruit);  // りんごを出力
document.write('<br>');  // 改行
fruit = "ぶどう";
document.write(fruit);  // ぶどうを出力

JavaScript の定数(const)を練習してみよう

下記コードは変数のコードのletをconstに変えて記述しています。
画面を見て頂くとぶどうが出力されていません。画面上で右クリックをして検証をクリックし、Consoleを選択するとエラーの内容などを確認することができます。
homepage.js:4 と表示されているのはhomepage.jsの4行目でエラーが出ているという意味です。
4行目を見て頂くと定数を上書きしようとしているのでエラーになっています。
やはり定数は上書きできないことが確認できます。

const fruit = "りんご";
document.write(fruit);  // りんごを出力
document.write('<br>');  // 改行
fruit = "ぶどう";
document.write(fruit);  // ぶどうを出力

letやconst、varの使い分け

プログラム内で値が変更される予定のない変数はconstを使い、値が変更される可能性がある場合はletを使用します。これにより、プログラムの意図が明確になり、予期せぬ変更やバグを防ぐことができます。また、可能な限りvarの使用は避けることが推奨されます。これはvarが持つ関数レベルのスコープと変数の再宣言が許される性質が、予期せぬエラーやバグの原因になるからです。