Visual Studio Community 2013をインストールした。これが無料！？信じられない。ほぼ会社で使っている環境と変わらない。
TypeScriptはマイクロソフトが作っただけあって、Visual Studioとの連携は完璧だ。IntelliSenseも使えるし、デバッグもブレークポイントの設定もVS上でできる(ただしブラウザはIEに限る)。しかもTypeScriptのままで。もうこれは、C++やC#と全く同じ感覚で使えるね。仕事でやってることと一緒だ。
さらに驚くべきは、TypeScriptで作ったコードは、コンパイルして完璧なJavaScriptに自動変換されるということだ。

class Greeter {
element: HTMLElement;
span: HTMLElement;
timerToken: number;
constructor(element: HTMLElement) {
this.element = element;
this.element.innerHTML += "The time is: ";
this.span = document.createElement('span');
this.element.appendChild(this.span);
this.span.innerText = new Date().toUTCString();
}
start() {
this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
}
stop() {
clearTimeout(this.timerToken);
}
}
window.onload = () => {
var el = document.getElementById('content');
var greeter = new Greeter(el);
greeter.start();
};

たとえばプロジェクトを新規作成すると標準で付属しているこのコード。0.5秒ごとに時刻を更新する時計プログラムだ。クラス定義や型定義、アロー矢印など独自の定義が使用されている。これをブラウザで実行したときのソースは

var Greeter = (function () {
function Greeter(element) {
this.element = element;
this.element.innerHTML += "The time is: ";
this.span = document.createElement('span');
this.element.appendChild(this.span);
this.span.innerText = new Date().toUTCString();
}
Greeter.prototype.start = function () {
var _this = this;
this.timerToken = setInterval(function () {
return _this.span.innerHTML = new Date().toUTCString();
}, 500);
};
Greeter.prototype.stop = function () {
clearTimeout(this.timerToken);
};
return Greeter;
})();
window.onload = function () {
var el = document.getElementById('content');
var greeter = new Greeter(el);
greeter.start();
};
//# sourceMappingURL=app.js.map

こうなる。すげー。クラスはちゃんとクロージャ内に収まってるし、start()内の this 識別子も _this 変数に代入することでjavascriptでも正しく動作するように解決されている。っていうか、生の javascript って、書き方めんどくさいよねぇ。。
詳しい記事は以下にもあります。
TypeScriptとは？ Visual Studioを使って開発してみよう – Build Insider

Tweet

自作グラフ描画アプリケーションを作るにあたって、オブジェクトの細分化、ソース管理の煩雑さが予想される。
EclipseのJavaScript周りの機能では、正直言って不安だ。JavaScriptには型の概念がないので、メソッド名などのチェック機能は皆無、ごくプリミティブな機能しか実装されてない。FireBugを駆使しないとデバッグがおぼつかない。変数チェックも弱く、デバッグ中は変数名間違いに時間をとられた。それでも、テキストエディタを使っていたときよりは随分ましだったけど。
いろいろ調べていると、なんとVisual Studio 2013 はGit+GitHubをサポートしているらしい。さらに、静的型付けをサポートしたJavaScriptのスーパーセット言語であるTypeScriptも正式サポートしている。TypeScriptは日常C#を使っている自分にとって学習コストは非常に低く、すごく助かる。最近、個人開発者向けにProfessional版と同等の機能を持ったVisual Studio Community 2013がリリースされたので、早速インストール中だ。もうこれで決まりかもしれんね。

Tweet

envision.jsに限ったことではないけど、グラフ描画ライブラリが作成できるグラフは、ある一定の表現に限られてしまう。カスタマイズが困難で、人の書いたソースコードを読むのに大きな時間を食われた挙句、改造不可能ということがわかったりしてしまう。
easeljsでの開発経験から考えて実装は十分可能で、面倒ではあるが難しくないだろう。すべてのオブジェクトにイベントを割り当てられるので、インタラクティブな動作も簡単に実装できる。画像だろうがテキストだろうが配置し放題だし、描画も早い。というわけで、時間がかかるけどグラフ描画システムは自作する方針に変更！

Tweet

六帖webアプリ
kickzone/StockHoloscope · GitHub
初版。株価表示にのみ対応した。また、株式分割による調整も、2002年8月以降はすべて対応できた。株価表示機能は、現時点、コードを入れるとチャートを表示するだけの機能。envision.jsの仕様がなかなかわからず、苦労した。1時間くらいかけてデバッグして、結局cssのパラメータが足りなかっただけとか。。
不具合はまだたくさんある。株価が急上昇・急下降すると画面にグラフが収まらない、取引量が消えてしまうことがある、などなど。。

昔バイトしていた会社のチャート。2005年をピークに一度低迷し、近年また盛り上げてきたことが分かる。分割情報は、次のサイトから持ってきてちょいちょいと加工した。
株式分割銘柄(取引注意銘柄) ｜取引注意銘柄｜投資情報・セミナー｜株のことならネット証券会社【カブドットコム】
2002年7月以前の分割情報が無いのが欠点。yahooファイナンスに「分割情報」として表示されてるので、今度一括取得用のコードを書こう。

ToDo:
ローソク足対応
移動平均などのグラフを上書き表示できるようにする
解析機能追加
バックテスト・フォワードテスト機能追加

先は長そうだ。

Tweet