JavaScript初級講座

条件分岐をさせたい時は if文や三項演算子、switch文を使用します。

if文

if文は以下のように記述します。

if (条件式) {
    条件式が真の時に実行したい処理
}

また、条件式が偽だった場合に実行させたい処理がある時は else文を使用し、条件式が偽だった場合に新しく条件式を追加して判定させたい時は else if文を使用します。

// else文
if (条件式) {
    条件式が真の時に実行したい処理
}
else {
    条件式が偽の時に実行したい処理
}
        
// else if文
// else if文は複数回記述できます。
if (条件式1) {
    条件式が真の時に実行したい処理
}
else if (条件式2) {
    条件式1が偽の時 かつ 条件式2が真の時に実行したい処理
}
else if (条件式3) {
    条件式1,2が偽の時 かつ 条件式3が真の時に実行したい処理
}
// ここにelse文がありませんが、else文は省略可能なのでエラーにはなりません。
 
// else文とelse if文は同時に使用する事もできます。
if (条件式1) {
    条件式が真の時に実行したい処理
}
else if (条件式2) {
    条件式1が偽の時 かつ 条件式2が真の時に実行したい処理
}
else if (条件式3) {
    条件式1,2が偽の時 かつ 条件式3が真の時に実行したい処理
}
else {
    すべての条件式が偽だった時に実行したい処理
}
        
// 以下のような書き方はエラーになります。
// else if文の前にelseが記述されている
if (条件式) {
    処理
}
else {
    処理
}
else if (条件式) {
    処理
}
        
// else文が2回使われている
if (条件式) {
    処理
}
else {
    処理
}
else {
    処理
}

以下の内容を「SampleJS.html」に記述して実行してみましょう。

var money     = 100;
var chocolate = 120;
var cookie    = 110;
var candy     = 100;
        
if (money >= chocolate) {
    alert("チョコレートを買った！");
}
else if (money >= cookie) {
    alert("クッキーを買った！");
}
else if (money >= candy) {
    alert("飴玉を買った！");
}
else {
    alert("何も買えなかった。。。");
}

サンプルの内容が理解できたら所持金やお菓子の値段を変えたり、品数を増やしてみたり、自分なりに書き換えて実行してみましょう。

条件(三項)演算子

条件(三項)演算子は以下のように記述します。

条件式 ? 条件式が真の時に返す値 : 条件式が偽の時に返す値;
        
// 以下のように考えると分かりやすいです
if (条件式) {
    条件式が真の時に返す値
}
else {
    条件式が偽の時に返す値
}

コロンとセミコロンの間違いに注意しましょう
if文との違いは、 真と偽のそれぞれで直接値を返すことができます。
条件(三項)演算子は他にもさまざまな記述方法があります。
以下の内容を「SampleJS.html」に記述して実行してみましょう。

var x = 10;
var result;
        
// 結果を変数に代入
result = x == 10 ? "TRUE" : "FALSE";
alert(result); // TRUEと表示される。
        
// ここから下は複雑な書き方になるので、参考程度に見てください。
// 結果を式で使用する
result = "xは5と" + (x == 5 ? "等しいです。" : "等しくないです。");
alert(result); // xは5と等しくないです。 と表示される。
        
// 多重での使用もできます
result = x > 15 ? "xは15より大きい" : "xは15以下で、" + (x < 5 ? "5よりも小さい。" : "5以上だ。");
alert(result); // xは15以下で、5以上だ。 と表示される。
        
// 処理を書く事もできます
x > 5 ? result = "xは5よりも大きいです。" : result = "xは5以下です。";
alert(result); // xは5よりも大きいです。 と表示される。
        
// 括弧とカンマで区切ると、複数の処理を実行することができます。
x == 10 ? (result = "xを10から15に変更します。", x = 15) : (result = "xを10に変更します。", x = 10);
alert(result); // xを10から15に変更します。 と表示される。
alert(x); // 15 と表示される。
        
// 値の代入時も複数の処理を実行できます。
// 括弧内のカンマ区切りの最後の値が代入される値になります。
result = x == 10 ? (x = 15, "xを10から15に変更しました。") : (x = 10, "xを10に変更しました。");
alert(result); // xを10に変更しました。 と表示される。
alert(x); // 10 と表示される。

変数に代入する値を変えたり、条件を変更したり、実際に自分で書いてみたりしてみましょう。

switch文

switch文は以下のように記述します。

switch (値) {    
    case 値1:
        値が値1と一致する時に実行したい処理
        break;
    case 値2:
        値が値2と一致する時に実行したい処理
        break;
    case 値3:
        値が値3と一致する時に実行したい処理
        break;
    defalut:
        値がどれにも一致しない場合に実行したい処理
        break;
}

コロンとセミコロンの間違いに注意しましょう
また、値は === で比較されます。
switch文のdefaultとbreakは記述しなくてもエラーにはなりません。
breakは今のswitch文を終了したい時に記述します。
breakが無い場合、 実行されるcaseの位置から次のbreakが現れる箇所までの処理がすべて実行されます。
以下の例を見てみましょう。

var hoge = 10;
switch (hoge) {
    case "10":
        // "10" === 10 一致していないので実行されません。
        alert("文字列の10"); 
    case 10:
        // 10 === 10 一致しているので実行されます。
        alert("数値の10"); 
    case 20:
        // 10 === 20 一致していませんが、breakしていないので実行されます。
        alert("数値の20"); 
    case "A":
        // 10 === "A" 一致していませんが、breakしていないので実行されます。
        alert("A");
        // breakします。 
        break; 
    case "B":
        // breakされたので実行されません。
        alert("B"); 
    defalut:
        // case "B"にbreakはありませんが、その手前のcase "A"でbreakしているのでここも実行されません。
        alert("default"); 
}

このようにswitch文は該当するcaseからbreakが現れるまでの処理が実行される事が分かると思います。
それでは以下の内容を「SampleJS.html」に記述して実行してみましょう。

var sweets = "candy";
switch (sweets) {
    case "chocolate":
        alert("120円です。");
        break;
    case "candy":
    case "gum":
        alert("100円です。");
        break;
    case "cookie":
        alert("110円です。");
        break;
    default:
        alert("そのお菓子は売っていません。");
        break;
}

caseを追加したり、sweetsを変更したり、自分なりに書き換えて実行してみましょう。