No.2 条件分岐と反復処理
今回は、条件分岐と反復処理についてご説明していきたいと思います。
条件分岐
条件分岐とは、言葉で説明すると「もし、Aの値が100だったらこっちの処理を、100でなかったらそっちの処理をする。」ということになります。 JavaScriptには、以下の条件分岐があります。
- if文
- if ~ else文
- if ~ else if ~ else文
- switch文
これを使って、条件分岐を行っていきます。
if文
if文の構文は、
1 2 3 | if(条件式) { 条件式がtrueの場合の処理; } |
と書きます。
条件式と書いてあるところには、比較演算子や論理演算子などを使ってtrueかfalseが返ってくる式を書きます。 そして「 { 」と「 } 」の間に、何らかの処理を書きます。
この構文を使って条件分岐を書いてみると
1 2 3 4 5 | var a = 10; if (a == 10) { alert('変数aには、10が格納されています!'); } |
このようになります。
if ~ else文
先ほどのif文では、条件式がtrueの場合はある処理を行っていましたが、条件式がfalseの場合は何も処理されませんでした。 if ~ else文を使うと、条件式がtrueの場合やfalseの場合でもそれぞれの処理ができるようになります。
if ~else文の構文はこちらです。
1 2 3 4 5 | if (条件式) { 条件式がtrueの場合の処理; } else { 条件式がfalseの場合の処理; } |
if文に続けて、elseと書いて条件式がfalseの場合の処理を書くという感じです。
1 2 3 4 5 6 7 | var b = 5; if (b == 10) { alert('変数bには、10が格納されています!'); } else { alert('変数bには、10以外が格納されています!'); } |
この場合は、条件式がfalseを返すのでelseのところに書かれた処理が行われます。
else if文
if ~ else文を使ってtrueやfalseの場合の条件分岐を行いましたが、さらに細かい条件分岐を行いたい場合は、else if文を使います。 else if文の構文はこちらです。
1 2 3 4 5 6 7 | if (条件式1) { 条件式がtrueの場合の処理; } else if (条件式2){ 条件式1がfalseで条件式2がtrueの場合の処理; } else { 条件式1と2の両方ともfalseの場合の処理; } |
else if文を使ってある生徒のテストの点数によって表示するメッセージを変える処理を書いてみます。
1 2 3 4 5 6 7 8 9 | var score = 65; if (score >= 80) { alert('大変良くできました!'); } else if (score >= 60) { alert('よくできました。'); } else { alert('頑張ろう!!!'); } |
この場合は、scoreが65なのでelse ifのところに書かれた処理、つまりalert(‘よくできました。’)が実行されます。 このようにelse if文を書き足していくことでより細かな条件分岐が行えます。
switch文
switch文でも条件分岐が行えます。 今まで出てきた条件分岐とは、書き方がガラリとかわりますが、処理は同じです。 まず、switch文の構文はこちらです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | switch (式){ case 値1: 実行する文; break; case 値2: 実行する文; break; case 値3: 実行する文; break; default: 実行する文; break; } |
「式」と書かれてあるところにこれから判定される変数などを書きます。 そしてcaseのところに判定する値を書きます。 最後のほうに、defaultというのがあります。 これ、どれにも当てはまらなかったときに実行されます。 switch文の例を見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var num = 2; switch (num){ case 1: alert('数値は 1'); break; case 2: alert('数値は 2'); break; case 3: alert('数値は 3'); break; default: alert('数値は 1と2と3以外です。'); break; } |
case内の最後にbreakというのがあります。 このbreakがないと次のcase内の処理まで実行されます。 この例の場合だと、breakがないとcase 3とdefaultの処理までされてしまいます。
switch文は、式とケースを照らし合わせて一致したところにジャンプしてそこから処理をしていくイメージです。 そしてbreakで処理の終わりを命令しています。
反復処理
続いては、反復処理について見ていきます。 反復処理とは、同じことを繰り返す処理のことです。 同じことを繰り返すことはループと言われ、ループ処理とも言われています。
Javascriptの反復処理には
- for文
- while文
- for ~ in文
- do ~ while文
上記の4つがあります。 これらを個別に見ていきましょう。
for文
まずはfor文の例を見てみましょう。
1 2 3 | for (var i=0; i< 10; i++) { console.log(i); } |
この実行では、数字が0から始まり9まで表示されます。
for文は形として、
1 2 3 4 | for(変数の初期値;変数に対する条件;変数の更新方法) { // 処理 } |
となっています。
forというのは日本語で「〜の間」なので、for文というのは「for文の中身が満たされる間は処理を反復し続ける。」と言い換えることができます。 今回ではfor文の中身は
1 | var i=0; i< 10; i++ |
となっていますが、この意味は「変数iが初期値0から始まり、iが10未満ならば処理を行い、iに1を加算して更新しfor文を繰り返す。」になります。
流れとして、1周目は変数iは0なので、10未満という条件を満たす。 よって処理が行われ、最後にiは1を足されるので0から1になり、もう一度for文が行われる。 2周目は変数iは1になっているが、10未満という条件を満たしているので処理を行い、またiは加算される。 以後、変数iが10未満という条件を満たす間繰り返される。
ではもう1つ例を提示してfor文は終わりにしましょう。
1 2 3 | for (var i=10; i> 0; i--) { console.log(i); } |
実行結果は、10から始まり1までが出力されます。 ポイントは更新方法の部分です。 1つ目とは違い今度は変数iから1を減算しています。 このような、更新方法の変化はfor文において重要ですので、色々な更新方法を知っておくとプログラムを書く上で便利になります。
while文
whileも日本語にすると「〜の間」であり、for文と同様なことが出来ます。
1 2 3 4 5 | var i=0; while( i < 10) { console.log(i); i++; } |
これが1つ目のfor文の例と同じ結果になるプログラムです。
while文の構文は
1 2 3 | while(変数に対する条件){ 処理 } |
になり、変数に対する条件を満たす限り処理を繰り返します。
基本的にはfor文で可能なことはwhile文でも可能であり、その逆も可能です。
for ~ in文
次は、for ~ in文を見ていきたいと思います。 for ~ in文も繰り返し処理を行います。
for文と違うのは、繰り返し処理をするためのオブジェクトが存在することです。
1 2 3 4 | var obj = {one:1,two:2,three:3}; for (val in obj) { console.log(val+'='+obj[val]); } |
コード例のvalには、オブジェクトのプロパティ名が代入されるので、 連想配列やオブジェクトのプロパティを連続して参照したい場合や、プロパティ名が不明なときなどに使います。
例では、オブジェクトの各要素が出力されます。
do ~ while文
ここまでで紹介したfor文やwhile文では、一度も処理が実行されないことがあります。 まず一度は処理を実行してから、条件に応じて繰り返したいといったときに使うのがdo ~ while文です。 do ~ while文の構文は
1 2 3 | do { 処理 }while(条件) |
となっています。 条件判定をする前にまずdo{}内の処理を実行して、それから条件を判定します。 判定の結果がtrueであれば、再度do{}内の処理を実行します。
それでは例文を一つ
1 2 3 4 5 | var i = 0 do { console.log(i); i++; } while (i < 10) |
iの値を変えてみると、必ず一度は処理が実行されるのがおわかりいただけるでしょう。
今回は、ここまでです。 次回からは、応用に入っていきます。 それでは、お楽しみに!