変数 ― 値に名前をつける

導入

同じ値を何度も使ったり、意味のある名前で扱いたいときは、変数に入れます。変数は「値につけた名前」です。

説明

let 名前 = 値; と書くと、変数に値を入れられます（この = は「等しい」ではなく「入れる」という意味です）。あとはその名前で値を呼び出せます。「名前をつけた箱に、値をしまう」イメージです。

flowchart LR
  v["値 25"] -->|"let age = 25 （入れる）"| box["箱 age<br/>25"]
  box -->|"console.log(age) （取り出す）"| out["画面に 25"]

let name = "太郎";
let age = 25;
console.log(name);
console.log(name, "さんは", age, "歳です");

変数の中身はあとから入れ替えられます。最後に入れた値が使われます。

let count = 1;
count = count + 1;   // いまの count(1) に 1 を足して入れ直す
console.log(count);  // 2

変えたくない値には const（コンスト）を使います。const で宣言した変数は、あとから入れ替えようとするとエラーになります。

const taxRate = 0.1;
// taxRate = 0.08;  ← これはエラー
console.log(taxRate);

モダンな JavaScript では、基本は const、あとから変える必要があるときだけ let を使うのが慣習です（古い var は原則使いません）。

変数名は英字・数字・アンダースコア _・ドル記号 $ で作れます（数字で始めるのは不可）。userName のように、意味の分かる camelCase（先頭小文字、単語の境目を大文字）が JavaScript の慣習です。

やってみよう

name と age の値を書き換えて、あなた自身の情報を表示してみましょう。const と let の違いも試してください。

演習

price（価格）という変数に 120 を入れ、個数ぶんの合計を求めます。count に 3 を入れて、price * count の結果を「合計」というラベルつきで表示してください。