【JavaScript入門】三項演算子とswitch文

JavaScript入門の基礎的な内容を続けていきましょう。if-else文や論理演算子などを使って、条件分岐の制御構文をすでに扱いましたが、これをまた違った形で表現してみましょう。

ここでは三項演算子（Ternary Operator）とswitch文（Switch Statements）について扱います。

三項演算子
switch文
まとめ

三項演算子

まず、三項演算子からみていきましょう。三項演算子は条件演算子とも言います。これまでif-else文でブロックで分けて書いていたコードを三項演算子では1行でまとめて書くことができます。

次のif-else文を利用してみます。

var name = '太郎';
var age = 19;

if (age >= 18) {
    console.log(name + 'は選挙権があります。');
} else {
    console.log(name + 'は選挙権がありません。');
}

このコードを三項演算子を使って書き換えてみましょう。

三項演算子は次の形でコードを書きます。

[条件式] ? [条件式がtrueの場合に実行する式] : [条件式がfalseの場合に実行する式];

条件式の次に?を置き、この条件式がtrueの時に実行する式を次に置きます。次にコロンを置いて、falseの時に実行する式をかきます。

これを用いて、先ほどのコードを書き換えると、次のようになります。

var name = '太郎';
var age = 19;

age >= 18 ? console.log(name + 'は選挙権があります。') : console.log(name + 'は選挙権がありません。');

年齢が18歳以上の場合は選挙権があり、18歳未満の場合は選挙権が無いことを１文で書いているのがわかります。

これを実行すると、この場合は条件式はtrueになるので、「太郎は選挙権があります。」とコンソールに表示されることになります。

次のif-else文を書き換えてみましょう。

var age = 18;

if (age >= 20) {
    var isOkDrink = '飲酒OK!';
} else {
    var isOkDrink = 'お酒は二十歳になってから!';
}
console.log(isOkDrink);

条件式の判定の結果を変数に入れることで、返り値として扱うことができます。

書き換えると次のようになります。

var age = 18;

var isOkDrink = age >= 20 ? '飲酒OK!' : 'お酒は二十歳になってから!';
console.log(isOkDrink);

このように、三項演算子はスッキリとコードを書くことができます。

switch文

三項演算子はtureかfalseかで分岐するだけでしたが、if文にelse ifで多岐にわたる条件分岐になる時などは使えません。そんな場合はswitch文が使えます。

switch文は次のような形で記述します。

switch(式) {
  case 値1:
    「式=値1」である場合に実行される命令;
    break;
  case 値2:
    「式=値2」である場合に実行される命令;
    break;
…
  case 値n:
    「式=値n」である場合に実行される命令;
    break;
  default:
    式の値がどの条件にも合致しない場合に実行される命令;
}

switchに式を与えます。caseにに続けて値を置いてコロンを書きます。その下に、式と　caseの値が一致した場合に実行する処理を書きます。この処理のみで終わらせるためにbreakを置きます。このcase句を条件の数だけ用意します。default句は無くて動きますが、どの条件にも合わなかった時の処理を記述しておきます。

switchの式がどのcaseの値に合うか判定して、命令を実行するということになります。

var studyLang = 'JavaScript';
switch (studyLang) {
    case 'JavaScript':
        console.log('ただいま勉強中！');
        break;
    case 'HTML':
        console.log('webに必要です。');
        break;
    case 'Ruby':
        console.log('やる予定です。');
        break;
    default:
        console.log('とにかく何か勉強しましょう！');
}

変数studyLangとして、学んでいるプログラミング言語を与えます。それぞれのcaseの値に各種言語で処理を分岐させています。

ここではJavaScriptが１番目のcase句の値と一致しているので、ブラウザで実行するとJavaScriptコンソールには「ただいま勉強中!」と表示されます。

このコードを次のように書き換えてみます。

case句をbreakを使わずに２つ並べている部分を作ります。

var studyLang = 'JavaScript';
switch (studyLang) {
    case 'JavaScript':
    case 'Python':    //breakを使わずにcase句を複数並べる
        console.log('ただいま勉強中！');
        break;
    case 'HTML':
        console.log('webに必要です。');
        break;
    case 'Ruby':
        console.log('やる予定です。');
        break;
    default:
        console.log('とにかく何か勉強しましょう！');
}

これはエラーにはなりません。この場合は、変数がJavaScriptでもPythonでも最初の処理が実行されることになります。こういう使い方もできるということを頭に入れておきましょう。

もう一つやってみます。

論理演算子のところで扱った次のコードを利用してみます。

var name = 'レントン・サーストン';
var age = 14;

if (age < 18) {
    console.log(name + 'は' + age +'歳で、高校生以下のはずです。');
} else if (age >= 18 && age < 23) {
    console.log(name + 'は' + age +'歳で、大学に通っているかもしれません。');
} else if (age >= 23 && age < 61) {
    console.log(name + 'は' + age +'歳で、まあ仕事をしてる社会人ですよね。');
} else {
    console.log(name + 'は' + age +'歳で、もう社会にとって必要は無い？ことも無いです。');
}

if-else文で複数の条件で分岐させているコードです。

これをswitch文に書き換えてみます。

var name = 'レントン・サーストン';
var age = 14;

switch (true) {
    case age < 18:
        console.log(name + 'は' + age +'歳で、高校生以下のはずです。');
        break;
    case age >= 18 && age < 23:
        console.log(name + 'は' + age +'歳で、大学に通っているかもしれません。');
        break;
    case age >= 23 && age < 61:
        console.log(name + 'は' + age +'歳で、まあ仕事をしてる社会人ですよね。');
        break;
    default:
        console.log(name + 'は' + age +'歳で、もう社会にとって必要は無い？ことも無いです。');
}

switchの式をtrueにして、case句の値を比較演算子を使って変数を評価する条件にしています。

この場合の結果は以下のように表示されます。