変数の使い方と書き方｜JavaScript／on Note

変数の使い方

変数は、以下の3つの形で活用していくことになります。

宣言によって変数を作成し、その変数に値をひもづけます。値がひもづいた変数を参照することで、代入された値を用います。

変数を利用するにあたってまず最初に行うのが宣言です。

宣言とは変数に呼び名（変数名）を付けることです。これは、「以降この呼び名を変数として扱いますよ。」と宣言することにあたります。

変数の宣言にはletというキーワードを使います。
let 変数名;
とします。let と変数名の間は半角スペースを、文の末尾には ;（セミコロン）を入力します。letキーワードによって、その呼び名が変数であると宣言されたことになります。

以降、この呼び名を変数として扱えるようになります。

変数の命名には使える文字と使えない文字があったりと、一定のルールがあります。

代入では変数に値をひもづけます。
変数名 = 値;
とします。=（イコール）が「値を代入する」という意味を持ち、続けて値を記述します。文の末尾として ;（セミコロン）を記述します。

文字列を代入する場合は
変数名 = "値";
と、代入する文字列を "（ダブルクォーテーション）か '（シングルクォーテーション）で囲みます。

let x1;     //x1を変数と宣言
x1 = 5;     //変数x1に数値の5を代入

let text1;      //text1を変数と宣言
text1 = "を代入しました";   //変数text1に文字列を代入

変数同士を結合することもできます。

let result1;
result1 = x1 + text1;   //2つの変数を結合

変数result1 にが代入されています。

ここでは変数x1 に数値の 5 を代入しています。これは、数値を代入した変数x1 と数値の 5 は、number という同じデータ型として扱うことができる、ということです。

let result2;
    result2 = x1 + 10;
let result3;
result3 = 5 + 10;

変数x1には数値の 5 がひもづいていますので、変数result2 と result3 は同じ結果になります。

x1 + 10 の結果はです。

5 + 10 の結果はです。

値を代入していない変数にはundefined（「未定義な」という意味）という特別な値が入っている状態です。

例えばconsole画面で確認した時に「undefined」と表示されたのなら、その変数には値が入っていない、と認識されたということです。

let x2;

console.log(x2);    //console画面にundefinedを出力

let x1;
x1 = 5;

console.log(x1);    //console画面に 5 と出力

console.log( ) に変数x1 を参照している為、x1に代入されている 5 がconsole画面に出力されます。変数の参照によって、代入された値が渡されたということです。

宣言と代入を一緒に書いてしまうこともできます。

let x1 = 5;

「変数x1 に 5 を代入」を一緒に記述しています。宣言部にそのまま代入部を続けて記述します。

一度値を代入した変数だが、後にその値を変更したい場合が出てくるかもしれません。そんな時は値を代入し直すこともできます。同じ変数に異なる値を代入し直すことを再代入と言います。

let x1 = 5;
x1 = "再代入されました"

数値の 5 を代入していた変数x1 には、再代入によってという文字列が入っています。

再代入は、
変数名 = 再代入する値;
とします。宣言していた変数名を記述し、= に再代入する値と続け、; で文を終えます。

ある変数を宣言したとして、同じ階層では、同じ変数名で再び宣言してはいけません。同じ階層での重複した宣言のことを再宣言と言います（再定義とも呼ぶ）が、再宣言はエラーになります。

下記のように記述することで代入のし直しは可能でした。

let x1 = 5;     //変数x1を定義
x1 = 10;  //x1に10を再代入

再代入では変数名と代入部分を記述しました。もしこれを下記のように記述すると再宣言となりますのでエラーになります。

let x1 = 5;  //変数x1を定義
let x1 = 10;     //変数x1の再宣言となる

x1 という、一度使った変数名で、let キーワードを使って再び宣言している、ということになります。同じ変数名での宣言を同じ階層で行うとエラーになります。

再宣言（同じ階層で同じ変数名で再び宣言）となった場合、それはエラーになると述べました。ただし、先の宣言より下の階層での宣言（階層が違えば再宣言と呼ばない）であれば問題ありません。

先の宣言よりも下の階層で宣言し直したのであれば、下の階層では、宣言し直した変数の値が反映されます。上の階層の中でも、最も近い層の変数の値が反映される、ということです。値の上書きです。

一度定義した変数の値を、以後変更されては困るといった場合もあると思います。その場合はconstキーワードを使って宣言します。

constキーワードで宣言した変数に関しては、再宣言はもちろん再代入もできません。階層が変われば、再宣言や再代入にならないので、同じ変数名で宣言することはできます。

変数に、今後かわらないであろう値を代入する時はconstキーワードで宣言すると良いです。再代入もエラーとなるので、以後、誤って再代入されるといったことを防ぐことができます。

constキーワードでの宣言は、
const 変数名 = "値";
とし、宣言部と代入部を一緒に記述するようにします。下記のように宣言部と代入部を分けて記述することはできません。

const x1;
x1 = 5;     //エラーになる