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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

2回答

1735閲覧

Javascript: 冗長なif文をスッキリした書き方にしたい。

rails_ruby

総合スコア87

JavaScript

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

0グッド

0クリップ

投稿2019/02/11 08:58

編集2019/02/11 09:35

前提

コードを見て「何したいの」と思うかもしれませんが、そこはグッと抑えて頂いてご教示いただけたら幸いです。
下記のコードでは、セレクトボックスで選択した曜日の1週間前の日付に遡るプログラムになります。
もっとスマートな書き方はあると思いますが、私の今持っている知識で実装すると下記のようなコードになります。
一応、デベロッパーツールを使って検証したらので1週間前の日付には遡ることが出来ています。
###実現したいこと
コードを見ていただくとわかると思いますが、if文を多用した書き方をしており可読性が悪いと私自身でも感じおります。しかしながら私の今の知識ではこの書き方しか思いつかず、他に可読性が高い書き方があればと思いご意見、ご教示をいただくたく質問させて頂きました。
何か、スッキリしたコードの書き方があればご教示いただけると幸いです。
よろしくお願いします。

発生している問題・エラーメッセージ

該当のソースコード

html

1<select id="select"></select> 2<input type="button" value="go" id="btn_date">

javascript

1//セレクトボックス 2var week = [ "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" ]; 3 4for(var i=0;i<week.length;i++){ 5let op = document.createElement("option"); 6op.text = week[i]; 7op.value = i; 8document.getElementById("select").appendChild(op); 9} 10 11window.addEventListener('DOMContentLoaded', function(){ 12 document.querySelector('#btn_date').addEventListener('click',function(){ 13 14 var dObj = new Date(); 15 dObj.setDate(dObj.getDate() + 2);//検証で日付をいじっている 16 var wDay = dObj.getDay(); 17 //console.log(week[wDay]); 18 console.log('今日は'+ dObj); 19 20 const str = document.getElementById("select").value; 21 //console.log(str); 22 console.log(wDay); 23 if(wDay == 0){ 24 if (str == 0){ 25 console.log(str); 26 console.log('日曜日です'); 27 dObj.setDate(dObj.getDate() - 7); 28 console.log('1週間前は'+ dObj + 'です'); 29 }else if(str == 1){ 30 console.log(str); 31 console.log('月曜日です'); 32 dObj.setDate(dObj.getDate() - 6); 33 console.log('1週間前は'+ dObj + 'です'); 34 }else if(str == 2){ 35 console.log(str); 36 console.log('火曜日です'); 37 dObj.setDate(dObj.getDate() - 5); 38 console.log('1週間前は'+ dObj + 'です'); 39 }else if(str == 3){ 40 console.log(str); 41 console.log('水曜日です'); 42 dObj.setDate(dObj.getDate() - 4); 43 console.log('1週間前は'+ dObj + 'です'); 44 }else if(str == 4){ 45 console.log(str); 46 console.log('木曜日です'); 47 dObj.setDate(dObj.getDate() - 3); 48 console.log('1週間前は'+ dObj + 'です'); 49 }else if(str == 5){ 50 console.log(str); 51 console.log('金曜日です'); 52 dObj.setDate(dObj.getDate() - 2); 53 console.log('1週間前は'+ dObj + 'です'); 54 }else if(wDay == 6){ 55 console.log(str); 56 console.log('土曜日です'); 57 dObj.setDate(dObj.getDate() - 1); 58 console.log('1週間前は'+ dObj + 'です'); 59 } 60 }else if(wDay == 1){ 61 if (str == 0){ 62 console.log(str); 63 console.log('日曜日です'); 64 dObj.setDate(dObj.getDate() - 8); 65 console.log('1週間前は'+ dObj + 'です'); 66 }else if(str == 1){ 67 console.log(str); 68 console.log('月曜日です'); 69 dObj.setDate(dObj.getDate() - 7); 70 console.log('1週間前は'+ dObj + 'です'); 71 }else if(str == 2){ 72 console.log(str); 73 console.log('火曜日です'); 74 dObj.setDate(dObj.getDate() - 6); 75 console.log('1週間前は'+ dObj + 'です'); 76 }else if(str == 3){ 77 console.log(str); 78 console.log('水曜日です'); 79 dObj.setDate(dObj.getDate() - 5); 80 console.log('1週間前は'+ dObj + 'です'); 81 }else if(str == 4){ 82 console.log(str); 83 console.log('木曜日です'); 84 dObj.setDate(dObj.getDate() - 4); 85 console.log('1週間前は'+ dObj + 'です'); 86 }else if(str == 5){ 87 console.log(str); 88 console.log('金曜日です'); 89 dObj.setDate(dObj.getDate() - 3); 90 console.log('1週間前は'+ dObj + 'です'); 91 }else if(wDay == 6){ 92 console.log(str); 93 console.log('土曜日です'); 94 dObj.setDate(dObj.getDate() - 2); 95 console.log('1週間前は'+ dObj + 'です'); 96 } 97 }else if(wDay == 2){ 98 if (str == 0){ 99 console.log(str); 100 console.log('日曜日です'); 101 dObj.setDate(dObj.getDate() - 9); 102 console.log('1週間前は'+ dObj + 'です'); 103 }else if(str == 1){ 104 console.log(str); 105 console.log('月曜日です'); 106 dObj.setDate(dObj.getDate() - 8); 107 console.log('1週間前は'+ dObj + 'です'); 108 }else if(str == 2){ 109 console.log(str); 110 console.log('火曜日です'); 111 dObj.setDate(dObj.getDate() - 7); 112 console.log('1週間前は'+ dObj + 'です'); 113 }else if(str == 3){ 114 console.log(str); 115 console.log('水曜日です'); 116 dObj.setDate(dObj.getDate() - 6); 117 console.log('1週間前は'+ dObj + 'です'); 118 }else if(str == 4){ 119 console.log(str); 120 console.log('木曜日です'); 121 dObj.setDate(dObj.getDate() - 5); 122 console.log('1週間前は'+ dObj + 'です'); 123 }else if(str == 5){ 124 console.log(str); 125 console.log('金曜日です'); 126 dObj.setDate(dObj.getDate() - 4); 127 console.log('1週間前は'+ dObj + 'です'); 128 }else if(wDay == 6){ 129 console.log(str); 130 console.log('土曜日です'); 131 dObj.setDate(dObj.getDate() - 3); 132 console.log('1週間前は'+ dObj + 'です'); 133 } 134 }else if(wDay == 3){ 135 if (str == 0){ 136 console.log(str); 137 console.log('日曜日です'); 138 dObj.setDate(dObj.getDate() - 10); 139 console.log('1週間前は'+ dObj + 'です'); 140 }else if(str == 1){ 141 console.log(str); 142 console.log('月曜日です'); 143 dObj.setDate(dObj.getDate() - 9); 144 console.log('1週間前は'+ dObj + 'です'); 145 }else if(str == 2){ 146 console.log(str); 147 console.log('火曜日です'); 148 dObj.setDate(dObj.getDate() - 8); 149 console.log('1週間前は'+ dObj + 'です'); 150 }else if(str == 3){ 151 console.log(str); 152 console.log('水曜日です'); 153 dObj.setDate(dObj.getDate() - 7); 154 console.log('1週間前は'+ dObj + 'です'); 155 }else if(str == 4){ 156 console.log(str); 157 console.log('木曜日です'); 158 dObj.setDate(dObj.getDate() - 6); 159 console.log('1週間前は'+ dObj + 'です'); 160 }else if(str == 5){ 161 console.log(str); 162 console.log('金曜日です'); 163 dObj.setDate(dObj.getDate() - 5); 164 console.log('1週間前は'+ dObj + 'です'); 165 }else if(wDay == 6){ 166 console.log(str); 167 console.log('土曜日です'); 168 dObj.setDate(dObj.getDate() - 4); 169 console.log('1週間前は'+ dObj + 'です'); 170 } 171 } 172 173 }); 174});

補足情報(FW/ツールのバージョンなど)

js

追記

@kei344さんから

js

1console.log(str); 2 console.log( week[ str ] + 'です'); 3 dObj.setDate(dObj.getDate() - 7 - wDay + str); 4 dObj.setDate(dObj.getDate() + 1); 5 console.log('1週間前は'+ dObj + 'です');

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

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

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

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

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

guest

回答2

0

こんな感じかな(dayjs利用)

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.8.5/dayjs.min.js"></script> 6</head> 7<body> 8<select id="select"></select> 9<input type="button" value="go" id="btn_date"> 10</body> 11<script> 12//セレクトボックス 13var week = [ "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" ]; 14 15for(var i = 0; i < week.length; i++) { 16 let op = document.createElement("option"); 17 op.text = week[i]; 18 op.value = i; 19 document.getElementById("select").appendChild(op); 20} 21 22window.addEventListener('DOMContentLoaded', function() { 23 document.querySelector('#btn_date').addEventListener('click', function(e) { 24 var selectedIndex = document.querySelector('select').selectedIndex; 25 var day = dayjs(); 26 var sDay = dayjs().subtract(day.format('d') - selectedIndex, "day"); 27 var bday = sDay.subtract(1, "week"); 28 console.log(sDay); 29 console.log(bday); 30 31 console.log(week[sDay.format('d') - 0]); 32 }); 33}); 34</script> 35</html>

投稿2019/02/11 09:17

rururu3

総合スコア5545

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

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

rails_ruby

2019/02/11 09:40

ご教示いただけありがとうございます。 試させて頂いたところ、意図した動作になりました。dasjsのライブラリーについて知らなかったので勉強になりました。 お忙しい中、質問に回答して頂きありがとうございました。
guest

0

ベストアンサー

if(wDay == 0)以降を丸々下記に書き換えでできませんか?

js

1 console.log(str); 2 console.log( week[ str ] + 'です'); 3 dObj.setDate(dObj.getDate() - 7 - wDay + str ); 4 console.log('1週間前は'+ dObj + 'です');

投稿2019/02/11 09:07

kei344

総合スコア69364

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

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

rails_ruby

2019/02/11 09:38

なんども回答して頂きありがとうございます。 もしかしたら私のプログラムの原因かもしれませんが、ご教示して頂いたコードを試したところ、1日多く戻りすぎていたので僭越ながら一文だけ追記させて頂き、意図したプログラムになりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問