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

By | Date : 2015/02/19 ( Last Update : 2016/05/24 ) | 238 views

Myoga-SB-SDF-A2

Hello~! ミョウガです!

今回はTypeScript及びCoffeeScriptでカレンダーを出力するプログラムを作成した時の開発話です。

1. TypeScriptでカレンダーを出力してみよう

まず、TypeScriptでカレンダーを出力するプログラムを作成していきます。

※このプログラムは 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. まず、半角スペース「 」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を以下のようにコーディングすることで、カレンダーの完成ですっ!

TypeScriptのコードはJavaScriptに変換し、HTMLなどから読み込みます。スクリプトタグに生成するJavaScriptのファイルを指定します。

あと、日付を表示する要素のフォントは「MSゴシック」などの等幅フォントを指定します(プロポーショナルフォントではレイアウトが崩れてしまいます)。

calts

実行結果

 

2. CoffeeScriptでカレンダーを出力してみよう

次に、CoffeeScriptでカレンダーを出力するプログラムを作成していきます。

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

 

動作の仕方はTypeScriptと同じです。但し、波括弧で構造を表現していたTypeScriptに対し、CoffeeScriptではPythonやF#ののようにインデントでプログラムの構造を表現します。

 

3. 生成されるJavaScriptコードを見比べてみよう

TypeScript、CoffeeScriptともにJavaScriptに変換されます。そのコードを見てみましょう。

こちらはVisual Studioにて、TypeScriptから変換されたJavaScriptのコードです。

こちらはVisual Studioにて、CoffeeScriptから変換されたJavaScriptのコードです。

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

 

4. おわりに

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

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

 

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

 

5. おまけ

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

Tully's

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

 

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

About : ミョウガ(Myoga)

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

コメントを残す

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

*