検索
JavaScriptの処理ライブラリを作りためたい気分になってきたので今回は条件分岐のパターンとよく使われる演算子をおさらいします。 「js覚えたいなー」系の方々の参考にでもなればいいなぁー。
条件分岐の方法
単純に上から記述されたスクリプト処理をしていくだけではプログラムは作れません。 状況に応じて処理を切り替える処理を主に”条件分岐”と呼びます。 条件分岐には主に「if文」という構文が用いられます。 この「if文」を処理に使う事で、得られる結果が 条件を満たしているtrue（是）もしくは条件を満たしていないfalse（否）の判定をして、その実行された結果が、その後の処理に引き継がれていきます。if/elseを使って条件分岐
使用グローバル変数の設定
//変数を宣言 var var01; var var02; var var03; //パラメーターの代入 var01 = 5; var02 = 11; var03 = 32;今回の素材はここから使います。 中身のパラメーターはお好みで変えるなり増やすなりしてください。
偶数か奇数かを判定
基礎中の基礎ですが、まずはここから。指定の数値が奇数か偶数かを判定させます。
if (var01 % 2 === 0) {
alert("var01 は偶数です!");
}else {
alert("var01 は奇数です!");
}
現在の設置値は５なので当然奇数ですね。ロジックとしては対象の数値は2で割り切れるかどうか？という考え方です。
数値同士の比較判定
var flag = (var01 === var02);
if (flag === true) {
alert("var01 と var02 は等しいです!");
}else {
alert("var01 と var02 は等しくないです!");
}
指定値は５と11なので当然等しくはないです。
ですがこの場合、直接var01とvar02を比較せずに、一度var01(５)とvar02（11）を比較する処理を変数flagに代入し、その変数flagがtrueかどうかを判定するという記述をしています。
ここで上記ロジックの意図の詳細は省きますが、明らかに異なっている値を比較対象にした物を変数に代入し改めて比較するという様な処理が必要な場面は意外と多いのです。
比較演算子と論理演算子
条件分岐には簡単に是か否の割り切る処理より複雑なwhile文の様な繰り返し構文と組み合わせて使用する際によく利用する演算子です。比較演算子
| 演算子 | 概要 | 例 |
|---|---|---|
| == | 両辺の値が等しい場合はtrue | 1 == 1 //true |
| != | 両辺の値が等しくない場合はtrue | 1 != 1 //true |
| < | 左辺が右辺より小さい場合はtrue | 1 < 1 //false |
| <= | 左辺が右辺以下の場合はtrue | 1 <= 1 //true |
| > | 左辺が右辺より大きい場合はtrue | 1 > 0 //true |
| >= | 左辺が右辺以上の場合はtrue | 1 >= 0 //true |
| === | 左辺と右辺の値が等しくデータ型も同じ場合はtrue | 1 === 1 //true |
| !== | 左辺と右辺の値・データ型が異なる場合はfalse | 1 !== 1 //true |
| ?: | (条件式)?式1:式2『条件式』がtrueの場合は式1を。falseの場合は式2を返す | (x == 1) ? 1 : 0 //1または0 |
等価演算子(==)と同値演算子(===)の違い
js側で比較時に等しくみせようと頑張ってくれるみたいですが、厳密な比較を求められる場合は開発者側がしっかりデータ型を意識して書き分けないといけません。 等価演算子（==）は比較する型は関係なしに値を比較する。
alert(0 == 0); //数値型0と数値0はtrueと判断
alert(0 == '0'); //数値型0と文字型'0'はtrueと判断
alert(0 == false); //数値型0と否はtrueと判断
alert('0' == false); //文字型'0'否はtrueと判断
alert(0 == ''); //数値型0と文字型未指定はtrueと判断
alert('' == false); //文字型未指定と否はtrueと判断
alert('3.14E2' == 314); //3.14掛ける10の2乗の意と314はtrueと判断
alert('0x10' == 16); //16進数表現と数値型16はtrueと判断
同値演算子（===）は比較する値と型も考慮して比較が行われる。
alert(0 === 0); //数値型0と数値0はtrueと判断
alert(0 === '0'); //数値型0と文字型'0'はfalseと判断
alert(0 === false); //数値型0と否はfalseと判断
alert('0' === false); //文字型'0'否はfalseと判断
alert(0 === ''); //数値型0と文字型未指定はfalseと判断
alert('' === false); //文字型未指定と否はfalseと判断
alert('3.14E2' === 314); //3.14掛ける10の2乗の意と314はfalseと判断
alert('0x10' === 16); //16進数表現と数値型16はfalseと判断
条件演算子(?:)
指定された条件式の真偽に応じて対応する式の値を出力したい場合に使用する（三項演算子とも呼ばれる）if文を使っても同様な処理はできるがよりシンプルなコードで記述できる
var x = 75; alert((x >= 70) ? '合格' : '不合格'); //合格
論理演算子
複数の条件式（または論理値）を結合してその結果をtrueまたはfalseで返す。| 演算子 | 概要 | 例 |
|---|---|---|
| && | 左右の式が共にtrueの場合はtrue | 10 == 10 && 100 == 100 //true |
| || | 左右の式のどちらかがtrueの場合はtrue | 10 == 10 || 10 == 50 //true |
| ! | 式がfalseの場合はtrue | !(100 > 1000) //true |
var x = 1; var y = 2; alert(x == 1 && y == 1); //false alert(x == 1 || y == 1); //true z = !(x > 5); alert(z); //true
論理演算子による評価結果
| 左式 | 右式 | && | || |
|---|---|---|---|
| true | true | true | true |
| true | false | false | true |
| false | true | false | true |
| false | false | false | false |
switch文を使った多岐条件の分岐
分岐させたい条件が多数ある場合はif/elseを連続で記述するよりもswitch文による条件分岐が望ましい。
var team = 'B';
switch(team){
case 'A':
alert('チームAです。');
brank;
case 'B':
alert('チームBです。');
brank;
case 'C':
alert('チームCです。');
brank;
case 'D':
alert('チームDです。');
brank;
default :
alert('無所属です。');
}
//チームBです。
break命令の指定
定義された条件をすべて検証していくifとは違い、switch文は条件に合うcaseに合致した時点でswitch文から離脱する事でその他の条件の検証処理の実行を省略できる。意図的にbreak命令を省略して複数のブロックを続けて実行する書き方(フォールスルー)があるが推奨はされていない。 単純な条件分岐の処理はこの辺りを使い回していけばできる（ハズ・・・）もっと高度で実践的な文法や分岐法はたくさんありますが、それはまた別の機会にでも。
