Hello~! ミョウガです!
今回は、TypeScript及びCoffeeScriptでカレンダーを出力するプログラムを作成した時の開発話です。
1. TypeScriptでカレンダーを出力してみよう
まず、TypeScriptでカレンダーを出力するプログラムを作成していきます。
window.onload = () => { // 現在日を取得し、当月1日の曜日と末日を求めます。 var now: Date = new Date(); var prePad: number = new Date( now.getFullYear(), now.getMonth(), 1 ).getDay(); var lastDay: number = new Date( now.getFullYear(), now.getMonth() + 1, 0 ).getDate(); // カレンダーを出力します。 var el = document.getElementById( 'content' ); for ( var curDay: number = -prePad + 1; curDay <= lastDay; curDay++ ) { // 半角スペース1つ出力します。curDayが負の時はさらに2つ出力します。 el.innerHTML += " " + ( curDay < 1 ? " " : // curDayが正の時です。1桁なら半角スペースを1つ出力します。そして日付を出力します。 ( curDay < 10 ? " " : "" ) + curDay.toString() + // 土曜日を出力したら、改行タグを入れます。 ( ( ( prePad + curDay ) % 7 == 0 ) ? "<br/>" : "" ) ); } };
※このプログラムは https://gist.github.com/Nia-TN1012/54e11f35079a028d0321ad084030fb3a でも公開されています(※GitHubアカウントの統合のため、ニア側のGistに移動しました)。
TypeScriptはJavaScriptをベースにしたスクリプト言語なので、JavaScriptで使用しているクラスなどをそのまま使用することができます。
まず、現在の日付のオブジェクトを取得し、そこから1日の曜日と月末日を求めます。Date関数のmonthパラメーターに翌月の値を、dateパラメーターに0を入れることで月末日を表すDateオブジェクトを取得することができます。
カレンダーの出力においては、「F#でカレンダープログラミングをやってみました(その1)」の「Calendar2.fs(GitHub内: Calendar.fs)」のように、curDayを( – 1日の曜日 + 1 )から月末日まで変化するようにし、以下の手順でHTMLコードを構成します。
- まず、半角スペース「 」1つを出力します。
- curDayが負または0の時、半角スペースを追加で2つ出力します。
- curDayが1~9の時、半角スペースを追加で1つ出力し、日付を出力します(日付を右寄せします)。
- curDayが10以上の時、日付を出力します。
- curDayが正の値かつ、curDayとprePadの和に対する7の余剰が0の時(土曜日の時)、改行タグ「<br/>」を出力します。
出力される日付の文字列はこんな感じです。
条件 | 出力される文字列 |
---|---|
curDay < 1 | “ ” |
1 ≦ curDay ≦ 9 | “ ” + curDay.toString() |
curDay ≧ 10 | “ ” + curDay.toString() |
curDay > 0 かつ、 ( curDay + prePad ) mod 7 = 0 | “ ” + curDay.toString() + “<br/>” または、 “ ” + curDay.toString() + “<br/>” |
あとは、HTMLを以下のようにコーディングすることで、カレンダーの完成です。
<!DOCTYPE html> <html lang="jpr"> <head> <meta charset="utf-8" /> <title>Calendar</title> <script src="Calendar.js"></script> </head> <body style="font-family: 'Segoe UI', sans-serif;"> <h1>Calendar</h1> <div id="content" style="font-family:'MS Gothic'"></div> </body> </html>
TypeScriptのコードはJavaScriptに変換し、HTMLなどから読み込みます。スクリプトタグに生成するJavaScriptのファイルを指定します。
あと、日付を表示する要素のフォントは「MSゴシック」などの等幅フォントを指定します(プロポーショナルフォントではレイアウトが崩れてしまいます)。
2. CoffeeScriptでカレンダーを出力してみよう
次に、CoffeeScriptでカレンダーを出力するプログラムを作成していきます。
window.onload = () -> # 現在日を取得し、当月1日の曜日と末日を求めます。 now = new Date() prePad = new Date( now.getFullYear(), now.getMonth(), 1 ).getDay() lastDay = new Date( now.getFullYear(), now.getMonth() + 1, 0 ).getDate() # カレンダーを出力します。 el = document.getElementById( 'content' ) for curDay in [( -prePad + 1 )..lastDay] # 半角スペース1つ出力します。curDayが負の時はさらに2つ出力します。 el.innerHTML += " " + if curDay < 1 then " " # curDayが正の時です。1桁なら半角スペースを1つ出力します。そして日付を出力します。 else ( if curDay < 10 then " " else "" ) + curDay.toString() + # 土曜日を出力したら、改行タグを入れます。 if ( prePad + curDay ) % 7 is 0 then "<br/>" else ""
※このプログラムは https://gist.github.com/Nia-TN1012/f6a829c7ba9737d9ab689f2f660705fd でも公開されています(※GitHubアカウントの統合のため、ニア側のGistに移動しました)。
動作の仕方はTypeScriptと同じです。但し、波括弧で構造を表現していたTypeScriptに対し、CoffeeScriptではPythonやF#ののようにインデントでプログラムの構造を表現します。
3. 生成されるJavaScriptコードを見比べてみよう
TypeScript、CoffeeScriptともにJavaScriptに変換されます。そのコードを見てみましょう。
こちらはVisual Studioにて、TypeScriptから変換されたJavaScriptのコードです。
window.onload = function () { // 現在日を取得し、当月1日の曜日と末日を求めます。 var now = new Date(); var prePad = new Date(now.getFullYear(), now.getMonth(), 1).getDay(); var lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate(); // カレンダーを出力します。 var el = document.getElementById('content'); for (var curDay = -prePad + 1; curDay <= lastDay; curDay++) { // 半角スペース1つ出力します。curDayが負の時はさらに2つ出力します。 el.innerHTML += " " + (curDay < 1 ? " " : (curDay < 10 ? " " : "") + curDay.toString() + (((prePad + curDay) % 7 == 0) ? "<br/>" : "")); } };
こちらはVisual Studioにて、CoffeeScriptから変換されたJavaScriptのコードです。
(function() { window.onload = function() { var curDay, el, lastDay, now, prePad, _i, _ref, _results; now = new Date(); prePad = new Date(now.getFullYear(), now.getMonth(), 1).getDay(); lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate(); el = document.getElementById('content'); _results = []; for (curDay = _i = _ref = -prePad + 1; _ref <= lastDay ? _i <= lastDay : _i >= lastDay; curDay = _ref <= lastDay ? ++_i : --_i) { _results.push(el.innerHTML += " " + (curDay < 1 ? " " : (curDay < 10 ? " " : "") + curDay.toString() + ((prePad + curDay) % 7 === 0 ? "<br/>" : ""))); } return _results; }; }).call(this);
パッと見た感じでは、TypeScriptから変換したコードの方が見やすいかな。というより、CoffeeScriptのfor文はコレクションを列挙する(C#でいうforeach文)仕様だから、生成されるコードがちょっと冗長になってしまうのかもしれません。
4. おわりに
先週、カレンダープログラミングプチコンテストの参加賞の「プロ生ちゃん & クエリちゃんのカレンダー」が届きました。
わたしのF#コードは12月のクエリちゃん側に載っています。
[END]
コメント