Switch文でSwitchに表示

Switch文でSwitchに表示

こんにちは。TOMMY(トミー)です。

昨年末より、会社で仕事中の息抜きにゲーム「Nintendo Switch」をしています。
忘年会も社内で「大乱闘スマッシュブラザーズ」をしました(笑)

Switch好きになった今日この頃。
ウェブの世界にも「Switch文(条件分岐)」が存在することを知りました。

これは「Switch×Switch」のコラボをせねば!と思い、下記ものを作ってみました!
Switch文を利用し、Switchにキャラクター紹介動画を流してみました。
もし良ければ実際に触ってみてください。

switch画面「こちらをクリック」

 

Switch文とは

Switch文とは、条件分岐の一つです。
「switch(式)」の結果が「caseの値」と完全一致した場合に、その処理を実行します。
最後には処理を終了するために「break」の記述が必要です。
「break」を記述していないと、次のcase処理を続けて実行してしまいます。
最後に記述している「default」に続く処理は、どのcaseの値とも一致しない場合に実行されます。

式は下記のように記述します。

switch( 式 ) {
 case 値1:
//式の評価結果と値1が同じ場合に実行する処理
 break;
 case 値2:
//式の評価結果と値2が同じ場合に実行する処理
 break;
 default:
//どのcaseの値とも一致しない場合に実行する処理
}

※必要な分だけ「case 値:〜break;」を追加し増やすことができます。

Switchにキャラクター紹介動画を表示させるソースコード

switch画面「こちらをクリック」

このキャラクター紹介動画を流す時に書いたコードは下記のようになります。
(※Switch文を見やすくするため、コードを割愛している部分があります)

【HTML】

<select id="character">
<option disabled selected value >選択肢を表示</option>
<option value="mario">マリオ</option>
<option value="luigi">ルイージ</option>
<option value="yoshi">ヨッシー</option>
<option value="koopa">クッパ</option>
<option value="donkey">ドンキーコング</option>
<option value="kirby">カービィ</option>
</select>
<div id="movie"></div>

【Switch文】

var character = $('#character').val();
switch( character ){
case 'mario':
$('#movie').html('マリオの動画');
break;
case 'luigi':
$('#movie').html('ルイージの動画');
break;
case 'yoshi':
$('#movie').html('ヨッシーの動画>');
break;
case 'koopa':
$('#movie').html('クッパの動画');
break;
case 'donkey':
$('#movie').html('ドンキーコングの動画');
break;
case 'kirby':
$('#movie').html('カービィの動画');
break;
default:
}

例)マリオの動画を流す場合の処理の流れ
セレクトボックス「#character」の子要素であるvalの値が「mario」の時は、「マリオの動画」を「#movie」に表示させる。

まとめ

Switch文は、この場合はこの処理とシンプルで使いやすかったです。
条件分岐と言えば「if文」のイメージが強いですが、「Switch文」もTPOに合わせて使っていきたいですね♪

先ほどのキャラクター紹介動画を表示する実装は、アイディアが閃いてから2日ぐらいで完成していたのですが、Switch文の説明を書くのが難しくて難しくて^^;
やっとブログを書き終えて満足しています♪

この記事が気に入ったら
いいね ! しよう

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)