switch文で条件を満たしているのにcase文に遷移しない

js
1$('.set-role-btn').on('click', function(){
2  const setRole = $('.set-role').val();
3  // setRole = {"settlor"=>{"generation"=>"1"}, "beneficiary_agent"=>{"generation"=>"4", "beneficiary_id"=>"2"}}
4
5  switch (true) {
6    case setRole.includes('settlor'):
7      $('#trust_roles').children('[value=settlor]').prop('disabled', true);
8      break;
9    case setRole.includes('trustee'):
10      $('#trust_roles').children('[value=settlor]').prop('disabled', true);
11      break;
12    case setRole.includes('beneficiary"'):
13      $('#trust_roles').children('[value=beneficiary]').prop('disabled', true);
14      break;
15    case setRole.includes('agent'):
16      $('#trust_roles').children('[value=beneficiary_agent]').prop('disabled', true);
17      break;
18    default:
19  }
20});

上記のswitch文にてagentという文字列が確かに存在しており、４つ目のcase文である

js
1setRole.includes('agent'):

を満たしているのに処理が行われません。

js
1console.log(setRole.includes('agent'));
2// true

と出力されていることも確認済みです。
試しにdebuggerをcase文の中に配置してみましたが、処理が止まらなかったため、分岐していないようです。
原因が分かればご教示いただきたいです。

draq

2021/05/09 16:26

HTMLが無いので想像ですが、他のcase文が先にマッチしているとかないですか？

tarotarotarotar

2021/05/09 16:33

上記の内容だと、1番目と2番目のcase文はマッチしており、文中の処理が実行されてます。しかし、4番目だけ動かないんです、、、

draq

2021/05/09 16:42

それぞれのcaseでbreakしているので最初のcaseにマッチした場合他のcaseは評価されません。だから4番目のcaseにマッチする場合でも、1～３番めのどれかのcaseにマッチした場合4番目は評価も実行もされないということです。４番目のcaseを先頭に移動すると動いたりしませんか？

takasima20

2021/05/09 20:35

関係ないけど、なんで四つ目だけ find なのかな?

tarotarotarotar

2021/05/10 02:51

draq様 > それぞれのcaseでbreakしているので最初のcaseにマッチした場合他のcaseは評価されません break;はそのcase文の中から抜けるという意味で例え1番目のcaseがtrueでその中のbreak;が実行されても2番目以降のcaseも判定される、ではなかったでしょうか？また、break;がなければ1番目のcaseがtrueの場合、以降全てのcase文の内容実行されてしまう、という理解だったのですが間違ってますでしょうか？（試しにbreak;を削除したのですが、そのような挙動になりました）

tarotarotarotar

2021/05/10 02:51

takasima20様すみません、こちらはテスト時のものです。修正しました！

行動規範の内容に同意します

回答3件

ベストアンサー

switch文の挙動を誤解している気がします。breakした場合、switch文自体から抜けます。
例えば、

JavaScript
1const s = "123";
2switch (true) {
3  case s.includes("1"):
4    console.log("1");
5    break; //switch文自体から抜ける
6  case s.includes("2"): //条件には合うが最初のcaseが先にマッチしbreakされるためここには来ない
7    console.log("2");
8    break;
9}

こんなコードがあった場合、両方のcaseにマッチしますが出力されるのは"1"だけです。
(break しない場合は、次のcaseが続けて評価されます。)

詳しくは MDN の解説をどうぞ。

省略可能な break 文は、各 case 節のラベルに関連付けられれており、一致した文を一回実行した後で switch を抜け出し、 switch に続く文から実行を継続することを保証します。もし break が省略されたら、プログラムは switch 文の中の次の文から実行を継続します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/switch

また MDN の JavaScript Demo は自由に変更して実行できるので、色々試してみるといいでしょう。

投稿2021/05/10 03:18

draq

総合スコア2573

tarotarotarotar

2021/05/10 03:27

ありがとうございます！私の理解に間違いがありましたね・・・では[複数の条件に一致したcase文を実行させる]は不可という理解でよかったでしょうか？素直にそれぞれに対してif文を書いたほうが良いでしょうか。

maisumakun

2021/05/10 03:33

意図的にフォールスルー（breakを書かずに制御フローを流す）でできる場合もあるかもしれませんが、一般にはswitchを複数の条件にマッチさせて使うものではありません。

draq

2021/05/10 03:36

回答にも書いたようにbreakを書かなければ続けて次のcaseを評価させることも出来ます。ただ私がレビュアーなら誤読リスクがあるので(breakの書き忘れかを疑うとか)、if文で書くように指摘します。ただし例外的に const value = 3; switch(value) { case 1: case 2: //なにかの処理 break; case 3: //なにかの処理 break; } の様に、定数値のor条件にマッチするケースならありかもしれません。

tarotarotarotar

2021/05/10 05:15

maisumakun様 draq様ご回答いただき感謝です。頂いたご意見を元に、if文で書くことにしました。この度は誠にありがとうございました。引き続きよろしくお願いいたします。

行動規範の内容に同意します