1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

子供の想像力を伸ばしアイデアを形にする小学生向けプログラミング教室「プロスタキッズ」

【JavaScript入門】Switch文で条件分岐する方法

【JavaScript入門】
Pocket

どの様なプログラミング言語であっても、条件分岐を行いたい時は主にif文を使用します。
しかし、同じ様な条件がたくさん用意されている場合、if文を使用すると少し面倒になります。書く手間が掛かる点も嫌ですが、コードの可読性が落ちる事が一番嫌なところです。プログラムコードはシンプルに分かりやすく書くよう心掛けたいですよね。
そんな場合は、多方向分岐の構文を使いましょう。JavaScriptの場合は、Switch文を使います。

例)同じ様な条件が多い場合(if文)

Switch文の使い方

Switch文の基本的な構文は「Switch(値)」で判断基準の値を設定し、「Case 分岐1:」で条件を設定します。
Caseの条件に合う場合の処理を記述し、処理が終わった場合は必ず「Break;」を記述します。Switch文は、Caseで始まってBreakで終わるようになっています。
また、「それ以外」を記述したい場合は、defaultを使用します。Ifで言う所の、elseですね。defaultは「それ以外」なので、最後に記述します。

例)同じ様な条件が多い場合(Switch文)
下の例では、tmpに都市の名前が入ります。Caseで指定された条件と合致すると、tmp2に国名が入ります。

応用と注意点

さて、前回の例の部分には、値が「東京」の場合と「大阪」の場合で、同じ処理を記述している事に気付いたでしょうか?可読性やメンテナンスを考えると同じ処理を記述するのは避けたいですよね。
東京と大阪の部分はこの様に記述できます。

Caseの条件は重ねることが出来るのです。Ifで言う所の、「 || 」(または)ですね。

ところで、switch文はcaseで始まりbreakで終わると書きましたが、breakを書き忘れるとどうなるか判りますか?Breakを書き忘れると、そのまま処理は流れていってしまいます。どういうことかというと、次の例で見てみましょう。

この様な場合、値に「東京」が入っていても、breakがないので処理が止まらず、「case “ワシントン”」まで処理は流れてしまいます。結果、tmp2にはアメリカが入ります。都市「東京」の所属する国は「アメリカ」になってしまいましたね。要注意です。

サンプル

サンプルを用意しました。色々といじって見て、処理の流れを試してみてください。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

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

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る