今回は、JavaScriptを学ぶうえで避けては通れない「変数」について整理していきます。
どんなに複雑な処理を書けるようになっても、
この“変数”の理解があいまいだと、思わぬエラーにつながることがあります。
でも安心してください。
難しそうに聞こえますが、
考え方はとてもシンプルなんです。
「なんとなく使っている」状態から、
「自信をもって使える」状態へ。
一緒に土台を固めていきましょう！
変数とは？
変数とは、データに名前をつけて保存しておく仕組みのこと。
よく「名前付きの箱」に例えられます。
const name = "React太郎";
このように、データを保存するために新しく変数を作ることを
「変数を宣言する」 といいます。
この場合、
"React太郎"が中身（データ）nameが変数名（箱の名前）
というイメージです。
= の右側の値を、左側の変数に入れることを
「代入する」 といいます。
つまりこの1行では、
nameという変数を宣言して"React太郎"の文字列をnameという変数に代入している
ということになります。
一度変数に値を入れておけば、あとから何度でも取り出せます。
console.log(name);
プログラムは、
・データを保存する
・必要なときに取り出す
・場合によっては書き換える
という流れで動いています。
その出発点になるのが「変数」です。
var – かつての主役 –
昔のJavaScriptでは、変数を作る方法は var だけでした。
var user = "太郎";
var user = "次郎"; // エラーにならない
同じ名前でも、もう一度作れてしまいます。
さらに…
user = "上書き完了";
どこからでも中身を変更できます。
一見便利そうですが、
これが思わぬバグの原因になっていました。
気づかないうちに値が変わる。
同じ名前の変数が知らない場所で作られている。
「自由すぎる」ことが問題だったのです。
現在の開発では、var は基本的に使われません。
その代わりに、letやconst を使うのが今のスタンダードです。
let – 値を変更できる変数 –
var が自由すぎてバグを生みやすかったことを受けて、登場したのが let です。
let count = 0;
count = 1; // これはOK
let で宣言した変数は、あとから値を変更できます。
カウントアップのように、値が変わることが前提の処理で活躍します。
一方で、同じ名前でもう一度作ろうとすると…
let count = 0;
let count = 100; // ❌ 同じ変数名を宣言できないのでエラー
この場合はエラーになります。
Identifier ‘count’ has already been declared
「その名前はすでに使われています」と、
JavaScriptがきちんと止めてくれるのです。
let は、
・再宣言はできない
・上書きはできる
というルールを持った、
“変更はできるけれど、安全になった変数” です。
const – 値を変更しない変数 –
現在のJavaScript開発では、まず const を使うのが基本です。
const price = 100;
const で宣言した変数は、あとから値を変更することができません。
const price = 100;
price = 200; // ❌ 上書きできないためエラー
この場合はエラーになります。
Assignment to constant variable.
「この値は変更できません」と、
JavaScriptがきちんと止めてくれるのです。
const は、
・再宣言できない
・上書きできない
というルールを持っています。
一度決めた値が変わらないことで、
コードは読みやすくなり、予期せぬバグも防ぎやすくなります。
つまり、
値をあとから変更しない変数には const を使い、
本当に値を変更する必要が出てきたときだけ、let を使う
これが基本の考え方です！
constでも変更できるケース
ここは少しだけ注意が必要です。
const user = { name: "Tanaka" };
user.name = "Sato"; // これはOK
「あれ？変えられてる？」と思いますよね。
const が守っているのは、
「箱(変数)そのもの」なのです。
なので、
user = { name: "Suzuki" }; // ❌ 箱そのものは入れ替えられない
このように、箱を丸ごと入れ替えることはできません。
でも、箱の中身を整理することはできます。
・箱の交換 → NG
・箱の中の変更 → OK
この違いを覚えておきましょう！
変数には「使える範囲」がある
もうひとつ大切なのが「スコープ」です。
スコープとは、
その変数が使える範囲のこと。
JavaScriptでは、{ }（波かっこ）で囲まれた中でlet と const で宣言した変数は、その関数の中でしか使えません。
const greet = () => {
const message = "こんにちは";
console.log(message);
};
console.log(message); // ❌ { }の外で使用できないためエラー
message は関数の中で宣言されています。
そのため、波かっこの外では使うことができません。
このように、
・波かっこの中で宣言した変数は、その中だけで使える
・波かっこの外では使えない
というルールがあります。
これが「スコープ」です。
まとめ
変数の役割と違い、整理できたでしょうか？
＼＼ 今回のまとめ ／／
・ 変数は「データを入れる箱」。
・ var は自由すぎるため、現在は基本的に使わない。
・ let は「変更できる変数」。
・ const は「変更しない変数」。まずはこれを使う。
・ 変数には「使える範囲（スコープ）」がある。
難しいテクニックは出てきていません。
でも、この土台があるからこそ、
これから学ぶ配列・オブジェクト・Reactの理解がスムーズになります。
次は、箱の中にどんな種類のデータを入れられるのか、
「JavaScriptのデータ型」を見ていきましょう！
コメント