梅ちゃん堂 > JavaScript 入門 > JavaScript の基礎 >
- 条件分岐 -

すべてのプログラミング言語において、条件分岐は重要な要素です。 これによってプログラム制作者はプログラムを自由に制御することが可能になります。

条件分岐とは、「もし○○○なら、△△△する、(さもなければ×××する、さもなければ...)」といった処理のことです。

1.if 文

もっとも広く使われるのは、if 文です。これは、

if (A == B) C = D; // もし A が B なら C に D を代入する

のように、if に続けて条件文を括弧 ( ) で括って示し、そのあとに条件が満たされる場合の結果を続けます。 もし1つの条件に対して複数の処理が必要なら、

if (A == B) {
  C = D;
  alert(C);
}


のように一連の処理を {} で括ります。{ が処理の開始(begin)、} が処理の終了(end)を表します。 書き方は

if (A == B) { C = D; alert(C); }

でも

if (A == B)
{
  C = D;
  alert(C);
}


でもかまいません。自分で書きやすく且つ読みやすいと思う書き方で結構です。 いずれの場合も条件文は必ず括弧 ( ) で括ることを忘れないように。 また、{} で括る結果内容には命令をいくつ書いてもかまいません。 1つでも0個でも良いのです。ということは

if (A == B) {
}


でもエラーになりません。これは A が B なら何もしない、ということを意味します。

条件が満たされなかった場合の処理は else で示します。

if (A == B) C = D;
else C = E;

この場合にももちろん、{} を使用できます。

if (A == B) {
  C = D;
  alert("C に D を代入しました!");
} else {
  C = E;
  alert("C に E を代入しました!");
}

else の後に条件文を続けることもできます。

if (A > B) C = D;
else if (A > F) C = E;

これと、単なる if 文の連続、

if (A > B) C = D;
if (A > F) C = E;


とを混同してはいけません。前者は A が B より大きくなく、なおかつ A が F より大きいときに C に E が代入されますが、 後者は A が B より大きくても小さくても等しくても、A > F という条件が満たされれば C に E が代入されます(2つの条件が矛盾する場合、後の条件が実行されます)。

否定条件文は括弧 ( ) の前に! を付けて表します。

if !(A == B) C = D; // もし A が B でなければ C に D を代入する

これは以下の場合と同じ結果になります。

if (A != B) C = D; // もし A が B でなければ C に D を代入する

条件の絞り込みは && 「かつ」もしくは || 「または」で行います。

if (A > B && A < F) C = D; // A が B より大きく F より小さければ C に D を代入する

if (A > B || A < F) C = D; // A が B より大きいか、または F より小さければ C に D を代入する

条件文はネストさせることが出来ます。

if (A > B) { // A が B より大きいとき
  C = D; // まず C に D を代入する
  if (A < F) { // 仮に A が F より小さければ
    C = G; // C に G を代入する
  }
  alert(C); // C の内容をアラートする
}

条件文にブール値(true と false)を使う場合、ブール型変数だけで表現することが可能です。

num = prompt("数字を入れて下さい。","");
// 入力を求めるダイアログを表示し、入力結果を変数 num に入れる
flag = isNaN(num);
// num が数値でなければ true、数値であれば false を変数 flag に代入
if (flag) alert(num + "は数字ではありません!");
// これは if (flag == true) alert("どうも!"); と同じ
else alert("どうも!");

但し注意しなければいけないケースがあります。ブール値を返す関数やプロパティの戻り値は true でなければ false に決まっている、 と考えがちですが、ブラウザがサポートしていないような関数やプロパティを指定した場合、値は undefined を返します。 例えば navigator.cookieEnabled というプロパティはブラウザのクッキー設定が有効なら true、無効なら false を返しますが、 Internet Explorer 4.x 以上、Netscape 6.x 以上でしかサポートされていず、他のブラウザでは常に undefined を返します。 従って迂闊に

if (navigator.cookieEnabled) alert("クッキーが有効です。");
else alert("クッキーが無効です。");


などと書くと、navigator.cookieEnabled というプロパティを知らないブラウザではすべて「クッキーが無効です。」と表示されてしまうでしょう。これは、

if (!navigator.cookieEnabled) alert("クッキーが無効です。");

と書いた場合にも同じ問題を引き起こします。ですからこのような問題が予想されるケースでは、

if (navigator.cookieEnabled != undefined) {// 値が undefined でなければ
  if (navigator.cookieEnabled) alert("クッキーが有効です。");
  else alert("クッキーが無効です。");
}


のように条件分岐を二重にするなどの対処をしましょう。

2.switch 文

switch 文は選択肢が多い場合に使います。

num = document.forms[0].elements[0].selectedIndex;
switch (num) {
  case 0: location.href = "index.html"
  case 1: location.href = "01.htm"; break;
  case 2: location.href = "02.htm"; break;
  case 3: location.href = "03.htm"; break;
  case 4: location.href = "04.htm"; break;
  case 5: location.href = "05.htm"; break;
  case 6: location.href = "06.htm"; break;
  case 7: location.href = "07.htm"; break;
  case 8: location.href = "08.htm"; break;
  case 9: location.href = "09.htm"; break;
  default: alert("対応ページがありません。");
}

これはページ内のドロップダウンフォームから訪問者が選んだリストのインデックス(0 が最初)を変数 num に代入し、 その値を case の次に示し、コロン(:)以下にはそれに対応する処理を示しています。 必ず break; で終わっていることに注意して下さい。 default: 以下は該当する値が無かった場合の処理ですが、これは省略可能です。

このようにswitch 文は条件の数が多く、かつ連続性があり、予想可能な場合に適しています。

3.二項演算

或る条件を評価して、それが真のときと偽のときの処理を対比的に示します。

(A == 0) ? alert("0 で割れません!") : B /= A;

これは A が 0 なら警告し、それ以外は B を A(数値)で割るという処理です。

(条件式) ? 真の場合の処理 : 偽の場合の処理 ;

という定型になります。これを if 文に直すと、

if (A == 0) alert("0 で割れません!"); else B /= A;

になります。もし結果の処理が値を入れ替えるだけのケースでは、

B /= (A == 0) ? 1: A;

という構文が可能です。これは

if (A == 0) B /=1; else B /= A;

に相当します。

前ページに戻る 前ページに戻る 次ページに進む
Copyright © 2003 梅ちゃん堂. All Rights Reserved