
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
JavaScript
2017.09.28
条件式の評価が true か false で処理が分かれるのがif文ですが、switch文を使用すると、評価が A、B、C、…と多数存在する場合でも対応することが出来ます。
今回は、条件分岐の中でこのような構造を持つswitch文を紹介します。
switch文は、if文と同様に条件分岐の1つです。
trueかfalseかに分かれるif文と違って、switch文は、1か2か3か…のように、1つの条件に対して、多数の処理内容に分けることができます。
多数の処理内容に分岐したい場合でも、そのほとんどがif文で実現可能ですが、switch文を使うと、1つの条件で対応出来るため、if文よりもスマートで分かりやすいプログラムとなります。
switch文は、次のように記述します。
switch ( 条件 ) {
case 値1 :
条件の評価が値1の場合の処理内容
break;
case 値2 :
条件の評価が値2の場合の処理内容
break;
case 値3 :
条件の評価が値3の場合の処理内容
break;
default :
条件の評価がどれにも該当しない場合の処理内容
break;
}
「switch ( 条件 )」の条件は、条件式の他、変数を記述することもできます。
実際には、変数を記述する場合が圧倒的に多いです。
条件式 又は 変数 の評価として、複数の値とその場合の処理内容を記述します。
そして、各処理内容の最後に、必ず「break;」を記述します。
この break は、現在実行している一連の処理から抜ける際に使われるキーワードですが、switch文は、break で処理内容を完結させる形で記述します。
「default」は、条件の評価がどれにも該当しない場合に実行する処理内容です。
必要に応じて書いても書かなくてもどちらでも構いません。
次のサンプルは、入力されたデータに紐付いたテキストを表示するプログラムです。
実際に試してみて下さい。
ソースは次の通りです。
<script type="text/javascript"> <!-- function judge() { var blood = document.sample.dat.value.replace(/[A-Za-z]/g, function(s) {return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);}).toLowerCase(); switch (blood) { case "a" : alert("徳川家康、夏目漱石、手塚治虫 と同じです!"); break; case "o" : alert("北野武、木村拓哉、ジョン・レノン と同じです!"); break; case "b" : alert("イチロー、ピカソ、アインシュタイン と同じです!"); break; case "ab" : alert("キリスト、レオナルド・ダ・ビンチ、明智光秀 と同じです!"); break; default : alert("血液型分類はナンセンスですね!"); break; } } //--> </script> <div style="background-color : #CCC; width:450px; padding : 20px;"> <form name="sample"> 血液型を入力してOKボタンをクリックして下さい! <div style="display:inline-flex"> <input type="text" name="dat" style="ime-mode:disabled;"> <input type="button" value="OK" onClick="judge()"> </div> </form> </div>
このサンプルコードでは、switch文で条件分岐する処理を、judge()というユーザ定義関数に記述しています。
そして、OKボタンをクリックすると、イベントハンドラのonClickによって、judge()が呼び出される仕組みです。
judge()の中で、画面から入力されたデータを「document.sample.dat.value」として取得して、変数bloodに代入した後、switch文で条件分岐しています。
この「document.sample.dat.value」の後に、長々と「.replace(/[A-Za-z]/g, function(s) {return String.fromCharCode(s.charCodeAt(0) – 0xFEE0);}).toLowerCase();」が付いていますが、この中の「.replace(/[A-Za-z]/g, function(s) {return String.fromCharCode(s.charCodeAt(0) – 0xFEE0);})」の部分で、全角のアルファベットを半角に変換する処理を行い、「.toLowerCase()」で、大文字を小文字に変換する処理を行っています。
switch文自体には直接関係ありませんが、想定できる入力方法に可能な限り対応するという視点はとても大切です。
そして、条件としての変数bloodの値によって、処理内容であるアラートの表示内容が決定するという流れです。
ちなみに、上のサンプルをif文で記述すると、次のようになります。
<script type="text/javascript"> <!-- function judge() { var blood = document.sample.dat.value.replace(/[A-Za-z]/g, function(s) {return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);}).toLowerCase(); if (blood == "a") { alert("徳川家康、夏目漱石、手塚治虫 と同じです!"); } else if (blood == "o") { alert("北野武、木村拓哉、ジョン・レノン と同じです!"); } else if (blood == "b") { alert("イチロー、ピカソ、アインシュタイン と同じです!"); } else if (blood == "ab") { alert("キリスト、レオナルド・ダ・ビンチ、明智光秀 と同じです!"); } else { alert("血液型分類はナンセンスですね!"); } } //--> </script> <div style="background-color : #CCC; width:450px; padding : 20px;"> <form name="sample"> 血液型を入力してOKボタンをクリックして下さい! <div style="display:inline-flex"> <input type="text" name="dat" style="ime-mode:disabled;"> <input type="button" value="OK" onClick="judge()"> </div> </form> </div>
条件式が多いと、ソースコードを読み込むのに時間がかかるため、保守の面からも、条件を1つにまとめられる場合はswitch文で記述した方が良いです。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.