JavaScript 入門 制御の流れ

出典: フリー教科書『ウィキブックス（Wikibooks）』

JavaScript > 入門 制御の流れ

目次 1 JavaScriptの制御構造 1.1 条件分岐 1.1.1 if文 1.1.2 条件式 1.1.3 else-if文 1.1.4 switch文 1.2 反復文 1.2.1 for文 1.2.2 while文 1.2.3 do while文 1.2.4 余談：インデントの必要性

[編集] JavaScriptの制御構造

[編集] 条件分岐

[編集] if文

以下のプログラムは、AとBのどちらか大きい方の数値を表示するプログラムである

if( a > b )
　　document.write( a );
else
　　document.write( b );

else節は、省略して良く

if( 条件式 )
　文;

と書けば、条件式に合ったときのみ、文が実行される。 複数の文(複文)を実行したい場合には、大括弧でまとめ込むことで、ブロックにしてしまえば良い。

if( 条件式 ){
    文;
    文;
}

[編集] 条件式

if文中にある「a > b」は、条件式と言い、条件が正しいと真偽値型の「true」を、正しくないなら「false」を出す。 条件式には、次の様なモノがある。

• a > b aがbより大きければ真
• a >= b aがb以上ならば真
• a < b bがaより大きければ真
• a <= b cがa以上ならば真
• a == b aとbの値が等しければ真
• a != b aとbの値が等しくなければ真
• a === b aとbの値もデータ型も等しければ真
• a !== b aとbの値もデータ型も等しいとき以外真

このとき if(条件式) 内部の条件式が真であるなら式を実行し、偽であるなら、else以下の条件を実行する。 数ある条件式の中でも最も多用する。

if文の条件中に、複数の条件を書きたい場合は、次の様にする

if( x==y && a>b )
  文;

• 「&&」は論理学で言う「ＡかつＢ」で、どちらとも条件を満たせば真
• 「||」だと「ＡまたはＢ」となり、どちらかが条件を満たせば真となる

[編集] else-if文

また、次のような表記もよく使うので、覚えておくと良い

if( 条件式1 )
  文1;
else if( 条件式2 )
  文2;
else if( 条件式3 )
  文3:
else
  文4;

このように最初の条件式で偽となったものを拾い直して、再びif文にかけることで複数の条件でどれに該当するかを調べる方法がある。 その他、if文関連の簡潔な書き方は、後の章で紹介する。

[編集] switch文

if-else文は、条件の真偽によって動作の2分岐を行うが、複数の条件のいずれかに合う場合を探すときは、switch文を使う。 以下のプログラムは、プログラミング言語を指定すると、その説明を表示するモノである。

switch( lang ){
case "C":
  document.write( "機械語に近い文法で簡潔、高速。アセンブラの埋め込みも出来る…、けど移植性が微妙だ" );
  break;
case "Java":
  document.write( "一時期のブームを過ぎて、世に馴染んだ言語。正直何をするにも堅苦しい印象が抜けない石頭" );
  break;
case "Perl":
  document.write( "レポート編集言語を無理矢理汎用言語に進化させた無理が所々に散見される…" );
  break;
default:
  document.write( "私の知らない言語です" );
}

このように、caseで条件に合致する場合、条件が実行されて、何も合致する条件がない場合に、defaultの内容が実行される。 式中にあるbreakはswitch文の内容を脱出するために必要な記述で、これが無い場合は、さらに次の文も実行される。 大抵の場合、break文は必要であるのでバグを出さないために記述する習慣をつけておくべきである。

[編集] 反復文

反復文は同じ処理を何度も繰り返したいと言うときに、便利な方法である。

[編集] for文

次のプログラムは、7の階乗を計算して出力するプログラムである

var m=1, n=7;
for( var i=1; i>=n; i++ )
  m *= i;  // 繰り返すことで「1*2*3*4*5*6*7」を計算
document.write( m );  //　ここで結果を表示

これをfor文と言い、初めからループの回数が決まっている場合によく使われる反復分である。 for文の括弧の中は

for( 変数の宣言; ループの終わる条件; ループ変数の更新 ) 

を書き、繰り返しを行う。 配列のデータを順番に取り出す時などに便利で次のように書く

var prime=[1,2,3,5,7,11,13,17,23], message="";
for( var i=0; i < prime.length; i++)  // 配列の続きに「.length」を付け加えると配列の長さが返ってくる
  message += i + " : ";  // 配列を文字列に変換
document.write( "素数を数えて落ち着くんだ " + message );

[編集] while文

for文は決まった回数のループに多用されるが、逆に条件を満たすまで繰り返し計算を続ける場合にはwhile文を使うのがよい。

var i=0;
while( i<5 ){
  document.write( "roop!" );
  i++;
}

while文を使う場合ループ脱出の条件式を誤ると永遠にループから抜け出さない状態(無限ループ)になる。 (熟練したプログラマの場合これをやると恥をかくタイプのバグだが、最初はついやってしまうので注意をする)

[編集] do while文

while文の場合処理を始める前に条件の判断を行うが、これでは条件を満たさない場合でも最低1度はループの中を実行したいと言うときに不便である。 この様なときにはdo～while文を利用すると便利である。

var i=0;
do{
  document.write( "roop!" );
  i++;
} while( i<5 );

[編集] 余談：インデントの必要性

先ほどから、if文や、for文の内部では、ブロックの中等で字下げを行っている。 これを「インデント」と言って、プログラムの可読性を上げるために、頻繁に行われている。 インデントは普通タブ(キーボードにあるTabボタン)を利用して行うが、テキストエディタによって字下げする文字数が違う。 最も一般的なタブでの字下げは4文字なのだが、今回は字下げの数を2文字で全てのサンプルを書いている。

これは

• 慣れると2文字でも4文字でも読みやすさは変らない
• scriptタグでJavaScriptを埋め込むと、HTMLであらかじめ行っているインデントとあわせて、字下げしすぎる

という理由からの経験則である。ある程度多機能なエディタならタブで何文字字下げするかは設定できると思われるので、あなたも2文字下げを実践してみてはいかがだろうか？