uhyohyo.net

JavaScript初級者から中級者になろう

基礎第二回

JavaScriptには、変数という重要な要素があります。数学に出てきそうな言葉ですが、あまり関係はありません。

変数とは、何かの値を自由に保存しておくものです。意味がわからなくても、とりあえず次のサンプルを実行してみましょう。(今回から、HTML部分を省略してJavaScript部分のみ掲載します。前回のHTMLのJavaScript部分だけ書き換えるなどして実行してみましょう。)

a = 3;
alert(a);

「3」というアラートが出ます。

アラートを出しているのはalert(a);の文であることは分かると思いますが、引数が「3」や「"3"」ではなく「a」です。しかも前回のように"で囲まれていません。これではエラーが出るはずなのに、なぜか「3」が表示されます。

予想はつくと思いますが、その理由はその前の文、a = 3;にあります。単語や記号の間にスペースがありますが、これは見やすさのためなので、a=3;のように間をあけなくても構いません。とはいっても、プログラムが大きくなってくると見やすさというのも重要です。

さて、どうやらこの文では「a」というものが関わっているようです。alertの引数もaです。予想はつきますが、このaこそが変数です。

では、この文の意味ですが、この文では「aに3を代入する」ということをしています。

aに3を代入するとは、「aが3を表すようにする」ということです。意味が分かりにくいですが、例えばaを箱と考えると分かりやすいです。aという箱(変数)に3を入れると、中身をそのまま使うかわりに箱ごと使うことができます。

つまり、aに3を代入したことによって、aを3として使えるようになったということです。

変数の何が良いのかよく分からないと思いますが、変数の良い点は中身を入れ替えることができることです。次のサンプルを見てみましょう。

a = 3;
alert(a);
a = 4;
alert(a);
a = 5;
alert(a);

上から順に実行されるので、アラートが連続して3回出ます。3回とも「a」が引数なのですが、出たアラートは「3」「4」「5」と数字が違いました。

これは、aに数値を代入することでaの中身が変わっているからです。

この場合はあまり変数の利点を生かせていませんが、そのうち変数を有効活用できる場面が多く出てきます。

ちなみに、今回は「a」ですが、この変数の名前は自由です。プログラムが複雑になってくると、複数の変数を使うことも当たり前になってきます。

ただし、だからといって実はどんな名前でもいいわけではありません。記号などは変数名に使えないことがあります。また、変数名の先頭(最初の文字)が数字であってはいけません。

ただし、日本語を変数名に使ったりすることはできます。そうはいっても、やはりプログラムの共通語は英語だし、アルファベットの変数名をつけておくのが無難でしょう。

あいう = 3;
alert(あいう);

数値の計算

JavaScriptは数値の計算もできます。次のサンプルを見てみましょう。

a = 3 + 4;
alert(a);
a = a * 2;
alert(a);

実行すると、まず「7」が出てその後「14」が出ます。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が代入されます。

演算子

演算子は、先に紹介したものの他にもたくさん種類があります。「+」「-」「*」「/」「%」の5つは、四則演算(足す・引く・かける・割るの4つの計算)を表す算術演算子といいます。

他に代入演算子という種類の演算子があります。代入をする演算子です。代表的なものは、先に紹介した「=」です。この=も演算子の一種だったのです。

=は、左オペランドに右オペランドを代入します。a = 3;の場合、左のaに右の3を代入しているというわけです。

また、演算子は必ず何かを返します。算術演算子の場合その演算結果を返しますが、代入演算子は何を返すのでしょうか。次のサンプルで実験してみます。

alert(a = 5);

この場合alertの引数に直接演算子などの計算(といいます)が入っていますが、alertを呼び出す際にその引数の中が先に処理されるので、問題なく処理できます。

さて、試してみると「5」と出ます。つまり「a = 5」が5を返したということになります。

実は、代入演算子=は、代入された値を返すのでした。つまり、実は次のような処理になります。

a = 5;
↓
5;
        

代入演算子が5を返すので、最後はこのようになります。この「5;」はただ「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;
↓
3     + 5;
↓
8; 

この場合だと最終的にaには3が代入されていることになりますが、実際はちゃんと8が代入されています。

つまり、代入演算子よりも算術演算子のほうが優先順位が高い(先に処理される)のです。

算術演算子同士にもこういうことはあります。現実でも、足し算引き算より掛け算割り算のほうを先に計算するのは当たり前の話です。これは、JavaScriptでも同じです。

3 + 5 * 2
  ↓
3 + 1013

また、優先順位が同じ場合、どちら側から計算していくかも決まっています。現実でも、四則演算なら普通左から計算していきますね。

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が代入されました。