基礎第二回
このページの最終更新日：
JavaScriptには、変数という重要な要素があります。数学に出てきそうな言葉ですが、あまり関係はありません。
変数とは、何かの値を自由に保存しておくものです。意味がわからなくても、とりあえず次のサンプルを実行してみてください。
a = 3;
alert(a);
実行する方法は、前回のHTMLのJavaScript部分を書き換えるのもいいですが、もう少し便利な方法があります。お使いのブラウザで、F12キーを押してください。（ブラウザによっては方法が異なるかもしれません。とにかく、デベロッパーコンソールを出してください。）その後、Escキーを押したりすると、コンソール(Console)が出ます。コンソールは、JavaScriptプログラムを入力するとその場で実行することができます。大抵入力欄は1行ですが、1行ずつ入力しなくても、複数行をコピー＆ペーストすると全部実行してくれます。コンソールは自分でHTMLを用意しなくてもJavaScriptを動かすことができるので便利です。また、入力欄に打ち込むことで、次々と追加でプログラムを実行することができます。活用してください。
さて、上のプログラムは実行すると「3」というアラートが出ます。
アラートを出しているのはalert(a);の文であることは分かると思いますが、引数が「3」や「"3"」ではなく「a」です。しかも前回のように"で囲まれていません。これは今までに解説していないパターンですが、なぜか「3」が表示されます。
予想はつくと思いますが、その理由はその前の文、a = 3;にあります。単語や記号の間にスペースがありますが、これは見やすさのためなので、a=3;のように間をあけなくても構いません。とはいっても、プログラムが大きくなってくると見やすさというのも重要です。
さて、どうやらこの文では「a」というものが関わっているようです。alertの引数もaです。予想はつきますが、このaこそが変数です。
では、この文a = 3;の意味ですが、この文では「aに3を代入する」ということをしています。
aに3を代入するとは、「aが3を表すようにする」ということです。意味が分かりにくいですが、例えばaを箱と考えると分かりやすいです。aという箱（変数）に3を入れると、中身をそのまま使うかわりに箱ごと使うことができます。
つまり、aに3を代入したことによって、aを3として使えるようになったということです。
変数の何が良いのかよく分からないと思いますが、変数の良い点は中身を入れ替えることができることです（ただし、中身を入れ替えられない変数もあります。だいぶ先ですが、第十六章第三回を参照。）。次のサンプルを見てみましょう。
a = 3;
alert(a);
a = 4;
alert(a);
a = "にゃー";
alert(a);
上から順に実行されるので、アラートが連続して3回出ます。3回とも「a」が引数なのですが、出たアラートは「3」「4」「にゃー」と毎回違いました。
これは、aに値を代入することでaの中身が変わっているからです。既に中身が入っている変数に再び代入すると、新しい値で中身が置き換わります。
この場合はあまり変数の利点を生かせていませんが、そのうち変数を有効活用できる場面が多く出てきます。
ちなみに、今回は「a」ですが、この変数の名前は自由です。プログラムが複雑になってくると、たくさんの変数を使うことになります。変数にはその用途が分かりやすい名前をつけるのが作法であるとされています。
なお、記号などは変数名に使えないことがあります。また、変数名の先頭（最初の文字）が数字であってはいけません。
ちなみに、日本語を変数名に使ったりすることはできます。そうはいっても、やはりプログラムの共通語は英語だし、アルファベットの変数名をつけておくのが無難でしょう。
あいう = 3;
alert(あいう);
数値の計算
JavaScriptは数値の計算ができます。次のサンプルを見てみましょう。
a = 3 + 4;
alert(a);
a = a * 2;
alert(a);
alert(a / 7);
実行すると、「7」「14」「2」と出ます。最初の2回のalert関数の引数はまた変数のaですが、その前のaに値を代入する部分が少し違っています。
1回目はa = 3 + 4;のように代入されています。これには処理の順番があって、まず3 + 4が処理されます。ここで、真ん中の「+」は演算子といいます。
この+は、左と右の2つを足したものを返します。演算子が作用する値（この場合+演算子の左と右の値）をオペランドといいます。
演算子が値を返すとはどういうことかというと、その部分が計算されて、その結果に置き換わるということです。いま、a = 3 + 4;の「3 + 4」が処理されます。計算結果は、当然7です。したがって、次のようになります。
a = 7;これが処理されて、aに7が代入されるので、alertで7が表示されるというわけです。
演算子は他に「-」「*」「/」「%」などがあります。-は引き算で、*は掛け算、/は割り算です。%は見慣れないものですが、「左オペランドを右オペランドで割った余り」を返します。
それを踏まえて、2回目のaへの代入を見てみます。
a = a * 2;まず処理されるのは
a * 2です。左オペランドが変数aですが、当然変数を使うこともできます。aはいま7なので、「7 * 2」が処理されて14になります。
a = 14;したがって、aには14が代入され、alert(a);では「14」が表示されます。
最後の行は、alertの引数がaなどではなく、a / 7となっています。
実は、関数の引数にはこのように式を与えることができます。式とは、演算子などを用いて表されたプログラムで、何らかの結果を返すものを指します。式a / 7が計算されると2になります。よって、alertの引数は2となり「2」が表示されたのです。
そう考えると、先ほどまでalertの引数に渡されていたaも式の一種であることが分かります。変数名それ自体も式であり、その働きは「変数の中身を返す」ということになります。
演算子
演算子は、先に紹介したものの他にもたくさん種類があります。「+」「-」「*」「/」「%」の5つは、四則演算（足す・引く・かける・割るの4つの計算）を表す算術演算子といいます。
他に代入演算子という種類の演算子があります。代入をする演算子です。代表的なものは、既に出てきている「=」です。この=も演算子の一種だったのです。
=は、左オペランドに右オペランドを代入するという働きがあります。a = 3;の場合、=演算子の働きにより、左のaに右の3を代入しているというわけです。
また、演算子は必ず何かを返します。算術演算子の場合その演算結果を返しますが、代入演算子は何を返すのでしょうか。次のサンプルで実験してみます。
alert(a = 5);先ほど説明したとおり関数の引数には式を与えることができます。=は演算子ですから、a = 5は式ということになります。
さて、試してみると「5」と出ます。つまりa = 5が5を返したということになります。
実は、代入演算子=は、代入された値を返すのでした。つまり、次のような処理が行われたことになります。
alert(a = 5);
↓
alert(5);
もちろん代入演算子ですから、この過程でaには5がちゃんと代入されています。続けてalert(a);などとしてみると確かめられます。
ところで、さっきまで変数への代入は次のように行なってきました。
a = 5;a = 5が式であることを踏まえると、この文は式;という形をしていることが分かります。（最後が;で終わるのが文であることを思い出しましょう。）
他の形をした文もあるのですが、式;の形の文の意味は「式を計算するだけ」です。つまり、a = 5;という文は、より正確にはa = 5という式を計算していたことになります。なお、式の返り値はとくに意味がありません。
ですから、他の式をここに入れて、a;とか、3 + 4;といった文も可能です。ただし、計算の結果はとくに使われずに捨てられるので、これらの文は意味がありません。a = 5;の場合、演算子=に値を返す以外に、変数に値を代入するという効果があったので意味のある文になっています。このように、式を返す以外の処理を副作用といいます。
代入演算子の種類
代入演算子には、他にも種類があります。「+=」「-=」「*=」「/=」「%=」などがあります。このように、演算子は2文字以上になる場合もあります。
この5種の演算子は、先に紹介した算術演算子に「=」をくっつけた形です。次のサンプルを見てみましょう。
a = 3;
a -= 1;
alert(a);
「a = 3;」でaに3を代入しています。その後「-=」でaに何かを代入して、アラートで表示されたaの値は「2」です。
実は、このa -= 1;は、a = a - 1;と同じ意味です。つまり、「aから1を引いた値を代入する」という意味です。
もっとわかりやすくすると、-=は「左オペランドの変数から右オペランドの値を引く」ということになります。上のサンプルだと、aに3が代入されていた所から1を引き、aには2が代入された状態になります。+=,*=,/=,%=も同じように対応しています。
演算子の優先順位
演算子には優先順位、つまり処理する順番があります。次の例を考えてみましょう。
a = 3 + 5;これは次の形をしていることに気付きます。
a = 式;ところが、a = 3が式であることを踏まえると、次のような解釈もできるのではないでしょうか。
式 + 5;この2つの解釈のどちらが正しいかということを定めるのが、演算子の優先順位です。上の2つの例は、+を先に処理するのか、それとも=を先に処理するのかという違いと見ることができます。
結論を述べると、代入演算子よりも算術演算子のほうが優先順位が高い（先に処理される）です。つまり、a = 式;という解釈が正しく、式 + 5;は間違いということです。上の例では、aには3ではなく8が代入されます。
算術演算子同士にもこういうことはあります。現実でも、足し算引き算より掛け算割り算のほうを先に計算するのは当たり前の話です。これは、JavaScriptでも同じです。
3 + 5 * 2
↓
3 + 10
↓
13また、優先順位が同じ場合、どちら側から計算していくかも決まっています。現実でも、四則演算なら普通左から計算していきますね。
1 + 4 / 2 + 3
1 + 2 + 3
3 + 3
6しかし、実は右から順番に計算していくものもあります。代入演算子がそれです。そのため、次のようなことができます。
a = b = c = d = 3
a = b = c = 3
a = b = 3
a = 3
3右から順に代入されていき、a,b,c,d全てに3が代入されました。