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

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

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

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

Q&A

解決済

8回答

13218閲覧

ifのネストが深いので改善するべきか

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

3クリップ

投稿2018/04/17 02:02

編集2018/04/17 04:48

前提・実現したいこと

勉強でコードを書いています。
if文のネストが深くなってきたので可読性が悪いのでは無いかと書き直しています。
独学の為コードの可読性が低かったり汚かったりするのではないかと心配です。

どのように改善するべきなのか現場で働いている方の感想やアドバイスを頂きたいと思い投稿致しました。

-追記-
mts10806さんからご指摘を受けて今動かしてみているコードをそのまま追加してみました。
指定日から表示するコードは配布されていたのですが、毎週表示するコードは配布されていませんでした。
作成のついでに配布用のコードを作って私みたいに検索した人の手助けになればと作成しているのですが、恥ずかしくないコードにしたいなと思い今回の投稿に至っております。

-追記2-
think49さんのからご指摘を受けて気付きました。
上側コード
$(elem).foreach(function(){
の部分を修正致しました。

このサイトの使用方法のアドバイスも承りました。
他にも利用方法で誤った使用方法があれば、今後の利用に役立てたいと思いますのでご指摘お願い致します。

-追記3-
think49さんからご指摘がありましたので追記致します。

上のコードは下のコードを質問用にシンプルにした(つもり)ものでしたがうまく伝わらないようなので下のコードを掲載致しました。
以降、上のコードは今後この質問を検索で訪れた方様に残しておくべきか悩んでおります。
残すべきかどうかのアドバイスも頂ければ幸いです。

該当のソースコード

js

1$(elem).each(function(){ 2 var aaa = "moji", bbb = "moji", 3 aa = true, bb = true, 4 a = 1, b = 1, c = 1, d = 1, e = 1; 5 if(aa || aaa.match("hoge")){ 6 if((a >= 0 && b >= 0) || (a <= 0 && b <= 0)){ 7 //処理1 8 }else if(a <= 0 && b >= 0){ 9 //処理2 10 if(bb && b <= c){ 11 if(bbb.match("fuga")){ 12 //処理3 13 if(e%2 == 0){ 14 //処理4 15 } 16 }else{ 17 //処理1 18 if(e%2 == 0){ 19 //処理2 20 } 21 } 22 } 23 } 24 }else{ 25 //処理1 26 } 27});

js

1/*------------------------------------設定------------------------------------*/ 2//クラス名 3var class_name = ".dtimer"; 4//点滅色(CSS形式)例:red / #008000 / rgb(0,0,255)/ 5var color = "red"; 6//カラーチェンジもしくは点滅開始時間(終了何秒前からカラーチェンジもしくは点滅するか) 7var flash_time = 600; 8//更新間隔(秒) 9var reload_time = 1; 10/*----------------------------------------------------------------------------*/ 11reload_time *= 1000; 12$(document).ready(function displayTimer(){ 13 $(class_name).each(function(){ 14 var sh = parseInt($(this).attr("sh")) || 0, 15 sm = parseInt($(this).attr("sm")) || 0, 16 eh = parseInt($(this).attr("eh")) || 24, 17 em = parseInt($(this).attr("em")) || 0, 18 flash = $(this).attr("flash"), 19 wval = $(this).attr("week"), 20 elem = $(this).prop("tagName"), 21 stime = (sh * 60 + sm) * 60, 22 etime = (eh * 60 + em) * 60, 23 now = new Date(), 24 ntime = parseInt((now.getHours() * 60 + now.getMinutes()) * 60 + (now.getSeconds())), 25 sjisa = stime - ntime, 26 ejisa = etime - ntime, 27 weekarry = ["日","月","火","水","木","金","土"], 28 weekno = now.getDay(), 29 week = weekarry[weekno]; 30 if(wval === undefined || wval.match(week)){ 31 if((sjisa >= 0 && ejisa >= 0) || (sjisa <= 0 && ejisa <= 0)){ 32 $(this).hide(); 33 }else if(sjisa <= 0 && ejisa >= 0){ 34 $(this).show(); 35 if(flash && ejisa <= flash_time){ 36 if(elem.match(/(p|a)/i)){ 37 $(this).css("color",""); 38 if(ejisa%2 == 0){ 39 $(this).css("color",color); 40 } 41 }else{ 42 $(this).hide(); 43 if(ejisa%2 == 0){ 44 $(this).show(); 45 } 46 } 47 } 48 } 49 }else{ 50 $(this).hide(); 51 } 52 }); 53 setTimeout(function(){displayTimer()}, reload_time);//再起呼び出し 54});

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

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

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

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

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

kei344

2018/04/17 02:20

「処理2」は2回行われていますが、そういう「処理」なのでしょうか。また、「処理」の順序は固定でしょうか。
m.ts10806

2018/04/17 02:28

そもそもどういう目的の処理なのかを書かれた方が良い意見をもらえそうに思います。
退会済みユーザー

退会済みユーザー

2018/04/17 03:29

kei344さん 処理1は処理2を取消し、処理2は処理1を取消す性質があります。
退会済みユーザー

退会済みユーザー

2018/04/17 03:31

mts10806さん HTMLエレメントを消したり色を変えたりと何が出来るのかを動かしながら学んでいます。
m.ts10806

2018/04/17 03:57 編集

回答につながるための情報なので、質問本文に追記してください。ここはあくまで「質問への追記・修正依頼」の場です。
think49

2018/04/17 04:23

jQueryにforeachはありませんが、$(elem).foreach は原文のままですか。
think49

2018/04/17 04:30

(Q1) 処理1, 処理2が重複していますが、重複分は同じ処理ですか。(Q2)「処理1は処理2を取消し、処理2は処理1を取消す性質」とありますが、取り消すぐらいなら何もしないのが正解では?
guest

回答8

0

ベストアンサー

ネストが深いと、テストもやりづらくバグの温床にもなりやすいです。

このような場合は早期リターンを使えばネストが下げられます。

例えば最初のif文の判定を反転させて、elseの処理を先に持って行きて処理1を実行後すぐに関数を抜けます。そうすると、elseが不要になるのでネストがひとつ減ります。

javascript

1$(elem).foreach(function(){ 2 var aaa = "moji", bbb = "moji", 3 aa = true, bb = true, 4 a = 1, b = 1, c = 1, d = 1, e = 1; 5 6 if(!(aa || aaa.match("hoge"))){ 7 //処理1 8 return; 9 } 10 11 if((a >= 0 && b >= 0) || (a <= 0 && b <= 0)){ 12 //処理1 13 }else if(a <= 0 && b >= 0){ 14 //処理2 15 if(bb && b <= c){ 16 if(bbb.match("fuga")){ 17 //処理3 18 if(e%2 == 0){ 19 //処理4 20 } 21 }else{ 22 //処理1 23 if(e%2 == 0){ 24 //処理2 25 } 26 } 27 } 28 } 29});

以下同様に整理を続けると下記のようになります。

javascript

1$(elem).foreach(function(){ 2 var aaa = "moji", bbb = "moji", 3 aa = true, bb = true, 4 a = 1, b = 1, c = 1, d = 1, e = 1; 5 6 if(!(aa || aaa.match("hoge"))){ 7 //処理1 8 return; 9 } 10 11 if (a >= 0 && b >= 0) { 12 //処理1 13 return; 14 } 15 16 if (a <= 0 && b <= 0){ 17 //処理1 18 return; 19 } 20 21 if(!(a <= 0 && b >= 0)){ 22 return; 23 } 24 25 //処理2 26 27 if (!(bb && b <= c)) return; 28 29 if(!(bbb.match("fuga"))){ 30 //処理1 31 if(!(e%2 == 0)) return; 32 //処理2 33 return; 34 } 35 36 //処理3 37 if(!(e%2 == 0)) return; 38 //処理4 39});

判定の反転には、否定を用いていますが、本来は適切に修正する必要があります

他にも判定式を関数にする方法だとか、処理の中で場合分けする方法も用いればかなりスッキリかけると思いますが、関数に意味がある名前をつける必要があり、今回のソースコードではそれができませんでした。

投稿2018/04/17 03:19

iwamoto_takaaki

総合スコア2883

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

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

退会済みユーザー

退会済みユーザー

2018/04/17 03:41

ご回答ありがとうございます。 このような書き方もあるのですね。 勉強になります!
iwamoto_takaaki

2018/04/17 03:48

”早期リターン”というテクニックです。ググッてみてください。 経験的には、これくらいのネストがあるとどこかしらバグを作っています。 あと、おそらく条件式もっと分解してわかりやすく整理できると思います。
k.tada

2018/04/17 04:18

私もこの案に1票です。 更に条件式の部分を分かりやすい名前のメソッドにしてしまうとベターです(これもリファクタリングの手法です。)
退会済みユーザー

退会済みユーザー

2018/04/17 04:29

早期リターンというのですね。 早速ググって記事を読み漁っています。 検索用語が増えると自力で答えにたどり着ける機会が増えるので助かります。
iwamoto_takaaki

2018/04/17 08:14

> k.tadaさん まさにですね。判定式をメソッドにして、enumを返して処理を分けるのが理想ですね。
guest

0

You should use 'guard' solution. That is the way to reach the world of freaking geeks!

Javascript

1/************************************************************* 2 * 3 * main process 4 * 5 *************************************************************/ 6$(elem).each(function() 7{ 8 const CASE = {'case1' : 1, 'case2' : 2, 'case_unmatch': 0}; 9 10 var aaa = "moji", bbb = "moji", 11 aa = true, bb = true, 12 a = 1, b = 1, c = 1, d = 1, e = 1; 13 14 try 15 { 16 // When aa isn't true AND aaa isn't much "hoge", throw 'Illegal Case' 17 if(!isRegular(aa, aaa)) { throw 'Illegal Case'; } 18 19 // get a CASE CODE depending on conditions 20 switch(getCase(CASE, a, b)) 21 { 22 // When (a >= 0 && b >= 0) or (a <= 0 && b <= 0) 23 case CASE.case1: 24 25 //処理1 26 break; 27 28 // When (a <= 0 && b >= 0) 29 case CASE.case2: 30 31 // When bb isn't true OR b > c, exit this scope at once. 32 if (!canProcess2(bb, b, c)){ break; } 33 34 // Information! 35 // subProcess1(): create A and sum up total with c and d, then alert "Hello!" 36 // subProcess2(): delete an element #input and submit all inputs to server. 37 (bbb.match("fuga"))? subProcess1(e) : subProcess2(e); 38 39 break; 40 41 // other case as Unexpected conditions. 42 default: 43 throw 'Unknown Case'; 44 } 45 } 46 catch(e) 47 { 48 // UnExpected processing. 49 50 // console.log("An error has occurred. " + e); 51 // return false; // to exit jQuery.each() loop. 52 } 53 54 return true; 55}); 56 57 58/************************************************************* 59 * 60 * functions 61 * 62 *************************************************************/ 63 64/* 65 * return true when the condition is satisfied. 66 */ 67function isRegular(aa, aaa) 68{ 69 if(aa) { return true; } 70 if(aaa.match("hoge")) { return true; } 71 72 return false; 73} 74 75/* 76 * return CASE CODE depending on conditions. 77 */ 78function getCase(CASE, a, b) 79{ 80 if(a >= 0 && b >= 0) { return CASE.case1; } 81 if(a <= 0 && b <= 0) { return CASE.case1; } 82 83 if(a <= 0 && b >= 0) { return CASE.case2; } 84 85 return CASE.case_unmatch; 86} 87 88/* 89 * When bb is true AND b <= c, return true. otherwise return false 90 */ 91function canProcess2(bb, b, c) 92{ 93 if(bb && b <= c) { return true; } 94 95 return false; 96} 97 98/* 99 * create A and sum up total with c and d, then alert "Hello!" 100 */ 101function subProcess1(e) 102{ 103 //処理3 104 105 if (e % 2 != 0) { return; } 106 107 //処理4 108} 109 110/* 111 * delete an element #input and submit all inputs to server. 112 */ 113function subProcess2(e) 114{ 115 //処理1 ← Duplicated? 116 117 if (e % 2 != 0) { return; } 118 119 //処理2 120}

投稿2018/04/17 03:54

編集2018/04/17 12:11
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

iwamoto_takaaki

2018/04/17 04:06

お見事! しかし、質問者には理解できないかも・・・
退会済みユーザー

退会済みユーザー

2018/04/17 06:01 編集

Nausicaa said "I found out that no one spits some shit from their mouth in where code and environment are keeping clean. The pollution lies in the code itself.."
退会済みユーザー

退会済みユーザー

2018/04/17 04:24

Thank you for answering! 英語が得意でないのでGoogle翻訳でニュアンスでかみ砕いています。 最近trycatchの勉強を始めてコードで使用し始めたのでまだ理解出来ていませんが、1行ずつ解読して自分の力にしていきたいと思います。
退会済みユーザー

退会済みユーザー

2018/04/17 06:28

英語苦手なんで CASE.case の命名に時間かかっちゃうんですよねぇ。。。
退会済みユーザー

退会済みユーザー

2018/04/17 06:32

Don't worry. JavaScript can use an multiple bytes charactor. You could wrote "CASE.りんごをかじったら歯茎から血が出た場合: ". Take it easy.
退会済みユーザー

退会済みユーザー

2018/04/17 06:36

声を上げて笑ってしまいました! 変数名に日本語って使えるんですね。 Google翻訳で日本語を英語に変換して変数名にしてました。 日本人が作った日本語の記事のコードでも日本語の変数名を目にした事が無いのは英語で付けるのが暗黙のルールかなにかなのでしょうか??
退会済みユーザー

退会済みユーザー

2018/04/17 07:16 編集

If you use only alphanumeric charactors to write computer programming codes and use multiple bytes charactors to write any comments, You could recognize what is written in there at once. If these are alphanumerics, It is a code. If these are Japanese, It is a comment.
退会済みユーザー

退会済みユーザー

2018/04/17 06:53

英語だとコードとしてすぐ認識出来るけど、日本語だとバイト数が多い分処理に時間がかかるというニュアンスで受け取ったのですがどうでしょうか??
退会済みユーザー

退会済みユーザー

2018/04/17 07:06 編集

And, fucking SIer usually uses continual numbers solution! like below. CASE.X01B003: CASE.B213G335: CASE.QJ22S35C: fuuuuuuuuuuuuuuuucking SIer shall all die quickly, yeah.
退会済みユーザー

退会済みユーザー

2018/04/17 07:13 編集

>HaRu_8609 no, no. processing times has no difference between those. I had talked about WYSIWYG. If you see Alphanumerics, It is a code. If you see Japanese, It is a comment. You could understand it at once.
退会済みユーザー

退会済みユーザー

2018/04/17 07:08

「人間が記事を読む時、日本語があるとコードと直ぐに理解出来ないけど、英語だけならコードと直ぐに認識しやすいからみんな英語で書いている」という感じのニュアンスで受け取ったのですがどうでしょう??
退会済みユーザー

退会済みユーザー

2018/04/17 07:10

You’re almost right.
退会済みユーザー

退会済みユーザー

2018/04/17 07:11

And, SIer shall all die.
退会済みユーザー

退会済みユーザー

2018/04/17 07:20

SIerと呼ばれる人たちの作るコードは私には魔法の呪文のように見えるのだろうなとおもいます。 同じレベルになりたいと思いますが、まずはtrycatchの使い方を完璧に覚える事から:_( 先は長そうですが、私の寿命よりはやく到達出来る事を目標にします!
退会済みユーザー

退会済みユーザー

2018/04/17 07:26

>SIerと呼ばれる人たちの作るコードは私には魔法の呪文のように見えるのだろうなとおもいます。同じレベルになりたいと思いますが You shall quit it!
退会済みユーザー

退会済みユーザー

2018/04/17 07:27 編集

They "are" all insane.
退会済みユーザー

退会済みユーザー

2018/04/17 07:41

F1ドライバーの様に頭のネジが何本か取れてないと到達出来ないような領域なのですね。 狂うギリギリの領域のプロフェッショナルを目標地点に修正して頑張ります: ) そろそろみなさんから頂いたコードの理解に集中します。 今日は本当にありがとうございました。 私が質問する方になると思いますが、また機会があればよろしくお願いします。
guest

0

コードを読み, 大体こんなことがしたいのかなと忖度して試しに組んでみました.
あまり動作検証はしていないのと, jQueryを使っていないので参考程度に.

  • ループ処理は別途名前付きの関数として呼ぶようにし, 処理の内容を明確化する.
  • 複雑な条件判定処理を要する場合は, 適宜フラグ値やステータス値を求めた後で具体的な処理を行うようにする.
  • JavaScriptだけで全てを賄おうとするのではなく, DOMやCSSがもっている仕組みをフル活用する.

HTML

1<div class="dtimer" data-sh="14" data-sm="0" data-eh="16" data-em="0">あいうえお</div> 2<div class="dtimer" data-sh="12" data-sm="0" data-eh="14" data-em="35">あいうえお</div> 3<div class="dtimer" data-sh="14" data-sm="0" data-eh="16" data-em="0" data-days="木">あいうえお</div> 4<div class="dtimer" data-sh="12" data-sm="0" data-eh="14" data-em="35" data-days="木">あいうえお</div>

CSS

1.flash{ 2 color: red; 3 animation: flash 1s steps(1) infinite; 4} 5@keyframes flash{ 6 0%{visibility: visible;} 7 50%{visibility: hidden;} 8}

JavaScript

1"use strict"; 2document.addEventListener("DOMContentLoaded", e => { 3 //点灯・点滅対象のノード 4 const clsNm = "dtimer"; 5 const elems = document.getElementsByClassName(clsNm); 6 7 //点滅を開始する秒数 8 const flash = 600; 9 //時分秒を求める 10 const getSeconds = (h, m, s = 0) => (h * 60 + m) * 60 + s; 11 //ノード単体に対する点灯・点滅設定を行う 12 function display(elem, ntime, nday){ 13 //ノードに設定されている時刻を取得する 14 const dl = elem.dataset; 15 const stime = getSeconds(dl.sh|0, dl.sm|0);//点灯開始時刻 16 const etime = getSeconds(dl.eh|0, dl.em|0);//点灯終了時刻 17 const days = elem.dataset["days"];//点灯対象曜日 18 19 //点灯・点滅のフラグ値 20 let needToShow = false; 21 let needToFlash = false; 22 if((!days || days.indexOf(nday) >= 0) && (stime <= ntime && ntime <= etime)){ 23 needToShow = true; 24 needToFlash = etime - ntime < flash; 25 } 26 27 //フラグ値によって設定するスタイルを変更する 28 elem.style.visibility = needToShow ? "visible": "hidden"; 29 elem.classList[needToFlash ? "add": "remove"]("flash"); 30 } 31 32 //ノードリストに対する点灯・点滅設定を行う 33 (function displayAll(){ 34 const today = new Date(); 35 const ntime = getSeconds(today.getHours(), today.getMinutes(), today.getSeconds()); 36 const nday = "日月火水木金土".substr(today.getDay(), 1); 37 [].forEach.call(elems, elem => display(elem, ntime, nday)); 38 setTimeout(displayAll, 1000); 39 })(); 40});

投稿2018/04/17 05:52

defghi1977

総合スコア4756

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

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

退会済みユーザー

退会済みユーザー

2018/04/17 06:45

色々な属性で動かしてみました。 同じ動きをするコードでもこんなにも違う書き方があるのに驚いています。 まだ"use strict"とconst、letが何なのかを調べて今からコードの中身を見ていくところですが、まずはお礼まで。
退会済みユーザー

退会済みユーザー

2018/04/19 03:32 編集

1.頂いたコードを元にdata属性を勉強中なのですが、私が作っていたHTMLは下記の様な「data-」無しの状態で記述しているのに元コードで動いていました。 <div class="dtimer" sh="14" sm="0" eh="16" em="0">あいうえお</div> 予想ではjQueryの.attrでカスタム属性を作ったことになっていた?ものだと思うのですが、data属性(「data-」を付けた状態)でカスタム属性は扱った方が良いのでしょうか? 2.「"use strict";」は先頭に付けると他のファイルも厳格モードで動くという記事を見かけたのですが、ホームページにアップする際は「addEventListener」内先頭に移動する事でそのファイル内のみに厳格モードを適用出来るという認識で合っていますでしょうか?
退会済みユーザー

退会済みユーザー

2018/04/19 04:12

ご回答ありがとうございます。 1.「カスタム属性」や「独自 属性」で検索をかけた際に「data-」を付けるという記事ばかりでしたので、私のコードはたまたたま動いていたコードでは無いかと心配です。私が使っていた属性はなんという名称なのでしょうか?もし名称をご存じであればご教授頂ければ幸いです。 2.頂いたURL先を熟読してみます。誘導感謝致します。
defghi1977

2018/04/19 04:33

一般のDOM(XML,HTML等に共通の)APIを用いた(名前空間なしの)属性値アクセスですから, 何ら恥ずべきところはありません. https://developer.mozilla.org/ja/docs/Web/API/Element/getAttribute ただし, 独自に属性を定義した場合, HTMLで定義されている名称と被る危険性があるため, dataから始まるカスタム属性を使ったほうが良いとされています.
退会済みユーザー

退会済みユーザー

2018/04/19 04:41

回答ありがとうございます。 かれこれ5時間ほど自分が書いていたコードが何故動いていたのか調べてふわふわとしか理解出来ていなかったので安心致しました。 今回誘導して頂いたリンク先、先程のリンク先共に熟読して理解を深めたいと思います。 とても親切丁寧にご教授頂いて本当にありがとうございます。
guest

0

私はjavascriptではなくperlでややこしい条件判定が必要なプログラムを書くことがありますが、そういう時は、処理をそれぞれ関数化して、対象データとの対応表をあらかじめ作っておき、それを参照させることによって条件判定をひとつにまとめてしまうということをよくやります。

万能ではないですがコードがすごくすっきりすることは確かです。参考までに…。

aの値bの値cの値呼び出す関数
000funcA()
001funcC()
010funcB()
011funcA()
...

投稿2018/04/17 04:57

KojiDoi

総合スコア13669

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

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

退会済みユーザー

退会済みユーザー

2018/04/17 05:08

ご回答ありがとうございます。 複雑なプログラムを作る時には対応表を書いてそれを見ながら追ってもらう事で綺麗にする事もあるのですね。 スッキリしたコードになるよう心掛けてはいるのですが、勉強を進めていくとどんどん複雑になって「現場ではこの何十倍も長いコードとかあるだろうし読むの大変そう」と思っていましたが対応表があると読み砕くのにかなり役に立ちそうです。
guest

0

「リファクタリング 手法」でキーワード検索されることをお勧め致します。

本題から少し離れますが、手順のアドバイスを。

  1. バージョン管理ツール(git)の導入

コードを変更するため、gitを使って管理することをオススメします。

  1. テストロジックの作成

動いているコードを変更する時は、コード変更前と変更後で動作が変わらないように保証するためにテストロジックやassertがなければ、作成してくださいな。

  1. 上記2点がクリアされた後にコードを変更する方が、変更規模によりますが、手戻りが少なくなります。

◇参考情報
リファクタリング » 不吉な匂い

投稿2018/04/17 03:34

編集2018/04/17 03:36
umyu

総合スコア5846

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

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

退会済みユーザー

退会済みユーザー

2018/04/17 04:19

コードを整理する事をリファクタリングというのですね。 勉強になります。 gitむずかしそうですが、慣れれば便利そうなので導入を試みたいと思います。 2に関しては理解するのに時間がかかりそうでしたのでまずはお礼まで。
umyu

2018/04/17 06:30

>HaRu_8609さんへ。 gitはWindowsならGithubとGitHub Desktopがおすすめです。
guest

0

ご提示のソースくらいのネストはざらにあるなぁ、くらいの感想です。
それでもきれいにしたい場合は、ifの処理、elseの処理、でそれぞれ関数化して見通しを良くする、というのもよくやります。

投稿2018/04/17 02:05

kazto

総合スコア7196

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

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

退会済みユーザー

退会済みユーザー

2018/04/17 03:26

ご回答ありがとうございます。 どのくらいネストしたら見直した方が良いでしょうか?おおよその目安でかまいませんのでご教授頂ければ助かります。
KojiDoi

2018/04/17 04:47

>どのくらいネストしたら 「なんか見にくいなあ」と思ったら見直せばいいんじゃないでしょうか。「どのくらい」は結局のところ主観だと思います。現にkaztoさんとiwamoto_takaakiさんでは感覚の違いが見えてますよね。
退会済みユーザー

退会済みユーザー

2018/04/17 05:10

ご回答ありがとうございます。 あとは現場に入ってから周りをみて合わせていく感じで良さそうですね。 気が楽になりました。
guest

0

js

1document.addEventListener("DOMContentLoaded", function(){ 2 //ノード単体に対する表示・非表示の設定を行う 3 function display(elem, ntime, nweek){ 4 //ノードに設定されている曜日・時刻を取得する 5 const data = elem.dataset; 6 const week = data.week; 7 const stime = ((data.sh|0) * 60 + (data.sm|0)) * 60; 8 const etime = ((data.eh||24) * 60 + (data.em|0)) *60; 9 //表示時間判定 10 nweek = new RegExp(nweek); 11 if((!week || (nweek).test(week)) && (stime <= ntime && ntime <= etime)){ 12 //表示 13 elem.style.display = "block"; 14 }else{ 15 //非表示 16 elem.style.display = "none"; 17 } 18 } 19 const elems = document.getElementsByClassName("dtimer"); 20 //指定したノードリストを設定用関数(display)に送る 21 (function displayAll(){ 22 const today = new Date(); 23 const ntime = (today.getHours() * 60 + today.getMinutes()) * 60 + today.getSeconds(); 24 const nweek = "日月火水木金土".substr(today.getDay(), 1); 25 NodeList.prototype.forEach.call(elems, function(elem){ 26 return display(elem, ntime, nweek); 27 }); 28 setTimeout(displayAll, 1000); 29 }()); 30}); 31

皆様のおかげで無事配布用スニペット、記事用コード、紹介記事を完成させる事が出来ました。
添付したコードは記事で使用したコードになります。
また、ホームページ内の既存のjsコードも見直し現在ネストが4層以上ある箇所(取り合えずの自分ルールですが)を早期リターンや関数化して手直しをしながら再実装に向けてテスト中です。
luckerさんからご提案頂いたコードは、現在立案中のFXのチャート分析ページでかなり複雑に条件分岐すると予想出来る事から、KojiDoiさんの案と兼用して作成に取り組もうと考えています。

いるか分かりませんが、念の為どんな記事になったのかご興味を抱いて頂いた方用に記事へのURLを添付します。
作成した記事

検索しても自力で解決出来なかった際はまた質問をする事もあるかと思いますが、その際はお時間あればまたよろしくお願い致します。
本当にありがとうございました!

投稿2018/04/24 03:29

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

誤りかと思いますが

JavaScript

1if((a >= 0 && b >= 0) || (a <= 0 && b <= 0)){ 2 //処理1 3}else if(a <= 0 && b >= 0){ 4 //処理2 5

正しくは

JavaScript

1if((a >= 0 && b >= 0) || (a < 0 && b < 0)){ 2 //処理1 3}else if(a < 0 && b > 0){ 4 //処理2

ではないでしょうか。

投稿2018/04/17 02:27

kawakawa2018

総合スコア1195

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

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

退会済みユーザー

退会済みユーザー

2018/04/17 03:24

その通りです。同じ比較をしていたのに気づきませんでした。 ご指摘ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問