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

Question

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は使ったらいけないのですか？

Comments

[kei344]

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

[sumire_cl]

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

[kei344]

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

[sumire_cl]

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

Answer 1

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言語ライクな言語では従った方が良いでしょう。

Comments

[sumire_cl]

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

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

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

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

Answer 2

switch (true)

• switch(true) イディオム考察 - Qiita

コード

「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 さん

Comments

[sumire_cl]

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

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

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

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

[think49]

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 の方が可読性で優れていると思えるからです。

Answer 3

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

Answer 4

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

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

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

Comments

[sumire_cl]

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

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

Answer 5

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

  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>

Comments

[sumire_cl]

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

[退会済みユーザー]

OK!w

Answer 6

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を使う理由です。

以上、ご参考まで。

Comments

[sumire_cl]

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

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