JavaScriptでswitchを使ってランダム分岐

switch の使い方

まずは簡単な普通の使い方から

JavaScript

switch(age) {
    case 10: console.log("10歳です"); break;
    case 20: console.log("20歳です"); break;
    case 30: console.log("30歳です"); break;
    default: console.log("その他の年齢です");
}

//age が20だった場合 → "20歳です"
//age が25だった場合 → "その他の年齢です"

age に入る数値によってどの case が起こるか変わります。case は数値または文字列で完全一致（===）による評価で条件に合う文を実行します。

文末の break はこの使用法の場合必須で、これがないと age が10だった場合 break されないので case 20、case 30 と全ての文を実行してしまいます。

詳しい使い方は以下を参考にしてください。

参考：switch - JavaScript | MDN

switch でランダム分岐

この switch を使ってランダム分岐を考えます。3つにランダムで分岐する場合。

JavaScript

switch(~~(3 * Math.random())) {
    case 0: console.log("ランダム1つ目です"); break;
    case 1: console.log("ランダム2つ目です"); break;
    case 2: console.log("ランダム3つ目です"); break;
}

Math.random() は0以上1未満の数値をランダムで返します。3をかけてますのでこの場合、0以上3未満のランダムな数値です。

~~ は切り捨てによる整数化です。切り捨てられた結果、~~(3 * Math.random()) は0、1、2のいずれかを返すという事になります。

5個にランダム分岐したければ以下のような感じで増やせば OK です。

JavaScript

switch(~~(5 * Math.random())) {
    case 0: console.log("ランダム1つ目です"); break;
    case 1: console.log("ランダム2つ目です"); break;
    case 2: console.log("ランダム3つ目です"); break;
    case 3: console.log("ランダム4つ目です"); break;
    case 4: console.log("ランダム5つ目です"); break;
}

デモ

今日の夕ご飯はです。

ボタンを押すと文言が変わります。実施コードは以下の通り。

JavaScript

//文言を入れる要素の取得
var demo = document.getElementById("switch-demo");

//ボタンを押されたら
document.getElementById("switch-button").addEventListener("click", randomSwitch, false);

function randomSwitch() {
    switch(~~(4 * Math.random())) {
        case 0: var demoComment = "オムライス"; break;
        case 1: var demoComment = "ハンバーグ"; break;
        case 2: var demoComment = "ビーフシチュー"; break;
        case 3: var demoComment = "親子丼"; break;
    }

    //要素内に文字を入れる
    demo.innerHTML = demoComment;
}

//初期値
randomSwitch();

まとめ

昔は遅いだのなんだの言われていて若干使いにくかった switch 文ですが、今はそんなことなく見た目も分かりやすくかけて便利です。

ランダム分岐にはもってこいの switch なのでドンドン使っていきたいです。