このシリーズについて
「JavaScript入門」第3回です。今回は、値に名前を付けて使うための変数を扱います。
変数とは
変数は、値に名前を付けて後から使えるようにする仕組みです。
const userName = "山田";
console.log(userName);
JavaScriptの変数は、まず const を基本にし、あとで値を変える必要がある場合だけ let を使います。
Step 1: constで値を保持する
変更しない値は const で宣言します。
const price = 1200;
const taxRate = 0.1;
console.log(price);
console.log(taxRate);
const は「定数」というより、「再代入しない変数」と考えると理解しやすいです。
Step 2: letで値を更新する
あとから値を変える必要がある場合は let を使います。
let count = 0;
count = count + 1;
console.log(count);
count = count + 1;
console.log(count);
出力は 1、2 の順になります。
Step 3: constに再代入するとどうなるか
const に別の値を入れ直すとエラーになります。
const score = 80;
score = 90;
実行すると、次のようなエラーが出ます。
TypeError: Assignment to constant variable.
このエラーは、const で宣言した変数に再代入した時に出ます。
Step 4: 命名ルールを確認する
変数名は、何を表す値なのかが分かる名前にします。
| 良い例 | 避けたい例 | 理由 |
|---|---|---|
userName | x | 意味が分かる |
totalPrice | price2 | 役割が分かる |
isLoggedIn | flag | 真偽値だと分かる |
JavaScriptでは、複数単語の変数名に camelCase をよく使います。
const firstName = "Taro";
const totalPrice = 1500;
const isActive = true;
varはなぜ避けるのか
古いJavaScriptでは var が使われていました。しかし、var はスコープの挙動が分かりにくく、入門段階では使わない方が安全です。
var oldStyle = "古い書き方";
新しく書くコードでは、原則として const と let を使います。
注意: 古い記事やサンプルコードには var が残っています。読むことはありますが、最初に覚える書き方ではありません。
練習
variables.js を作り、次の値を変数に入れて出力します。
const itemName = "ノート";
const price = 180;
let quantity = 2;
console.log(itemName);
console.log(price * quantity);
quantity = 3;
console.log(price * quantity);
出力が ノート、360、540 になれば成功です。
よくあるエラー
| エラー | よくある原因 | 確認する場所 |
|---|---|---|
Identifier has already been declared | 同じ名前を再宣言した | 変数名が重複していないか |
Assignment to constant variable | const に再代入した | let が必要な値か |
ReferenceError | 宣言前の変数を使った | 変数宣言の位置 |
次のステップ
JavaScript入門 #4 - データ型とtypeof で、文字列・数値・真偽値などの型を確認します。
まとめ
変数は、値に名前を付けて扱いやすくする仕組みです。JavaScriptでは const を基本にし、値を更新する必要がある時だけ let を使います。var は古いコードを読むために知っておけば十分です。
