jQueryの制御文

jQueryのコードは、基本的には上から下へ順番に処理されます。しかし、プログラムの内容によっては、処理を分岐したり、繰り返し処理する場合があります。jQueryではさまざまな制御文がありますが、主に使用する「if」、「switch」、「for」についてご紹介します。

if文について

if文は条件の結果によって、処理を分岐します。基本的な構文は以下の通りです。

■if文の構文

if(条件){
   条件がtrueの場合のみif文内の処理が実行される
}

if()内に条件を記述します。条件には、比較結果がtrueもしくはfalseになる条件式を指定します。例えば以下のコードを記述できます。

■if文の使用例１

var a = 100;
var b = 200;

if(a < b){ //この場合、条件(a < b)はtrueなので、
   c = a;　//変数cに変数aの値が格納される
}

また、if文にelseやelse if文を追加することでさまざまな分岐を実現することができます。

■if文とelse文

if(条件){
   条件がtrueの場合はここのコードは実行
}else{
   条件がfalseの場合はここのコードを実行
}

■if文とelseif文、else文

if(条件1){
   条件がtrueの場合はここのコードを実行
}else if(条件2){
   条件がfalseで、条件2がtrueの場合はここのコードを実行
}else{
   条件1と条件2がともにfalseの場合はここのコードを実行
}

上記のようにさまざまな条件で分岐させることができます。

■if文の使用例2

var a = 100;
var b = 200;
var c;

if(a == 200)[
   c = a;
}else if(b== 200){
   c = b;
}else{
   c= 300;
}

上記コードの場合、実行結果は変数cに変数bの値が格納されることになります。また、if文には以下の記述ルールがあります。

• 条件には、真偽値（true/false）や、比較演算子を使った式を指定する
• 条件には論理演算子を組み合わせることができる
• else if文は同一if文内に何個でも記述できる
• else文は同一if文内で1つのみ記述できる
• else文はif文やelse if文よりも後に記述する

条件分岐 switch文

switch文はある1つのデータと複数のデータを比較して処理を分岐する際に使用します。if文でも記述できますが、switch文を使用したほうが条件を省略できるので可読性が高くなります。

■switch文

switch(比較元の値){
   case 比較する値1:
      「比較元 === 比較する値1」の結果がtrueの場合はここのコードを実行
      break;
   case 比較する値2:
      「比較元 === 比較する値2」の結果がtrueの場合はここのコードを実行
      break;
   case 比較する値3:
      「比較元 === 比較する値3」の結果がtrueの場合はここのコードを実行
      break;
   default:
      どのcaseにも当てはまらない場合はここのコードを実行
      break;
}

先ほどのif文をswitch文に書き換えると以下のようになります。

var a = 100;
var b = 200;
var c;

switch(200){
   case a:
      c = a; //実行結果はfalseなのでこの処理は実行されない
      break;
   case b:
      c= b; //実行結果がtrueなので変数bの値が格納される
      break;
   defalt:
      c = 300; //case bでtrueになったのでこの処理は実行されない
      break;
}

上記コードでは、比較元の値と比較する値を比較し、値が同じであれば、その後の処理をbreak文が現れるまで実行します。尚、switch文は比較が厳密なので、数字と文字列を指定する場合は、注意が必要です。

又、break文を省略するとすべての処理が実行されるので意図した結果にならなくなる場合があります。ご注意ください。

■break文を記述しなかった場合

var a = 100;
var b = 200;
var c;

switch(200){
   case a:
      c = a; //この場合、falseなのでこの処理は実行されない
   case b:
      c = b; //この場合、trueなので変数cに変数bの値が格納される
   default:
      c = 30; //該当するcaseはあったが、break文を記述していない為、
　　　　　　　　変数cに30が格納される
}

 繰り返し処理for文

for文は特定の処理を複数回繰り返す場合にしようする制御文です。以下の構文で記述します。

■for文

for (初期化; 条件; 変更){
   繰り返す処理
}

記述する手順は以下の通りとなります。

1. 初期化で、条件などで市湯おするカウント用の変数などを初期化する
2. 条件を評価し、trueの場合は3へ。falseの場合はfor文の処理を終了する
3. 条件の繰り返す処理を実行する
4. カウント用の変数などを変更し、２に戻る

例えば、数値が格納されている配列内の値を全て足したい場合は以下のコードを記述します。

■for文の使用例

var a = [1,2,3,4,5,6]; //配列に6つの値が格納される
var b = 0;

for(var i = 0, len = a.length; i < len; i++){
   b += a[i];
}

上記コードでは以下の処理が実行され、結果的に「21」が格納されます。

1. 初期化でカウント用の変数iに「0」を格納し、変数lenに配列の長さ（=6）を格納する（配列の長さlengthプロパティで取得できる）
2. 条件を評価する。例では、変数iが変数lenの値（=6）よりも小さい場合に処理が繰り返される
3. 繰り返す処理では、変数bの配列の値を加算している
4. 繰り返す処理の実行後、変更の処理を行い、再度2に戻る

また、for文やif文などの制御文は以下の2種類の文を指定できます。

上記の文を指定すると、任意のタイミングで処理を制御できるようになります。例えば、配列の値が偶数の場合は加算し、5の倍数は処理を終了するという条件を加えると次のようなコードになります。

■for文の使用例

var a = [1,2,3,4,5,6];
var b = 0;

for(var i = 0, len = a.length; i < len; i++){
   var num = a[i];

   if(num % 5 === 0){
      break;
   }else if (num % 2 === 1){
      continue;
   }
   b += num;
}

上記のコードでは、for文内にif文を記述してその中にbreakを指定すると「配列の値を5で割った余りが0の場合、for文は終了」します。つまりbreak文が実行されるとfor文が処理の途中であってもfor文は終了します。上記コードの場合、for文自体は6回処理が実行されますが、比較する値が5の際に処理が終了します。

又、else ifではcontinueを指定することで「配列の値が5の倍数ではなく、かつ値を2で割った余りが1の場合（奇数の場合）処理をfor文の先頭に戻す」ようにしています。continue文が実行されると、たとえ他の処理（上記の場合、b += num;）の残っていても、処理がfor文の先頭に戻されます。つまり、上記コードの場合、配列の値が奇数だと加算する処理がスキップされます。

尚、jQueryでは「each()メソッド」を使用することでも繰り返し処理が実行できます。

関連記事はこちら

jQuery 画像とキャプションの表現

JQueryのアニメーション実装方法

jQueryの関数

jQuery データを格納する

jQueyのスコープと命名規則

jQuery実行のタイミングについて

jQueryの基礎を体験しよう

jQueryの演算子