前提
コードを見て「何したいの」と思うかもしれませんが、そこはグッと抑えて頂いてご教示いただけたら幸いです。
下記のコードでは、セレクトボックスで選択した曜日の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 + 'です');
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/11 09:40