変数

変数とは

変数とは、データ（値）の入れ物（箱）のこと。

箱についている名前が「変数名」であり、箱の中に実際の値（文字列や数値など）が入っているイメージ。

変数は「 let 変数名 = 値 」として定義する。

プログラミングにおいては「 = 」は「等しい」という意味ではなく、「右辺を左辺に代入する」という意味。

「 let 」は「これから変数を定義します」という宣言で、その後ろに定数名を書き、値を代入する。

let name = "hiro60";

変数の使い方

変数を定義したら、その変数を出力すると変数の部分は代入した値に置き換わる。

let name = "hiro60";
console.log(name); 置き換えのイメージ → console.log(hiro60);

hiro60

変数はクォーテーションで囲まない。

「console.log(“name”);」のように変数名をクォーテーションで囲んでしまうと、変数ではなく「文字列」として認識され、「name」とそのまま出力されるので注意。

let name = "hiro60";
console.log(name);
console.log("name"); クォーテーションで囲むと文字列になる

hiro60
name // そのまま出力される

変数は「文字列」や「数値」とまったく同じように扱える。

代入されている値が、文字列の場合には他の文字列と結合することができ、数値の場合は計算に用いることができる。

let name = "hiro60";
console.log(name + "さん");

let number = 11;
console.log(number + 5);

hiro60さん
16

なぜ変数を使うのか？

実際のプログラムでは多くの値が登場する。

プログラムを書く際はそれらの値を間違いないように、そして値の変更に対応しやすいようにすることが求められる。

それを助けるための１つの仕組みが変数。変数には以下のメリットがある。

具体例

以下のように似た文章を何度も書くのは面倒だが、変数を使えば同じ値を繰り返し使え、楽にコードを書くことができる。

また、文章があとから変更されても、変数を用いていれば、代入する値を変更するだけですべての変更に対応できる。

変数を使用しない場合

console.log("鈴木さん、おはようございます");
console.log("佐藤さん、おはようございます");
console.log("田中さん、おはようございます");

「おはようございます」の部分を「こんにちは」に変えるなら３ヶ所すべてを変更する必要がある。

変数を使用する場合

let text = "おはようございます";
console.log("鈴木さん、" + text);
console.log("佐藤さん、" + text);
console.log("田中さん、" + text);

「おはようございます」の部分を「こんにちは」に変えるなら、変数に代入する文字列を変えるだけでOK。

変数の命名ルール

変数名は自由に決めることができるが、できるだけわかりやすい名前をつけるようにする。

ES6ではいくつかの命名ルールがあるので、適切な変数名をつけるように注意する。

変数の更新

変数は、一度代入した値を変更することができる。

一度、値を代入した変数に、再び値を代入すると、あとから代入した値で変数の中身が上書きされる。

定義するときと違い「let」は必要なく、「変数名 = 新しい値」と書けば値が変更される。

let name = "hiro";
console.log(name);
name = "hiro60";  更新するときは「let」はつけない
console.log(name);

hiro
hiro60 // 上書きされた変数の値が出力される

プログラムは上から順番に実行されるので、あとから書いた値で更新される。

変数自身を更新する

「すでに定義している変数numberの値に３を足したい」という場合はどうすればよいか？

以下のようにnumberに３を足して、再びnumberに代入することで実現が可能。

「=」の右側のnumberは値に置き換わり、計算された結果が左のnumberに代入される。

let number = 2;
console.log(number);

number = number + 3;
console.log(number);

2
5

省略した書き方

「number = namber + 10」という書き方は省略して書くこともできる。

プログラムではこちらの方をよく使う（らしい）ので、こちらの書き方を覚えるようにする。

X = X + 10  → → →  X += 10
X = X - 10  → → →  X -= 10
X = X * 10  → → →  X *= 10
X = X / 10  → → →  X /= 10
X = X % 10  → → →  X %= 10