jQueryの制御文：条件分岐switchと繰り返しfor
今回は、jQueryでの主な制御文switch文とfor文について、実際にサンプルコードを用いて、詳しく記載していこうと思います。
以前、条件分岐if文につきまして詳しく記載いたしましたが、「比較する値が複数ある場合はどうするの？」や「特定の処理を複数回繰り返す処理はどうするの？」などの疑問をお持ちの方に向けて、jQueryの制御文「switch文」と「for文」について分かりやすく記載してみようと思います。
jQueryのコードは、基本的には上部から下部へ向かって順番に処理されます。この点はHTMLやCSSがブラウザに読みこまれる順番と同じます。しかし、プログラムの内容によっては、与えられた値をもとにして処理を分岐したり、同じ処理を何度も繰り返し実行したい場合があります。
このような「場合によって処理内容を変更する」には、制御文を使用します。また、今回は初心者の方が覚えておくべき、jQueryの制御文「switch文」と「for文」について記載していきます。
という事で、それでは今回はッ、
- ・jQueryで条件分岐switch
- ・繰り返し処理のfor文
- ・その他の制御文
上記について記載していこうと思います…。
その前に、下記にjQuery条件分岐「if文」のリンクを張っておきます。
jQueryで条件分岐switch
switch文は「１つのデータと複数のデータとを比較して処理を分岐する」際に使用できる制御文になります。switch文で指定できる分岐処理はif文で書き換えることも可能ですが、switch文を使用すると条件を省略できるので、コード内容の可読性が高くなります。
■switch文の構文
case 比較する値1:
「比較元 === 比較する値1」の結果がtrue（真）の場合はこのコードを実行
break;
case 比較する値2:
「比較元 === 比較する値2」の結果がtrue（真）の場合はこのコードを実行
break;
case 比較する値3:
「比較元 === 比較する値3」の結果がtrue（真）の場合はこのコードを実行
break;
default:
どのcaseにも当てはまらない場合はこのコードを実行
break;
}
| var a = 1; |
| var b = 2; |
| var c; |
| switch (2){ |
| case a: //この場合、「2 === a」はfalse（偽）なので、 |
| c = a; //この処理は実行されない |
| break; |
| case b: //この場合、「2 === b」はtrue（真）なので、 |
| c = b; //変数cには変数bの値が格納される |
| break; |
| default: //defaultまでのcaseに該当するものがあったので |
| c = 3; //この処理は実行されない |
| break; |
| } |
「比較元の値」と各「比較する値」を比較して、値が同じであれば、その後の処理をbreak文が表れるまで実行します。なお、switch文では比較が厳密に行われるまで、数値と文字列などを指定する際には注意が必要です。
また、文法上はbreak文を省略してもエラーになりませんが、break文を書き忘れると該当のcase以降のすべての処理が実行されてしまい、意図した結果にならなくなってしまいます。
| var a = 1; |
| var b = 2; |
| var c; |
| switch (2){ |
| case a: //この場合、「2 === a」はfalse（偽）なので、 |
| c = a; //この処理は実行されない |
| case b: //この場合、「2 === b」はtrue（真）なので、 |
| c = b; //変数cには変数bの値が格納される |
| default: //defaultまでのcaseに該当するものがあったが、break文が現れていないので |
| c = 3; //変数cに３が格納される |
| } |
繰り返し処理のfor文
for文は「特定の処理を複数繰り返す際に使用する制御文」です。下記の構文で指定します。
■for文の構文
繰り返す処理
}
①まず「初期化」で、「条件」などで使用するカウント用の変数などを初期化する。
②「条件」を評価し、true（真）の場合は③へ。false（偽）の場合はfor文の処理を終了する。
③上記の「繰り返す処理」を実行する。
④カウント用の変数などを変更し、②に戻る。
分かりやすいように例えば、「数値が格納されている配列内の値を全て足したい」という場合は下記のようなコードを記述します。
| var a = [1,2,3,4,5]; //配列には5つの値が格納される |
| var b = 0; |
| for (var i = 0, len = a.length; i < len; i++){ |
| b += a[i]; |
| } |
先ほどの流れに沿って説明すると、上記のコードでは以下の処理が実行され、結果的に変数bには「15」が格納されます。
①「初期化」でカウント用変数iに「0」を格納し、変数lenに配列の長さ（=5）を格納する（配列の長さはlengthプロパティで取得できます）
②「条件」を評価する。上記のサンプルでは、変数iが変数lenの値（=5）よりも小さい場合に処理が繰り返される。
③「繰り返す処理」では、変数bに配列の値を加算している。
④「繰り返す処理」の実行後に「変更」の処理（このサンプルでは変数iに1を加算）を行い、再度②に戻る。
また、for文やif文などの制御文の中では下記の2種類の分を指定できます。
| 文の種類 | 説明 |
|---|---|
| continue文 | 処理を途中で止めて、「変更」の処理にスキップ |
| break文 | for文の処理を強制的に終了 |
上記の文を指定することで、任意のタイミングでfor文の処理を制御できるようになります。
例えば、先ほどの例に「配列内の値が偶数の場合は加算し、5の倍数の場合は処理を終了する」という条件を加えると下記のようなコードになります。
| var a = [1,2,3,4,5,6,7]; |
| 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の場合（5の倍数の場合）はfor文を終了」させています①。break文が実行されると、たとえfor文が処理の途中であってもfor文は終了します。つまり上記のコードでは、for文自体は7回（配列の要素数分）処理が実行されるように記述されていますが、比較する値が「5」の際に処理が終了します（5回目の処理）。
また、else ifではcontinue文を指定することで「配列の値が5の倍数ではなく、かつ値を2で割った余りが1の場合（奇数の場合）は処理をfor文の先頭に戻す」ようにしています②。continue分が実行されると、たとえほかの処理（上記の場合はb += num;）が残っていても、処理for文の先頭に戻されます。つまり、配列の値が奇数の場合は加算する処理がスキップされます。この記述は「配列内の値が偶数の場合は加算する」を実現するためのコードです。
このように、break文やcontinue文を使用すると、少し複雑な繰り返し処理を簡単に定義することができます。
なお、jQueryでは「each()メソッド」を使用すると、少し複雑な繰り返しの処理を簡単に定義することができます。
その他の制御文
jQueryでは、上記で解説した制御文以外に「while文」や「do-while文」といった制御文も使用できます。今回は説明を割愛いたしますが、下記におおよその一覧を記載しておきます。また、制御文につきましては、他のプログラミングでも共通の考え方が多々ありますので、興味がある方はお調べいただければ幸いです。
| 文の種類 | 説明 |
|---|---|
| while文 | ループ（繰り返し）処理を行う |
| do-while文 | ループ（繰り返し）処理を行う制御構文のひとつ。条件式の値が、tureの間、繰り返し処理を行う。 |
| for-in文 | ループ（繰り返し）処理を行う制御構文のひとつ。オブジェクトの各プロパティや、配列の各要素に対し、指定した処理を繰り返し実行する。 |
| for each-in文 | ループ（繰り返し）処理を行う制御構文のひとつ。オブジェクトの各プロパティの値に対し、指定した処理を繰り返し実行する。 |
| throw文 | 例外を発生させる（例外を投げかける）制御構文。 |
といことで今回は、jQueryの制御文：条件分岐switchと繰り返しforについて、サンプルコードを交え基本的な所を詳しく記載しました。
個人的には、jQueryではなくVBAで覚えた内容をjQueryを学習した際に復習といった形で身につけた内容になります。プログラミングは他の言語でも共通する内容が多々ありますので、「多少複雑で難しいな！」と思うこともあることと思いますが、他の言語で役立つ場合など多々ありますので、しっかりと習得することをおすすめします。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
