まず「変数」をざっくり一言でいうと
変数は、
「あとで使うために値を入れておく“名前付きの箱”」
だと思ってください。
数字
文字
文字列(文章)
true / false
オブジェクトや配列
など、プログラムの中で扱いたいあらゆるデータを、一時的にしまっておく場所が変数です。
ここが重要です。
あなたが書くほぼすべてのコードは、
「値を変数に入れる → 取り出す → 計算する → また別の変数に入れる」
という流れの組み合わせだと思っていいくらい、変数は基本中の基本です。
日常のイメージから「変数」をとらえる
「メモ帳」と「ラベル」のイメージ
例えば、テーブルの上にメモ用紙があるとします。
1枚目のメモに「年齢」と書いて、その下に「20」と書く
2枚目のメモに「名前」と書いて、その下に「太郎」と書く
このとき、
「年齢」「名前」= ラベル(名前)
「20」「太郎」 = 実際の値
です。
プログラムでこれをやると、こうなります。
let age = 20;
let name = "太郎";
JavaScriptage や name が「変数の名前」20 や "太郎" が「変数に入っている値」
です。
変数は、
「“名前”が付いたメモ(箱)に、“値”を書いておく」ものだとイメージしてください。
「値は変わるかもしれない」から「変数」
算数の式で出てくる x や y を思い出してください。
x = 3 のとき
y = x + 2
JavaScriptここでの x や y は、
あとで x = 5 になったりx = 10 になったり
値が変わることを前提にしていますよね。
プログラミングの変数も同じで、
「この名前には、あとから別の値が入るかもしれない」
だから「変数(variable)」と呼ばれます。
let x = 3;
x = 5; // x に入っている値を 5 に“上書き”
JavaScriptこの「同じ名前の箱に、あとから別の値を入れ直せる」感覚が、変数の大事な特徴です。
JavaScript の変数宣言:let / const / var のうち「今」覚えるべきこと
まず覚えるのは「let」で十分
変数を作る(宣言する)基本形はこうです。
let x = 10;
JavaScriptlet は、「あとから値を変えていい変数」を作るキーワードです。
let count = 0;
count = count + 1; // 1
count = count + 1; // 2
JavaScript今の JavaScript では、
「変数を作るときは、基本的に let か const を使う」
と覚えておけばOKです。
const は「値を変えない約束の変数」
const は、「一度入れた“参照”を変えない箱」を作るキーワードです。
const pi = 3.14;
// pi = 3.1415; // こう書くとエラー(再代入できない)
JavaScript「これは絶対に変えたくない値だな」
というときは const を使います。
初心者のうちは、
基本は const
どうしても値を変える必要があるものだけ let
くらいのスタンスで考えると、バグを減らせます。
var は「古い書き方」だと思っておく
var でも変数は作れます。
var x = 10;
JavaScriptですが、振る舞いが微妙で、スコープ(有効範囲)の違いなどで初心者にはかえって混乱の元になります。
今から JavaScript を覚えるなら、
「変数は let / const を使う。var は“昔の書き方”として、いったん棚上げ」
で大丈夫です。
実際に値を入れて、読み出す流れを見てみる
代入(値を入れる)と、参照(値を使う)
変数に値を入れることを「代入」と言います。
let message = "こんにちは";
JavaScriptこれで、「message という箱」に "こんにちは" が入ります。
その値を使うときは、単に名前を書くと、その中身が参照されます。
console.log(message); // こんにちは
JavaScriptここでは、message が "こんにちは" に置き換えられているイメージです。
値を更新する(上書きする)
変数の「変」の部分を体験してみます。
let score = 50;
console.log(score); // 50
score = 80; // 上書き
console.log(score); // 80
JavaScript同じ score という箱に、
あとから別の値を入れ直せる のが変数です。
これを使って、カウンターのようなものも簡単に書けます。
let count = 0;
count = count + 1; // 1
count = count + 1; // 2
console.log(count); // 2
JavaScriptここが重要です。
「変数の名前」自体は変わらない。
「中身の値」だけが変わる。
だからこそ、その名前をあちこちで再利用できる。
変数を使う意味:直接値を書くのと何が違うのか
直接書いてしまうと困るパターン
例えば、商品の価格を扱うコードがあるとします。
console.log("商品Aの値段: " + 1200 + "円");
console.log("商品Aの税込価格: " + 1200 * 1.1 + "円");
JavaScript一見問題なさそうですが、
「1200」の部分が複数の場所に直書きされています。
もし価格が「1500円」に変わったら、
コードの中の「1200」を全部探して書き換えないといけない ですよね。
1か所でも忘れたらバグです。
変数に入れておくと、変更に強い
同じ処理を変数を使って書き直すと、こうなります。
let price = 1200;
console.log("商品Aの値段: " + price + "円");
console.log("商品Aの税込価格: " + price * 1.1 + "円");
JavaScript価格が変わったら、price の代入部分だけ変えればいい。
let price = 1500; // ここだけ直せば、下のすべてに反映される
JavaScriptここが重要です。
変数は「変更に強いコード」を書くための道具。
値をべた書きするのではなく、「意味のある名前付きの箱」に入れておくことで、後から仕様が変わっても修正がラクになる。
変数名の付け方:ここで手を抜くと後で苦しむ
避けたい名前と、付けたい名前
たとえば、こんな名前はおすすめできません。
let a = 1200;
let b = 0.1;
let c = a + a * b;
JavaScript意味が分からないですよね。
半年後に自分で見ても、「これ何だっけ…」となります。
同じ処理でも、名前をつけ直すだけで理解しやすくなります。
let price = 1200;
let taxRate = 0.1;
let total = price + price * taxRate;
JavaScriptこうしておくと、
price → 価格
taxRate → 税率
total → 合計
という意味が一目で分かります。
ここが重要です。
変数名は「今の自分が楽をするため」ではなく、「未来の自分(や他人)が読んだときに迷わないため」に付ける。
意味のある日本語/英語を使って、何を表す変数なのかを名前で説明してあげるイメージを持ってください。
JavaScript 特有のポイントを少しだけ
「宣言してから使う」基本スタイル
JavaScript では、変数は基本的に「宣言してから使う」と考えましょう。
console.log(x); // これはエラー(ReferenceError)
let x = 10;
JavaScriptlet と const は、「宣言より前」に使うとエラーになります。
「上から順に読めるコード」にする意味でも、
常に、変数はできるだけ上(または使う直前)で宣言する 習慣をつけておくとよいです。
型はどうなる?(軽く触れる)
JavaScript の変数は、
「型を明示して宣言しない(number x とか書かない)」
のが特徴です。
let x = 10; // 数値
x = "こんにちは"; // こういう書き換えも一応できてしまう
JavaScriptただし、こういう書き換えは読みにくくてバグの元なので、
初心者のうちは、
「この変数には数字だけ入れる」
「この変数には文字列だけ入れる」
と、自分ルールで統一しておくと良いです。
ここが重要です。
JavaScript は「ゆるい」言語だけど、変数の使い方までゆるくすると地獄を見る。
“1つの変数には、基本1種類の意味の値だけ入れる” を意識するだけで、コードの安定感がかなり変わります。
まとめ:変数とは何か(初心者向けの核心)
最後に、「変数とは何か」をシンプルにまとめます。
変数は、プログラムの中で値を一時的に入れておく「名前付きの箱」。
let や const を使って宣言する。let は「あとから値を変えてよい箱」、const は「中身を変えない箱」というイメージ。
値を入れる(代入)ときは = を使う。
同じ名前の変数に、あとから別の値を入れ直すこともできる(それが「変数」)。
直接数値や文字列を書き散らすのではなく、「意味のある変数名」に入れて使うことで、変更に強く、読みやすいコードになる。
ここが重要です。
変数は「プログラムの中の登場人物の名前」です。
“この値にはどんな意味があるのか” を変数名で表現し、その値を箱に入れておく。
その感覚が身につけば、どんな言語に行っても土台は同じです。
もしよければ、次のような小さな練習をしてみてください。
商品の値段(price)
数量(quantity)
税率(taxRate)
の 3 つの変数を自分で作って、
「小計」「税込金額」を変数に計算して入れ、console.log で表示する。
たったそれだけでも、
「変数を使って値を入れる → 計算に使う → 別の変数に結果を入れる」
というプログラミングの基本の流れが、自分の手で体験できるはずです。
