TypeScriptとCoffeeScriptでのカレンダープログラミングの開発話

Myoga-SB-SDF-A2

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 += "&nbsp;" + ( curDay < 1 ? "&nbsp;&nbsp;" :
		// curDayが正の時です。1桁なら半角スペースを1つ出力します。そして日付を出力します。
		( curDay < 10 ? "&nbsp;" : "" ) + curDay.toString() +
			// 土曜日を出力したら、改行タグを入れます。
			( ( ( prePad + curDay ) % 7 == 0 ) ? "<br/>" : "" ) );
	}
};

※このプログラムは https://gist.github.com/Myoga1012/fa9712f81a00b03fd910でも公開されています。

TypeScriptはJavaScriptをベースにしたスクリプト言語なので、JavaScriptで使用しているクラスなどをそのまま使用することができます。

まず、現在の日付のオブジェクトを取得し、そこから1日の曜日と月末日を求めます。Date関数のmonthパラメーターに翌月の値を、dateパラメーターに0を入れることで月末日を表すDateオブジェクトを取得することができます。

カレンダーの出力においては、「F#でカレンダープログラミングをやってみました(その1)」の「Calendar2.fs(GitHub内: Calendar.fs)」のように、curDayを( – 1日の曜日 + 1 )から月末日まで変化するようにし、以下の手順でHTMLコードを構成します。

  1. まず、半角スペース「&nbsp;」1つを出力します。
  2. curDayが負または0の時、半角スペースを追加で2つ出力します。
  3. curDayが1~9の時、半角スペースを追加で1つ出力し、日付を出力します(日付を右寄せします)。
  4. curDayが10以上の時、日付を出力します。
  5. curDayが正の値かつ、curDayとprePadの和に対する7の余剰が0の時(土曜日の時)、改行タグ「<br/>」を出力します。

出力される日付の文字列はこんな感じです。

条件 出力される文字列
curDay < 1 “&nbsp;&nbsp;&nbsp;”
1 ≦ curDay ≦ 9 “&nbsp;&nbsp;” + curDay.toString()
curDay ≧ 10 “&nbsp;” + curDay.toString()
curDay > 0 かつ、
( curDay + prePad ) mod 7 = 0
“&nbsp;&nbsp;” + curDay.toString() + “<br/>”
または、
“&nbsp” + 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ゴシック」などの等幅フォントを指定します(プロポーショナルフォントではレイアウトが崩れてしまいます)。

calts

実行結果

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 += "&nbsp;" + if curDay < 1 then "&nbsp;&nbsp;"
        # curDayが正の時です。1桁なら半角スペースを1つ出力します。そして日付を出力します。
        else ( if curDay < 10 then "&nbsp;" else "" ) + curDay.toString() +
            # 土曜日を出力したら、改行タグを入れます。
            if ( prePad + curDay ) % 7 is 0 then "<br/>" else ""

※このプログラムは https://gist.github.com/Myoga1012/38cacec36f4233137738 でも公開されています。

動作の仕方は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 += "&nbsp;" + (curDay < 1 ? "&nbsp;&nbsp;" : (curDay < 10 ? "&nbsp;" : "") + 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 += "&nbsp;" + (curDay < 1 ? "&nbsp;&nbsp;" : (curDay < 10 ? "&nbsp;" : "") + curDay.toString() + ((prePad + curDay) % 7 === 0 ? "<br/>" : "")));
    }
    return _results;
  };

}).call(this);

パッと見た感じでは、TypeScriptから変換したコードの方が見やすいかな。というより、CoffeeScriptのfor文はコレクションを列挙する(C#でいうforeach文)仕様だから、生成されるコードがちょっと冗長になってしまうのかもしれません。

4. おわりに

先週、カレンダープログラミングプチコンテストの参加賞の「プロ生ちゃん & クエリちゃんのカレンダー」が届きましたっ!

わたしのF#コードは12月のクエリちゃん側に載っています。

ではでは、See youですよっ♪

5. おまけ

Coffeeつながりで、ニアがコラ画像を作ったようです。

Tully's

カレンダーを出力するCoffeeScriptのコードがプリントされたTully’sカード風のイラスト

この記事をシェアする
Chronoir.netのRSSフィードを購読する

ミョウガ(Myoga)

Hello~! 「ミョウガ」です。よろしくお願いします!(≧▽≦)/ 主にC#/XAML/C++などをメインにプログラミングやアプリの開発をしています。好きな物はカフェラテとハーブティ、趣味は写真撮影と艦これです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください