🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

4回答

1473閲覧

switich分が完全一致するものしか拾ってくれないです。

sembokulove

総合スコア90

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

2クリップ

投稿2024/03/25 23:04

編集2024/03/25 23:22

実現したいこと

運賃検索プログラムを作っています。
対区間別運賃より、普通運賃、小児運賃等々を出したいと思っております。
ところで、従来のやり方だと、同じ路線の場合にはいいのですが、
違う路線を入れた場合に困るなぁと思い、switch文で路線分けをしましたが、問題が発生しております。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <div> 出発駅: <select name="from" id="stations1"> <option value="姫路">姫路</option> <option value="京口">京口</option> <option value="野里">野里</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> </div> <div> 到着駅: <select name="to" id="stations2"> <option value="姫路">姫路</option> <option value="京口">京口</option> <option value="野里">野里</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> </div> 距離:<span name="distance"></span>km<br /> 区間:<span name="section"></span><br /> 普通運賃:<span name="adult"></span>円<br /> 小児運賃:<span name="child"></span>円<br /> </body> </html> 乗車区間: <span id="span1"></span> ~ <span id="span2"></span> 間 <script> document.getElementById("stations1").addEventListener("change", function() { // value値を取得 const str1 = this.value; document.getElementById("span1").textContent = str1; }); document.getElementById("stations2").addEventListener("change", function() { // value値を取得 const str1 = this.value; document.getElementById("span2").textContent = str1; }); function calc() { var f = document.querySelector('[name=from]').value; var t = document.querySelector('[name=to]').value; // 駅間に一致するものを探す var eki_info = null; for (var i = 0; i < list.length; i++) { var eki1 = list[i].name[0]; var eki2 = list[i].name[1]; if ((eki1 == f && eki2 == t) || (eki1 == t && eki2 == f)) { eki_info = list[i]; break; // 駅間が一致したらループを抜ける } } // 運賃情報を取得 var far_info = null; if (eki_info) { far_info = customCalc(eki_info.section); } // 情報を設定 if (eki_info && far_info) { document.querySelector('span[name=distance]').innerHTML = eki_info.distance; document.querySelector('span[name=section]').innerHTML = eki_info.section; document.querySelector('span[name=adult]').innerHTML = far_info.adult; document.querySelector('span[name=child]').innerHTML = far_info.child; } } document.addEventListener('DOMContentLoaded', function () { document.querySelector('select[name=from]').addEventListener('change', calc); document.querySelector('select[name=to]').addEventListener('change', calc); }); // 新しい要件に基づいて、sectionの内容を修正して運賃を返す関数 function customCalc(section) { var customFarInfo = null; // 新しい条件に基づいて運賃情報を探す switch (section) { case "bantan": section = "jr_west_traffic"; break; default: break; } // 該当する運賃情報を取得 for (var i = 0; i < fares.length; i++) { if (fares[i].section == section) { customFarInfo = fares[i]; break; } } // 運賃情報が見つかった場合、運賃を返す if (customFarInfo) { return customFarInfo; } else { return null; } } </script> <script> var fares = [ { section: "jr_west_traffic", adult: 0, child:0 }, { section: "orange" , adult: 190, child:200 } ]; var list = [ { name: ["姫路", "京口"], distance: 1.7, section: "bantan_2" }, { name: ["姫路", "野里"], distance: 4.3, section: "orange" }, ]; </script> </html>

発生している問題・分からないこと

switch文で完全一致するものしか拾ってくれません。部分一致するものを拾うにはどうなりますか。

エラーメッセージ

error

1何もでなくなります。 2どうすればいいのでしょうか。

該当のソースコード

```ここに言語を入力 // 新しい条件に基づいて運賃情報を探す switch (section) { case "bantan": section = "jr_west_traffic"; break; default: break; } // 該当する運賃情報を取得 for (var i = 0; i < fares.length; i++) { if (fares[i].section == section) { customFarInfo = fares[i]; break; } } // 運賃情報が見つかった場合、運賃を返す if (customFarInfo) { return customFarInfo; } else { return null; } }

の部分で、完全一致する情報は拾ってくれますが、部分一致のものは拾ってくれません。

### 試したこと・調べたこと - [x] teratailやGoogle等で検索した - [ ] ソースコードを自分なりに変更した - [ ] 知人に聞いた - [ ] その他 ##### 上記の詳細・結果 チャットgptで何度か質問しましたが、有益な情報は得られませんでした。 また、ワイルドカードも効かないです。 ### 補足 特になし

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

switch文の使い方の中で、switch trueというものがあります。
一般にswitch文は与えられたデータと続くcaseのデータを比較して分岐しますが、swicth文にtrueを与え、caseにはBoolean値を返す処理を与えることで、以下のような実装が可能です。

javascript

1switch (true) { 2 case truthyFunc(): 3 doSomething(); 4 break; 5 case falsyFunc(): 6 notDoSomething(); 7 break; 8}

今回の事例ですとswitch trueに続くcaseRegExp#testなどを与え、パターンマッチで分岐するようにしてみてはいかがでしょうか。
somePatternについては個別に実装をお願いします。

javascript

1switch (true) { 2 case somePattern.test(section): 3 section = ...; 4 break; 5}

投稿2024/03/25 23:23

Refrain

総合スコア539

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sembokulove

2024/03/25 23:30

もう少し詳しくお願いできませんか。 今回の場合、どのように当てはめていいのかわかりかねます。
Refrain

2024/03/25 23:36

こちらとしても、曖昧検索をどのように意図しているのか分からないため、コードそのものの実装は致しかねます。 まずは正規表現と`switch true`について検索をお願いします。
sembokulove

2024/03/25 23:38

要するに、bantanを含む文字列から、jr_west_trafficを含む文字列を参照したいということなんです。 駄目なら、重複投稿やむなしということですよ。
Refrain

2024/03/25 23:43

単に含むことだけで良ければ、`String#includes`辺りを使う方法が最も簡単だと思われます。 まずはGoogleなどで自ら調べることから始めてみてください。 「JavaScript 文字が含まれる」などで参考記事は沢山出てくるはずですので。
guest

0

自己解決

せっかくのご回答どうもすみません。
チャットgptに挙げたところ、うまくゆきました。
下は成功したjavascriptのコードです。

if( section.includes("bantan") ) { section = "jr_west_traffic"; }→if (section.includes("bantan")) { section = section.replace("bantan", "jrwest_localtraffic"); }

投稿2024/03/26 10:46

sembokulove

総合スコア90

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Refrain

2024/03/26 11:29

ユーザーが`bantanaaa`などの`bantan`の含まれるキーワードを検索した際、`jrwest_localtrafficaaa`といった予期せぬ結果になることが予見されますので、一応念の為記載しておきます。
sembokulove

2024/03/26 11:30

ありがとうございます。
otn

2024/03/26 11:43 編集

やりたいことが「sectionの文字列の一部にでも"bantan"が含まれていれば"jr_west_traffic"に書き換える」ではなかったのですね。 「sectionの文字列の一部にでも"bantan"が含まれていれば、"bantan"の部分だけ"jr_west_traffic"に書き換える」であれば、さらに簡単で、普通は、 section = section.replace("bantan", "jrwest_localtraffic"); の1行だけ書きます。ifは不要です。 replace自体が「もしあれば置換。無ければ何もしない(元の文字列のまま)」という意味です。
sembokulove

2024/03/26 11:46

詳しい情報のご提供ありがとうございます。
guest

0

switch文は完全一致するかどうかで判断する構文なので、完全一致じゃない場合には使えません(他のプログラミング言語では可能なものもある)。

やりたいことが「sectionの文字列の一部にでも"bantan"が含まれていれば"jr_west_traffic"に書き換える」であれば、

JavaScript

1if( section.includes("bantan") ) { 2 section = "jr_west_traffic"; 3}

です。条件が複数あれば、else ifで続けます。あるいはもっと沢山あるなら、それぞれの文字列を配列などにしてループを回すか。

投稿2024/03/26 06:04

otn

総合スコア85862

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

switchはキーワードで分岐するifですから部分一致を希望するなら正規表現でif分岐するほうが楽だと思います

追記

エスパー的に回答しますと

javascript

1var list = [ 2 { name: ["姫路", "京口"], distance: 1.7, section: "bantan_2" }, 3 { name: ["姫路", "野里"], distance: 4.3, section: "orange" }, 4];

list内の複数オブジェクトの内、sectionにbantanを含むもののsectionをjr_west_trafficに書き換える・・・的な拡大解釈ができます
いくつか課題があります

  • bantan_2をjr_west_trafficに上書きしてしまったらbantanの属性で検索できなくなりますが大丈夫でしょうか?
  • つまりsectionを複数持ちできる配列にきりかえればいいのでは?
  • そもそもbantan_2はbantanでデータを持てばいいだけでは?
  • bantanとbantan_2は違うものというならbantan_2を検索して合致させればいいだけでは?

総じて

javascript

1var list = [ 2 { name: ["姫路", "京口"], distance: 1.7, section: ["bantan_2","jr_west_traffic"] }, 3 { name: ["姫路", "野里"], distance: 4.3, section: ["orange"] }, 4];

もしくはbantan_2がbantanの属性をもつがbantanとは違うので属性をもちたいなら

javascript

1var list = [ 2 { name: ["姫路", "京口"], distance: 1.7, section: ["bantan","bantan_2","jr_west_traffic"] }, 3 { name: ["姫路", "野里"], distance: 4.3, section: ["orange"] }, 4]; 5

のようなもたせ方をする、もしくはあとから拡張する・・・とか

投稿2024/03/26 00:16

編集2024/03/26 00:33
yambejp

総合スコア116644

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Refrain

2024/03/26 00:18

下の回答へのコメントに戴きましたが、どうやら含まれれば良いだけのようです。
sembokulove

2024/03/26 09:54

回答ありがとうございます。試してみましたが解決できませんでした。 (試した結果の詳細を記載してください) この場合どの辺りに原因がありそうでしょうか? returnに~を含む文字列を返したいです。 これ、すぐに答えられない場合、重複投稿はやむなしです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問