最速JavaScript講座

MZには『変数』という概念があり、イベントコマンド『変数の操作』から名前を付けて自由に数値を代入したり加算したりできました。
同じ仕組みがJavaScriptにも存在します。
この章では、JavaScriptの変数とMZの変数の違いから活用の方法までを解説します。

変数の宣言

まず、MZの変数と違い、JavaScriptの場合は変数を『宣言』する必要があります。
宣言とは『指定した名前で変数を定義します』とプログラム側に伝えることです。
変数は宣言しないと使えません。

let aaa = 0;

上記の例では『aaa』という名前の変数を使いますよ、と宣言して、同時に0を代入しています。
イベントコマンドの変数では最初から0が入っていましたがJavaScriptの変数には代入しない限り何も入りません。
正確に言うと未定義を意味する『undefined』という特別な値が入っています。
letというのは宣言をするために必要な、文法で決まった記述です。
let以外にもJavaScriptでは文法で決まった記述や言葉がいくつかあり、これらは『予約語』と呼ばれています。
一方、変数の名前「aaa」は好きな名前を決めることができます。ただし、前述の予約語や一部の記号などは利用できません。
なお、同じ名前の変数を再度定義するとエラーになります。

Uncaught SyntaxError: Identifier 'aaa' has already been declared

数値の計算

イベントコマンド『変数の操作』では、代入以外にも加算や乗算など一通りの計算が可能でした。
JavaScriptの変数でももちろん可能です。
まず変数を定義します。

let x = 1;

そしてそれぞれ以下の通り記述します。

種別	スクリプト	結果	短縮版スクリプト
加算	x = x + 1;	2	x += 1;
減算	x = x - 1;	0	x -= 1;
乗算	x = x * 2;	2	x *= 2;
除算	x = x / 2;	0.5	x /= 2;
剰余	x = x % 2;	1	x %= 2;

こうすることで変数『x』に計算結果が格納されます。
console.log(x);で中身を確認してみましょう。
実行するのは『スクリプト』でも『短縮版スクリプト』でもどちらでもOKです。
イベントコマンドと同じ感覚で変数の操作ができることがお分かり頂けると思います。
加えて、加算、減算する値が[1]のときはさらに以下のように短縮できます。

x++;
x--;

これはインクリメント演算子、デクリメント演算子と呼ばれ、実際のプログラミングでも多用されます。

変数の型

イベントコマンドの変数に入れられたのは『数値』だけでした
ですが、JavaScriptでは変数に数値以外の値を格納できます。
代表的なものは以下の通りです。

真偽値（true/false）

文字列

null

undefined

配列

オブジェクト

関数

真偽値とはイベントコマンドにおける『スイッチ』と同じです。スイッチONをtrue、スイッチOFFをfalseと表現します。

let aaa = true;

文字列とは日本語や英語、記号などの文字の羅列です。
文字列の最初と最後をシングルクオート「'」もしくはダブルクオート「"」で囲みます。

let aaa = 'test mzあああ!"#$%';

nullとは、『何もない状態』を表現します。
前述したundefinedに近い概念ですが、undefinedは『何も定義されていない』状態で、nullは『何もないが定義されている』状態と言えます。

let aaa = null;

配列、オブジェクト、関数については複雑なので後述します。

配列

前項で説明した変数の型の中でも、『配列』と『オブジェクト』は少し複雑です。
これらは複数の変数をまとめて取り扱うことができます。
まず配列ですが、これは値を横に並べたものをまとめて扱う変数です。

let aaa = [1, 2, 3, 4];

中身を参照するには以下の通りに記述します。

console.log(aaa[0]);

カッコの中で指定している『0』は『添字』と呼ばれ、配列のどこを参照するのかを指定するものです。
また、中に入っている『1』や『2』は、『要素』と呼びます。
一番左の要素の添字は0番で、順番に1, 2...と増えていきます。
つまり、上記のスクリプトを実行すると0番目の要素である「1」が表示されます。

また、配列は『.length』と後ろに記述することで配列の要素数を取得できます。

console.log(aaa.length);

オブジェクト

配列では数値を添字にして複数の変数をまとめていました。
一方、文字列を添字とするのが『オブジェクト』です。
これは他の言語における『連想配列』や『構造体』に近いものです。
（厳密には少しちがってJavaScriptには別途、正式な連想配列が存在しますが、ここでは割愛します）

let aaa = {bbb:1, ccc: 2, ddd: 3};

配列の場合は『添字』と表現しましたが、オブジェクトの場合は『bbb』や『ccc』は一般的に『プロパティ』と呼びます。

配列と同様に、参照するときは以下の通り記述します。
文字列なので前後にシングルクオートを指定することを忘れないでください。

console.log(aaa['bbb']);

上記の結果は『1』が返ります。
さらにオブジェクトの場合は、以下のような参照も可能です。

console.log(aaa.bbb);

この場合は、カッコやシングルクオートは不要ですが、プロパティに記号（アンダースコアなど一部除く）を用いることはできません。
この『.』を使ったプロパティの参照は、コアスクリプト上でも多用されています。
ここでしっかり基本を押さえておきましょう。

aaa.bbbとは、オブジェクト『aaa』のプロパティ『bbb』を参照する、という意味です。

応用編

ここで今までの知識を使って複雑なプログラムを実行してみます。ちゃんと内容を理解できているか確かめてみてください。
以下のスクリプトを実行してみましょう。ただし、コピーではなくぜひ直接打ち込んでみてください。

let obj = {prop1:0, prop2:1};
obj.prop1 += obj.prop2;
let propName = 'prop3';
obj[propName] = 5;
let num = obj.prop3;
console.log(obj.prop1 + obj.prop2 / num);
          

それぞれ行数ごとに解説します。

• 変数『obj』を宣言して、新規作成したオブジェクトを格納しています。
• objのプロパティ『prop1』に『prop2』の値を加算しています。prop1には『0 + 1』つまり『1』が格納されます。
• 変数『propName』を宣言して文字列『prop3』を格納しています。
• 変数『obj』に新しいプロパティを作成しています。プロパティ名は『変数propNameの値』つまり『prop3』です。
• 変数『num』に、前項で定義したobj.prop3を代入しています。よってnumには『5』が格納されます。
• 最後に、『prop1』+『prop2』/『num』の計算結果を出力します。現実の数学と同じように複数の演算を組み合わせることができます。

特筆すべきはまず4です。
ここではプロパティに変数を指定しています。
JavaScriptではプロパティを参照するときに『変数の値』をもとに参照することが可能なのです。
このテクニックはいずれ役に立ちます。

次に6です。
イベントコマンドでは、ひとつのコマンドで実行できる計算はひとつだけでした。
一方JavaScriptでは現実の数学と同様、ひとつの構文内で複数の計算が可能です。
ところで数学では演算に優先順位があることを覚えているでしょうか。
加算と乗算では、乗算が先に計算されます。

よってこの結果は『1 + 1 / 5』となり、『1.2』が出力されます。