1-4 条件分岐と繰り返し処理

プログラミングでは何らかの条件によって処理を分岐したり、一定の処理を繰り返すことを行います。 条件分岐を行う命令には if と switch があり、繰り返しを行う命令には for と while があります。 条件分岐と繰り返し処理を具体例を交え説明します。


(1)条件分岐 if

if文は次のように記述します。

if( 条件式 ) {
 処理;
}

JavaScriptの条件比較は、比較したことが成り立つならtrue、成り立たないならfalseとなります。
if文は条件がtrueの時 { から } の間に記述した処理が行われます。 { から } までをブロックといいます。

処理が計算式1つか命令1つであれば{}を省略して

if( 条件式 ) 処理;

と記述することもできます。

複数の条件を調べるには次のように記述します。

if( 条件式1 ) {
 処理1;
}
else if( 条件式2 ) {
 処理2;
}
else if( 条件式3 ) {
 処理3;
}
 :
else {
 処理n;
}

最初のifが成り立たなければ else if で記述した条件を調べ、それも成り立たなければ次の else if を調べます。 いずれの条件も成り立たない時に行う処理を else で記述します。elseは不要であれば記述する必要はありません。

【例1】

var val = 1.01;
if( val == Math.floor(val) ) {
 alert( "valは整数です" );
}
else {
 alert( "valは少数です" );
}

valの値と、少数を切ったvalの値が等しいかを比較しています。 valは1.01ですので、この条件は成り立たず(falseとなる)、elseのブロックに記述した処理が実行されます。 よってこの例では「valは少数です」というメッセージが表示されます。 1.01 を -2 や 100 に書き換えて実行すると「valは整数です」と表示されます。

条件を比べるのに使う記述を関係演算子(もしくは比較演算子)といい、次のものがあります。
a > baはbより大きいか?
a >= baはb以上か?
a < baはbより小さいか?
a <= baはb以下か?
a == b もしくは a === baとbは等しいか?
a != b もしくは a !== baとbは等しくないか?
JavaScriptで“等しくないか”は != もしくは !== で比較します。
JavaScriptを含む多くのプログラミング言語で ! は否定の意味(NOT)となります。
!true → false となり、!false → true となることも覚えておかれると良いでしょう。

== と === の違いについて
== と === そして != と !== は少し意味が異なる比較です。=== と !== はjavaScript特有の関係演算子で
「 === は型も含め完全に一致すれば true となる 」
「 !== は型もしくは値が一致しなければ true となる 」
となります。 型とはその変数が何を扱うものか(数なのか文字列なのかなど)という決まりごとです。
本講座は変数の値と型を調べる必要があるような処理は行わず、 == と != で比較して問題ない内容としています。


2つ以上の条件が成り立つかを調べるには論理演算子を用います。
条件式1 && 条件式21、2ともに成り立つか?
両方成り立つ時に true になる
条件式1 || 条件式21、2どちらか成り立つか?
両方もしくは一方が成り立てば true になる
&& と || が論理演算子です。 && は AND の意味、|| は OR の意味になります。
変数の値がある範囲内にあるか調べる時、数学のように if( 5 < a < 10 ) と記述することはできません。 &&を使って if( 5 < a && a < 10 ) とします。

もう一つの例を見てみましょう。変数が半角英数字なら次のような比較ができます。valに別の文字を入れて動作を確認してみましょう。
【例2】

var val = 'a';
if( '0' <= val && val <= '9' ) {
 alert( "valは半角数字です" );
}
else if( 'a' <= val && val <= 'z' ) {
 alert( "valは半角英字(小文字)です" );
}
else if( 'A' <= val && val <= 'Z' ) {
 alert( "valは半角英字(大文字)です" );
}
else {
 alert( "valは半角英数字ではありません" );
}

JavaScriptで文字列を扱う際に、シングルクオート ' か ダブルクオート " を使います。 この例では ' を " に書き換えても同じ動作になりますが、処理の内容によっては'と"を使い分ける必要があります。 どのように使い分けるかは 1-5 (2) で説明します。


(2)条件分岐 switch

switch は変数もしくは式の値に応じて処理を複数に分岐させる命令です。

switch( 変数もしくは式 ) {
 case 値1:
  処理1;
  break;

 case 値2:
  処理2;
  break;

 case 値3:
  処理3;
  break;
  :
  :
 default:
  処理n;
  break;
}

switchに続く( )内に変数あるいは x/y や a*b+1 というように式を書き、caseに続けて比較する値とコロン:を記述します。 そして変数あるいは式が該当する値だった時に行う処理を記述し、処理の終りを break; とします。breakは処理を抜ける命令で、breakの位置でswitch文から抜けます。
caseは複数記述でき、いずれの値でもなかった時に行う処理を default の後に記述します。defaultは省略可能です。

(補足)C系やJavaではswitch文で比較できるのは整数のみです。 一方JavaScriptはcaseの値を少数にすることもできますが、一般的なプログラミング言語のルールに基づいてswitchでの比較は整数としましょう。


ifやswitchでどのような処理を行うのでしょう?
ゲームではifで主人公キャラが敵と接触したかや、ライフが0になったかなどを判定します。 switchはゲームを各場面ごとの処理に分岐させるのに使います。 例えば var index; と定義し、indexが0の時はタイトル画面、1の時はステージ選択画面、2の時はゲーム画面、3の時はステージクリアの演出画面、4の時はゲームオーバー画面と定め、処理を分岐させます。 これらの事柄は第二章で詳しく説明します。


(3)繰り返し命令 for

forは条件式が成り立つ間、処理を繰り返す命令で、次のように記述します。

for( 変数の初期値; 条件式; 変化する値の式 ) {
 処理;
}


繰り返し命令の挙動を目で見て確認できるように console.log 命令を使ってみましょう。 console.log はプログラムを開発中によく使う命令で、変数の値や文字列を出力できます(ログを出力するといいます)。 ログは各ブラウザで以下のようにして確認します。
Chromeその他のツール → デベロッパーツール → Console
IE/Edgeツール → F12開発者ツール → コンソール
FireFox開発ツール → 開発ツールを表示 → コンソール
Safari環境設定の詳細で「メニューバーに"開発"メニューを表示」をチェック、メニューバーの開発→エラーコンソールを表示

【例1】

for( var i = 1; i <= 10 ; i ++ ) {
 console.log(i);
}

このソースコードを実行すると、for文で処理が10回繰り返され、コンソールに 1,2,3,4,5,6,7,8,9,10 と数字が表示されます。
for文で繰り返し用に使う変数は慣例的に i とすることが多いですが、任意の変数名を使うことができます。

何かの条件によって処理を抜けたい時はbreak命令を用います。
【例2】

for( var i = 0; i < 100; i += 10 ) {
 console.log(i);
 if( i == 50 ) break;
}

この例ではiが100未満の間処理を繰り返す記述をしていますが、if文でiが50になった時に処理を抜けるので、コンソールには0,10,20,30,40,50と表示されます。

continue命令で以後の処理を無視し繰り返しの先頭に戻ることができます。
【例3】

var val = 10;
for( ; val >= 1; val -- ) {
 if( val%3 == 0 ) continue;
 console.log(val);
}

この例ではforの外側で変数valを定義し初期値を10としており、forの()内の初期値の記述を省略しています。 valを3で割った余りが0(すなわちvalが3の倍数)の時に繰り返しの先頭に戻ります。 コンソールには10,8,7,5,4,2,1と表示されます。

では次のようなソースコードではどのようなログが出力されるでしょうか?

01<!DOCTYPE html>
02<html lang="ja">
03<head>
04<meta charset="utf-8">
05<title>JavaScriptのテストプログラム</title>
06</head>
07<body>
08<script>
09for( var i = 1; i <= 256; i = i*2 ) console.log(i);
10</script>
11</body>
12</html>

↓こちらで動作確認(コンソールに出力されるログを確認)してみましょう。
example141.html
※ChromeとFirefoxではリンク先でデベロッパーツールを開くとログが出力されています。 IEやEdgeはリンク先でF12を押し、コンソールのタブをクリック後、F5を押して画面を更新しJavaScriptを実行して下さい。
予想通りでしたでしょうか?


(4)繰り返し命令 while

while文は次のように記述し、条件式が成り立つ間、処理を繰り返します。

while( 条件式 ) {
 処理;
}


【例】

var abc = 0;
while( abc < 20 ) {
 console.log(abc);
 abc += 4;
}

この例では変数abcが20未満の間、処理が繰り返されます。 コンソールには 0,4,8,12,16と表示されます。

while文の仲間に do ~ while があります。

do {
 処理;
}
while( 条件式 );

do ~ whileでは処理が必ず一度は実行されます。
while(条件式) { 処理; } は条件式の結果によっては一度も処理が実行されないことがあります。
while文も break と continue を使うことができます。

無限ループにご用心
繰り返し処理では無限ループにならないように注意しましょう。 無限ループとは条件式が成り立たず延々と処理が回り続けることです。 無限ループに陥ったソフトウェアは処理が停止し、最悪の場合コンピューターがフリーズします。 JavaScriptではコンピューターがフリーズするところまで行くことは少ないと思いますが、ブラウザが停止したり落ちたりします。 forよりもwhileの方が一般的に無限ループに陥る可能性が高いですが、 for文でも繰り返しで使っている変数を処理内で書き換えるようなことをすると無限ループに陥ることがあります。



前のページへ / 次のページへ


お気軽にお問い合わせ下さい →