質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16415questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

switchの使い方がよくわからなくて…範囲で条件分岐はできないのですか?

解決済

回答 6

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,538

sumire_cl

score 54

switchってたとえば

switch(num) {
    case 1:
        console.log("友永");
        break;
    case 2:
        console.log("荒木");
        break;
    case 3:
        console.log("高橋");
        break;
}

というように書けばいいのですよね。
では
70番までは "選手"
それ以上で二桁なら "指導"
3桁なら "育成"
って出したいときは
switch文のcaseのところはどうやって書けばよいのでしょうか。
caseのうしろには定数式が書けるというところまでは調べましたが、じゃあどう書けばというのがわかりません。

switch(true) {
    case num =< 70:
        …

っていう書き方は、使ったらダメ!という記事を何個も見かけました。
(それがどうしてかまではまだ理解できていません)

もしくは、そういう、条件が範囲になるときはswitchは使ったらいけないのですか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/02/01 01:24

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • sumire_cl

    2017/02/01 23:51

    ありがとうございます!そのcodeっていうボタンはどこにあるのか教えてください。(見つけられなかった…)Androidのタブレットで見ています。

    キャンセル

  • kei344

    2017/02/02 15:11

    質問の本文入力エリア上端のツールバー中ほどにあると思います。(PC/iPadで確認)

    キャンセル

  • sumire_cl

    2017/02/03 22:22

    ありがとうございます。なんとなくわかりました。私のタブレットが7インチなので、ツールバー自体が出ていないのかもしれません。ノートPCて見ると出るので、タブレットでも10インチとかのもっと大きいのだったら出るのかしら…。

    キャンセル

回答 6

checkベストアンサー

+2

Switchってのは本来の意味で言えば切替器の事です。
例として電車の線路の分岐点の側にレバーがあるとイメージしてみましょうか。
レバーを右に引けば路線は右に接続、左に引けば路線は左に接続…
この状況ではレバーの状態は右か左かの2値しかありません。

それが転じて、Switch文は少ない値を前提とする切替器を定義する文として使われています。
ぶっちゃけif ~ else文はSwitchのほぼ完全上位互換になっていますが、
ここはSwitchだと狙い撃ちで適切に使えればカッコイイですね。

var lever = "left";
switch(lever) {
  case "left":
    // 路線が左に接続する
    break;
  case "right":
    // 路線が右に接続する
    break;
}

概念的に言えば、2〜3個の状態を切り替えるならSwitch文はカッコイイので積極的に使いたいのですが、
4個以上になると大抵のケースで分類分けがしきれなくなり、コードがぐしゃぐしゃになります。
そういう時はObjectを下記のように使えば代用できます。

// 完成状態でOK
var lever = "middle";
var point = {
  left: // 路線が左に接続している状態
  middle: // 路線が左に接続している状態
  right: // 路線が左に接続している状態
};
return point[lever];

// 処理を書きたい
var lever = "middle";
var point = {
  left: function(){},
  middle: function(){},
  right: function(){}
};
return point[lever]();

JavaScriptでは値の箇所をtrueにしてしまって、case判定の箇所で式を書く事は可能です。
switch文は緩やかな比較なのでtruthyになる値が出るとすぐに引っかかる落とし穴があります。
なので、基本的にswitch(false)にすることはマストで、条件式がひっくり返り超絶書きにくいといった背景もあります。
C言語からの流れでSwitch文はそういうものという認識になっている事も禁止される原因の一つです。

しかし、AltJSはその限りではありません。
AltJSのCoffeeScriptを使ってfizzbuzzを書いてみました。
(公式サイトにこの書き方が紹介されており、既存の概念を覆す書き方が推奨されていることが確認できます)

上がCoffeeScriptで作った文、下が変換されたJavaScriptです。

fizzbuzz = (it)->
  switch
    when it % (3 * 5) is 0 then "FizzBuzz"
    when it % 3 is 0 then "Fizz"
    when it % 5 is 0 then "Buzz"
    else it
console.log [1 .. 30].map(fizzbuzz)
# [1, 2, "Fizz", 4, "Buzz", "Fizz", 7, 8, "Fizz", "Buzz", 11, "Fizz", 13, 14, "FizzBuzz", 16, 17, "Fizz", 19, "Buzz", "Fizz", 22, 23, "Fizz", "Buzz", 26, "Fizz", 28, 29, "FizzBuzz"]
var fizzbuzz, i, results;

fizzbuzz = function(it) {
  switch (false) {
    case it % (3 * 5) !== 0:
      return "FizzBuzz";
    case it % 3 !== 0:
      return "Fizz";
    case it % 5 !== 0:
      return "Buzz";
    default:
      return it;
  }
};

console.log((function() {
  results = [];
  for (i = 1; i <= 30; i++){ results.push(i); }
  return results;
}).apply(this).map(fizzbuzz));

CoffeeScriptのswitch文は英文としても読める程に美しく、
ニュートラルな視点で見れば「これはこれで有り」と感じるのではないでしょうか?
懸念だった箇所も条件式がちゃんとひっくり返ってswitch(false)になっているので完璧です。

JavaScriptは基本的な構文がC言語に非常に似ている事から、嫌悪感のある人が多いかと思います。
要するに禁止なのはC言語の理屈であり、JavaScriptなどのC言語ライクな言語では従った方が良いでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/02 08:02

    そうか!switchは線路のポイント!
    とても納得がいきました。
    ダイヤルとかマスコンみたいなのはスイッチっていわないですもんね。

    条件はifでなんでも書けばいいのはわかっていますが
    switchはカッコイイので
    switchっぽく綺麗に書きたいなと思っていました。
    switchの比較が===じゃないのかってことは、まるで考えが及びませんでした。

    分岐がたくさんになったときにobjectで分岐させるのは
    分岐してる感じで好きです。

    そして
    そのCoffeeScriptって
    初めて見ましたが、とてもいいですね。
    switchがswitchっぽい、そしてとても綺麗。
    ちょっとドットインストールに行ってきます!

    キャンセル

+2

 switch (true)

 コード

「4桁以上」や「整数でない数値」はどうなるのでしょうか。

function sample (number) {
  var result;

  number -= number % 1; // Number 型に変換してついでに整数にまるめる

  if (number <= 70) {
    result = '選手';
  } else if (number < 100) {
    result = '指導';
  } else if (number < 1000) {
    result = '育成';
  }

  console.log(result);
}

sample(10.23);  // "選手"
sample('80');   // "指導"
sample(100);    // "育成"
sample(1000);   // undefined

Re: sumire_cl さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/31 23:47 編集

    ありがとうございます。
    ほんとはちゃんと全部書くとdefault:を書かないといけないとか
    書いてくださったように入力値を整数にするとかが必要なのですけど
    条件のとこだけ書いて端折ってしまいました…。

    そしてリンクを貼ってくださったQiitaは
    まさに「ダメ」と書いてあったいっぱいの記事のなかのひとつです。

    私の理解力がだいぶ足りていないことと
    エンジニアっぽく感情的な文章が出てくるとついていけないこととで
    まだ記事をちゃんと全部読みきれていません。

    やっぱりこういうのはifで書くのがいいのですよね。
    そしたらswitchはなんのために存在しているのかな、
    JavaScriptを作った人は必要と思ってswitchを作ったのだから
    なんかswitchっぽい綺麗な書き方があるのかしら、などと思っています。

    キャンセル

  • 2017/02/01 01:22 編集

    switch 文は定数を比較する為に使われる制御構文です。
    case 別に break; するコードがよく見られますが、それは一端で break しない限りは次の case まで実行され続ける性質があり、上手い事利用すればOR条件の動作が実現出来ます。
    https://gist.github.com/think49/009a8744c147a7013f14ea8913bd9027#file-csv-js-L38
    いずれにしても switch () で指定する値は「場合分け出来る範囲に固定する」必要がある為、事前にアリゴリズムを考えておく必要があります。
    オブジェクトのプロパティ名、配列のインデックス等、値が制限されている事が自明なものが使いやすいでしょう。

    switch(true) は true を先出しして条件式をcaseに指定する事になりますが、条件式を指定する制御構文として if-else が用意されているのでそれで十分という印象です。
    switch 文にするなら毎回、break しなければなりませんし、if-else の方が可読性で優れていると思えるからです。

    キャンセル

+2

if(num == 1){
console.log("友永");
}else if(num == 2){
console.log("荒木");
}else if(num == 3){
console.log("高橋");
}> 


単純にこっちの方がスッキリしてません?
読みやすさも必要なのではないかな。

switch(true) に関してはこんな記事もありましたね。
switch(true) イディオム考察 - Qiita

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/02 07:13

    ありがとうございます。
    読みやすいってだいじなことですね。

    条件はifで書けばみんな書けるのはわかっているのですが
    switchで綺麗に書きたいな、と思って質問してみました。

    キャンセル

+1

普通にifでよくないですか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

こんなのを想定しているのかな?

  function role(num){
    switch(true) {
      case (num>=100):
        return "育成";
      case num < 70:
        return "選手";
      case num>=70:
        return "指導";
    }
    return "";
  }

ダメな理由か...
switchを(true)で潰して本来のswitchの意味を持たないと言うのがダメな理由でしょう。
正直動くからしょうがないと言う人もいるらしいです。

参考までに検証用ソース

<html>
<body>
  <script>
  test(1);
  test(2);
  test(3);
  test(69);
  test(70);
  test(71);
  test(171);
  function test(num){
    console.log(role(num),name(num));
  }
  function name(num){
    switch(num) {
      case 1: return("友永");
      case 2: return("荒木");
      case 3: return("高橋");
      case 69: return("板東");
      case 70: return("江川");
      case 71: return("イチロー");
      case 171: return("安西");
    }
    return "";
  }
  function role(num){
    switch(true) {
      case (num>=100):
        return "育成";
      case num < 70:
        return "選手";
      case num>=70:
        return "指導";
    }
    return "";
  }
  </script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/01 00:15

    ありがとうございます。
    「本来の意味」というのがだいじなのですね。
    (true)だと
    trueとnum<70とを比べてtrueだったら、となって
    なんか頭痛が痛いみたいな感じになるのが
    「本来そういうものじゃない」形だということなのかしら、と… 私の理解これであってますか?

    キャンセル

  • 2017/02/01 00:36

    OK!w

    キャンセル

0

switchでは実装出来ないという点は他の人の回答にあるので省略します。
なぜswitchを使うのかに関して記載しますが、使う意味には個人差があるかと思いますのでこれが絶対とまでは言えません。悪しからず。

【処理速度の観点】
まぁ昔からある言語はほとんどこの処理速度のために色々な書き方を用意していました。

「メモリ効率の向上 : Y's Software Library」
ttp://ww4.tiki.ne.jp/~yosshie-k/programming/techniques/memory.html

上記に記載の通りで、コンパイラ(人間が書いたソースコードを機械が高速に実行できるようにしてくれる)はif-elseとswitchでコンパイル結果が変わります(コンパイラにも依りますが)
switch(true)がだめな理由は、結局メリットがなくなって(遅くなって)しまうからより高機能なif-else構文を使うべき ですかね。
携帯でも高スペックな今の時代ではあれですが、より早く動かすためにswitchが使われる場合があります。

【読みやすさの観点】
数値を使った場合にはメリットが分かりづらいですが、C言語やJavaには”enum”(列挙型)があります。この列挙型はswitchととても相性が良いです。
例えば升目上のゲームで、1回に上下左右に1マス動くことが出来るとします。
このとき

  int mMode; // 移動する方向
 // ~ 色々な処理 ~
  switch(mMode) {
    case 1: // 上に移動
      // 処理
    case 2: // 左に移動
      // 処理
    case 3: // 下に移動
      // 処理
    case 4: // 右に移動
      // 処理
    default: // 歩かない
      // 処理
  }


と書くことが出来ます。(C言語じゃなかったらごめんなさい)
ここでenumを使います。enumではある識別子を文字列で記載出来ます。

  enum Move { UP, DOWN, LEFT, RIGHT, OTHER }; // 移動方向の列挙型


これをswitchでこのように書けます。

  enum Move mMode; // 移動する方向
 // ~ 色々な処理 ~
  switch(mMode) {
    case UP: // 上に移動
      // 処理
    case LEFT: // 左に移動
      // 処理
    case DOWN: // 下に移動
      // 処理
    case RIGHT: // 右に移動
      // 処理
    default: // 歩かない
      // 処理
  }


すっきりすると私は思うのですが如何でしょうか?
このように書くことで、コメントも幾つか不要になりますね(マジックナンバー問題に続く)
これが読みやすさの観点から私がswitchを使う理由です。

以上、ご参考まで。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/03 22:17

    ありがとうございます。
    Cは昔昔にちょっとだけ書いたことがあるのでうっすらわかります。

    列挙型すてきですね。
    switchと合わせ技で使うと、先に選択肢が列挙してある形になってて見やすい!
    オブジェクトが見やすくて好きなのですが、これ好きです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    社員情報のプログラム

    社員情報のプログラム (JAVA) プログラの機能 (1)社員情報の追加 入力項目としては、社員番号、氏名(性、名)、生年月日(年、月、日) (3)で読み込んだ情報を追加する仕

  • 解決済

    棒グラフのそれぞれの棒にクリックするとクリックした棒に対応した処理をさせる

    前提・実現したいこと GoogleChartを使用し、棒グラフを表示させることは出来ました。 実現させたいこととしては、棒グラフの棒をクリックしたときに値ごとにアラートを表示す

  • 解決済

    Swith Case文でCASE 1とCASE 2の時は全く同じ処理を行いたい場合は?

    JavaScriptのSwith Case文でCASE 1とCASE 2の時は全く同じ処理を行いたい場合はどのようにすれば良いのでしょうか? ※CASEに渡ってくる値は動的に生

  • 解決済

    Youtube IFrame Player APIでのsetIntervalの挙動について

    プログラミング初心者です Youtube IFrame Player APIを用いて動画の経過時間を表示させたいです 以下のコードでとりあえず表示は出来たのですがある問題を見つけま

  • 解決済

    3Dファイルフォーマットについて

    ヘッダーファイルは別にあるのですが、STLデータを描画する際の処理ですが 画面が黒く塗りつぶされてしまいます。 明確におかしな点があればおしえてください #include<

  • 解決済

    switch構文で OR条件

    下記のように、case 1 とcase 2は同様の処理のため、纏めたいと思うのですが if分のように OR条件で"|"を使用することができませんでした。 同様の処理をしたいけれども

  • 解決済

    Javaでのswitch文

    Javaの勉強をしています。ここで、下のようなswitch文が出てきました。 int val = 2; switch (val){ case 1: S

  • 解決済

    【js】配列の内容で処理を分岐させたい

    5つの文字列を入れた配列があり、その並び順ごとに処理を分岐させたいのですがうまくいきません。 おそらく基本的な何かを理解していないのだと思いますが、ご教授いただけますと幸いです。

同じタグがついた質問を見る

  • JavaScript

    16415questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。