スクリプトをシンプルに書くためにはどーしたらいいんですか?(基礎編)
フロントエンドの、のりこです。
実はこの質問
スクリプトをシンプルに書くためには
どーしたらいいんですか?
そこそこ頻繁にうけたりします。
そこで今回は、スクリプトをシンプルに書くための
基礎を伝授!
今日のサンプルソース『今日は何曜日?』
var today = new Date() ; if(today.getDay() == 0){ alert("今日は日曜日です"); }else if(today.getDay() == 1){ alert("今日は月曜日です"); }else if(today.getDay() == 2){ alert("今日は火曜日です"); }else if(today.getDay() == 3){ alert("今日は水曜日です"); }else if(today.getDay() == 4){ alert("今日は木曜日です"); }else if(today.getDay() == 5){ alert("今日は金曜日です"); }else if(today.getDay() == 6){ alert("今日は土曜日です"); }else{ alert("今日は何曜なの?!"); }
せっかく、今日の情報[new Date()]は変数todayに入れているのになんとも勿体無いjavascriptになっています。
何回も同じこと書いてない???
ifだってalertだって何回も書かれているんですが、ここはまず
どれなら変数に放り込めるか
を考えましょう。シンプルソースへの道、第一段階です。
難しくないソースなので一目瞭然なのですが
today.getDay()
ここは変数にできそうです。
別の情報を得るために今日の日付オブジェクトtodayは後から参照する可能性も考えて
var weekday = today.getDay();
とでもしておきましょう。
ただ、ココは下準備なので、まだソースの行数は減ってないです。
var today = new Date() ; var weekday = today.getDay(); if(weekday == 0){ alert("今日は日曜日です"); }else if(weekday == 1){ alert("今日は月曜日です"); } ・・・以下略
兎に角、選択肢が多いときはせめてcase文にしよう
なんとなくcase文と呼んでいますが、本来switch文と言う方が正しいのかもしれません。
行数はむしろ増えますが、ぱっと見の見やすさにおいてはcase文に軍配が上がるでしょう。
weekdayの値が0から6まで、順に当てはめています。念のため、どれにも当たらなかったときのdefaultの処理もしておきましょう。
var today = new Date() ; var weekday = today.getDay(); switch (weekday){ case 0: alert("今日は日曜日です"); break; case 1: alert("今日は月曜日です"); break; case 2: alert("今日は火曜日です"); break; case 3: alert("今日は水曜日です"); break; case 4: alert("今日は木曜日です"); break; case 5: alert("今日は金曜日です"); break; case 6: alert("今日は土曜日です"); break; default: alert("今日は何曜なの?!"); break; }
数字が1ずつ増える(減る)ものはループがお得!
weekdayの値が0から1ずつ増えていく、というスクリプトなのでココはお得に
ループを使っちゃいましょう!!(今回はforループです)
日曜と月曜の判定を良く見て、どこが一緒でどこが違うか見極めます。
命令の文体が似ているif文のほうで見てみましょう。
次にfor文の書式です。
for(i=0; i<=6; i++){ //iが0から始まり、i<=6 の式が成り立つ間繰り返す //i++ はインクリメントといい1ずつ足すこと //i-- だとデクリメントといい1ずつ引くこと }
でも、月・火・水・・・・という『曜日』をどうやって引っ張ってきたらいいのでしょうか。
配列、つかいましょ
このように、参照したい文字列を数字と絡めたいときは
配列(array)
を使用します。
var weekArr=["月","火","水","木","金","土"]; alert(weekArr[0]); //「月」の文字がアラートされます。
このように、配列の中の0個目、1個目、2個目・・・というように数値を使ってデータにアクセスできるようになりました。
これを踏まえて、for文を書いてみましょう。
var today=new Date() ; var weekday=today.getDay(); var weekArr =["月","火","水","木","金","土"]; for(i=0; i<=6; i++){ if(today.getDay()==i){ alert("今日は"+weekArr[i]+"曜日です"); } }
ソース10行減りました!!!!
今回はスクリプト初心者向けに シンプルスクリプトに挑戦!基礎編 をお届けいたしました~~♪
わたしの担当記事は、年内最後となりました。
一年間、お読みいただきありがとうございました。
引き続き2015年も、お付き合いください。フロントエンドとして、Tipsなどで微力ながらみなさんのお力になれるような記事を、また書いていく予定です。
それではみなさん、良いお年を!