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]
コメント