JavaScript | 基礎構文:変数・定数 – 変数とは何か

JavaScript
スポンサーリンク

まず「変数」をざっくり一言でいうと

変数は、
「あとで使うために値を入れておく“名前付きの箱”」
だと思ってください。

数字
文字
文字列(文章)
true / false
オブジェクトや配列

など、プログラムの中で扱いたいあらゆるデータを、一時的にしまっておく場所が変数です。

ここが重要です。
あなたが書くほぼすべてのコードは、
「値を変数に入れる → 取り出す → 計算する → また別の変数に入れる」
という流れの組み合わせだと思っていいくらい、変数は基本中の基本です。


日常のイメージから「変数」をとらえる

「メモ帳」と「ラベル」のイメージ

例えば、テーブルの上にメモ用紙があるとします。

1枚目のメモに「年齢」と書いて、その下に「20」と書く
2枚目のメモに「名前」と書いて、その下に「太郎」と書く

このとき、

「年齢」「名前」= ラベル(名前)
「20」「太郎」 = 実際の値

です。

プログラムでこれをやると、こうなります。

let age = 20;
let name = "太郎";
JavaScript

agename が「変数の名前」
20"太郎" が「変数に入っている値」
です。

変数は、
「“名前”が付いたメモ(箱)に、“値”を書いておく」ものだとイメージしてください。

「値は変わるかもしれない」から「変数」

算数の式で出てくる xy を思い出してください。

x = 3 のとき
y = x + 2
JavaScript

ここでの xy は、

あとで x = 5 になったり
x = 10 になったり

値が変わることを前提にしていますよね。

プログラミングの変数も同じで、

「この名前には、あとから別の値が入るかもしれない」
だから「変数(variable)」と呼ばれます。

let x = 3;
x = 5;      // x に入っている値を 5 に“上書き”
JavaScript

この「同じ名前の箱に、あとから別の値を入れ直せる」感覚が、変数の大事な特徴です。


JavaScript の変数宣言:let / const / var のうち「今」覚えるべきこと

まず覚えるのは「let」で十分

変数を作る(宣言する)基本形はこうです。

let x = 10;
JavaScript

let は、「あとから値を変えていい変数」を作るキーワードです。

let count = 0;
count = count + 1;  // 1
count = count + 1;  // 2
JavaScript

今の JavaScript では、
「変数を作るときは、基本的に letconst を使う」
と覚えておけば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;
JavaScript

letconst は、「宣言より前」に使うとエラーになります。

「上から順に読めるコード」にする意味でも、
常に、変数はできるだけ上(または使う直前)で宣言する 習慣をつけておくとよいです。

型はどうなる?(軽く触れる)

JavaScript の変数は、
「型を明示して宣言しない(number x とか書かない)」
のが特徴です。

let x = 10;      // 数値
x = "こんにちは"; // こういう書き換えも一応できてしまう
JavaScript

ただし、こういう書き換えは読みにくくてバグの元なので、
初心者のうちは、

「この変数には数字だけ入れる」
「この変数には文字列だけ入れる」

と、自分ルールで統一しておくと良いです。

ここが重要です。
JavaScript は「ゆるい」言語だけど、変数の使い方までゆるくすると地獄を見る。
“1つの変数には、基本1種類の意味の値だけ入れる” を意識するだけで、コードの安定感がかなり変わります。


まとめ:変数とは何か(初心者向けの核心)

最後に、「変数とは何か」をシンプルにまとめます。

変数は、プログラムの中で値を一時的に入れておく「名前付きの箱」。

letconst を使って宣言する。
let は「あとから値を変えてよい箱」、const は「中身を変えない箱」というイメージ。

値を入れる(代入)ときは = を使う。
同じ名前の変数に、あとから別の値を入れ直すこともできる(それが「変数」)。

直接数値や文字列を書き散らすのではなく、「意味のある変数名」に入れて使うことで、変更に強く、読みやすいコードになる。

ここが重要です。
変数は「プログラムの中の登場人物の名前」です。
“この値にはどんな意味があるのか” を変数名で表現し、その値を箱に入れておく。
その感覚が身につけば、どんな言語に行っても土台は同じです。

もしよければ、次のような小さな練習をしてみてください。

商品の値段(price)
数量(quantity)
税率(taxRate)

の 3 つの変数を自分で作って、
「小計」「税込金額」を変数に計算して入れ、console.log で表示する。

たったそれだけでも、
「変数を使って値を入れる → 計算に使う → 別の変数に結果を入れる」
というプログラミングの基本の流れが、自分の手で体験できるはずです。

タイトルとURLをコピーしました