トップ > 制作・開発 > スクリプトをシンプルに書くためにはどーしたらいいんですか?(基礎編)
制作・開発

スクリプトをシンプルに書くためにはどーしたらいいんですか?(基礎編)

スクリプトをシンプルに書くためにはどーしたらいいんですか?(基礎編)

フロントエンドの、のりこです。

実はこの質問

スクリプトをシンプルに書くためには
どーしたらいいんですか?

そこそこ頻繁にうけたりします。

そこで今回は、スクリプトをシンプルに書くための
基礎を伝授!

今日のサンプルソース『今日は何曜日?』

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文のほうで見てみましょう。
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&lt;=6; i++){
if(today.getDay()==i){
alert("今日は"+weekArr[i]+"曜日です");
}
}

ソース10行減りました!!!!
今回はスクリプト初心者向けに シンプルスクリプトに挑戦!基礎編 をお届けいたしました~~♪

わたしの担当記事は、年内最後となりました。
一年間、お読みいただきありがとうございました。
引き続き2015年も、お付き合いください。フロントエンドとして、Tipsなどで微力ながらみなさんのお力になれるような記事を、また書いていく予定です。

それではみなさん、良いお年を!



ども
etekichi
etekichi's tail
etekichi's banana

いんふぉま~しゃる