変数とは？値を入れて使う仕組みを初心者向けに解説

変数とは？値を名前で扱うための仕組み

変数とは、数値や文字などの値を保持し、名前を使って扱うための仕組みです。 値とは、たとえば個数の 2 や、商品名の「りんご」のようなデータのことです。

最初は、変数を「名前のラベルが付いた箱」と考えるとイメージしやすくなります。「個数」というラベルの箱に 2 を入れておけば、後から「個数」の名前で、その値を計算に使えます。

ここで区別したいのは、名前と中身は別ということです。個数を2個から3個に変えても、「個数」という名前まで変える必要はありません。

箱はあくまで理解のためのたとえです。まずは「名前を使うと、その時点の値を扱える」と押さえましょう。

変数に値を入れて使う流れ

1個200円の商品を2個買う場面を考えます。合計は「単価×個数」で400円です。この計算を、変数を使って表してみましょう。

ここからは、プログラミング言語の一つであるJavaScriptの書き方を使います。ほかの言語では書き方が異なるため、まずは値の流れに注目してください。この例は上から順に処理されます。実行環境を用意しなくても、コードを読むだけで確認できます。

値を入れる

let price = 200;
let quantity = 2;

price は単価、quantity は個数を表すためにつけた名前です。英語の名前を暗記する必要はありません。

1行目は「price という変数を用意し、最初の値として 200 を入れる」という意味です。2行目では、quantity に 2 を入れています。

このように変数を用意することを「宣言」、最初の値を設定することを「初期化」と呼びます。ここでは let という書き方で、後から値を入れ直せる変数を用意しています。末尾の ; は文の区切りです。

ここでの = は、最初に入れる値を指定するための記号です。算数の「左右が等しい」という意味ではありません。宣言した後に値を設定する「代入」は、後の例で確認します。

名前を使って計算する

続けて、合計を計算します。

let total = price * quantity;

total は合計を入れる変数につけた名前です。* は掛け算を表します。

右側の price * quantity では、その時点の値である 200 と 2 を使って計算します。そして、計算結果の 400 が total に入ります。

ここまでの値は、次のとおりです。

変数の名前	表すもの	入っている値
price	単価	200
quantity	個数	2
total	合計	400

値を計算に使っても、元の変数から値がなくなるわけではありません。price と quantity は、別の計算にも使えます。

値を入れ直す

買う数を3個に変更したい場合は、続けて次のように書きます。

quantity = 3;

すでに用意した変数なので、この行では let を付けません。quantity の値が 2 から 3 に変わります。宣言した変数に値を設定する操作を「代入」、すでに値のある変数に入れ直すことを「再代入」と呼びます。この行の = は、右側の値を左側の変数に設定する記号です。

この時点では、変わったのは個数だけです。合計も更新するには、計算する行をもう一度実行します。

total = price * quantity;

今度は 200 × 3 を計算するため、total は 600 になります。

変数を使うと何が便利？

200 * 2 と直接書いても、400という計算結果は出せます。ただ、その数字だけでは、単価と個数を掛けているのかが伝わりにくいことがあります。

price * quantity と書けば、名前から「単価×個数」の計算だと読み取れます。値の意味を名前で表せることが、変数を使う利点の一つです。

また、実際の買い物画面では、利用者によって選ぶ個数が違います。画面で選ばれた個数を変数へ入れる処理を用意すれば、同じ price * quantity という書き方で、その個数に応じた金額を計算できます。

初心者がつまずきやすい3つのポイント

「今の値に1を足す」と読む

先ほどの個数を、もう1個増やす場合を考えましょう。

quantity = quantity + 1;

左右に同じ名前がありますが、数式のように考えなくて大丈夫です。次の順番で読みます。

1. 右側で、今の quantity の値である 3 を読む。
2. 3 + 1 を計算し、4 にする。
3. 結果の 4 を、左側の quantity に入れる。

つまり、「今の個数に1を足して、個数を更新する」という指示です。

計算した結果は自動で変わらない

ここで、最初の2個の状態から、もう一度流れを整理します。

実行した処理	個数 quantity	合計 total
単価200・個数2で合計を計算	2	400
quantity = 3;	3	400
total = price * quantity;	3	600

total に入ったのは、そのときに計算した結果です。単価や個数の変更を見張って、自動で計算し直す仕組みが設定されたわけではありません。

そのため、個数を変える処理と、合計を計算し直す処理が必要になります。買い物画面で個数を変えると合計も変わるのは、そのように計算し直して表示する処理が用意されているためです。

個数を変えた後、合計はいくつ？

単価200・個数3・合計600の状態から、次の2行を順に実行します。それぞれの行の後で、個数と合計はいくつになるでしょうか。

quantity = 4;
total = price * quantity;

1行目の後は、個数が 4、合計は 600のままです。2行目の後は、個数が 4、合計が 800 になります。迷ったら、個数が変わる行と、合計が変わる行を分けて見てみましょう。

数値と文字は区別する

変数には、数値だけでなく文字も入れられます。たとえばJavaScriptで商品名を扱うなら、let productName = "りんご"; のように書きます。文字の並びを「文字列」と呼び、引用符で囲みます。

数字も、引用符で囲むと数値とは扱いが変わります。

JavaScriptの式	結果	何をしているか
2 + 1	3	数値を足す
"2" + "1"	"21"	文字をつなげる

見た目が数字でも、必ず計算用の数値とは限りません。思った結果にならないときは、「どんな値か」に加えて「数値なのか、文字列なのか」も確認します。

よくある疑問

変数の名前は自由につけてよい？

言語のルールの範囲でつけられます。今回のようにJavaScriptの let で変数を用意するときは、数字で始まる名前や let そのものは名前に使えません。また、price と Price は別の名前です。

最初は、a や b だけよりも、price や quantity のように意味が分かる名前を意識しましょう。読む人が、その値の役割をつかみやすくなります。

変数と定数はどう違う？

定数は、一度設定した値を後から入れ直せないものです。JavaScriptでは、const を使って用意します。

たとえば、単価を const で用意すると、次のようになります。

const price = 200;
price = 300; // 値を入れ直そうとするとエラー

1行目では、price という名前の定数を用意し、最初の値として 200 を入れています。2行目では 300 を入れ直そうとしていますが、const で宣言しているためエラーになります。

ここまでの買い物の例では、書き方をそろえるために let を使いました。途中で値を入れ直さない単価には、const を使うこともできます。

ただし、JavaScriptの『オブジェクト』という、複数の項目をまとめる書き方では、中の項目を変更できる場合があります。

変数に入れた値はずっと残る？

変数に入れるだけでは、アプリを閉じた後も値を残す保存にはなりません。変数は、プログラムの処理中に値を扱うために使います。

次にアプリを開いたときも同じ値を使いたい場合は、ファイルやデータベースなどへ保存し、読み込む仕組みを別に用意します。

まとめ

変数は、値を保持し、名前を使って扱うための仕組みです。買い物の例では、単価・個数・合計をそれぞれ名前で扱いました。

• 値を設定する操作が「代入」、もう一度設定する操作が「再代入」。
• = の右側で値や計算結果を求め、左側の変数へ入れる。
• 計算に使った値を変更しても、計算済みの結果は自動では変わらない。

教材で変数が出てきたら、「どの名前に、今どんな値が入っているか」を1行ずつメモしてみてください。今回の表のように追うと、値が変わるタイミングを確かめられます。

関連記事

• 初めてのコードエディタ｜基本操作と確認ポイント：コードを書く道具に慣れたい方へ。ファイルの編集・保存・検索を練習できます。プログラムの実行手順とは分けて説明しています。
• デバッグとは？意味やテストとの違いを初心者向けにやさしく解説！：思った結果にならないとき、値や処理を調べて原因を見つける作業を知りたい方へ。