読者です 読者をやめる 読者になる 読者になる

プログラマーな日々

プログラマーをやっています。好きなツール:WorkFlowy、好きな言語:C#、好きなサービス:Backlog、好きなAWS:AWS Lambda。

「第2回 Build Insider OFFLINE: TypeScriptスペシャル 」に行ってきた(その3「TypeScriptで効率化するHTML5のインタラクティブコンテンツの開発」by 株式会社ICS代表 池田 泰延さん)

f:id:JHashimoto:20140409044240j:plain

6/14に「第2回 Build Insider OFFLINE: TypeScriptスペシャル」に行ってきました。3回に分けてセミナーの内容を紹介します。

第2回 Build Insider OFFLINE: TypeScriptスペシャル - Build Insider
Build Insiderのオフライン・イベントが2014年6月14日(土曜日)に開催されます!  今年は、Web開発者に大人気(Build Insiderの調査で1位)の「TypeScript」がテーマです。 ...

今回は3回目です。3つ目のセッションは、株式会社ICS代表 池田 泰延さんの「TypeScriptで効率化するHTML5のインタラクティブコンテンツの開発」でした。

セッション資料と動画

TypeScriptセッションの全スライド&動画 - Build Insider
6/14に開催された第2回 Build Insider OFFLINEの3つのセッション「TypeScript 1.0 オーバービュー」「TypeScriptを実践的に使うために」「TypeScriptで効率化するHTML5のインタラクティブコンテンツの開発」のスライド&動画です。また、当日の連携イベントだった「TypeScript勉強会 - VSハッカソン倶楽部」の各スライドも掲載しています。 ...

メモ

HTML5で利用する技術の選定

  • 将来廃れる技術ではないか?

プログラミング言語の検討

JavaScriptでの大規模開発はありか?
  • 限界を感じていた
    • IDEのサポートがない
CoffeeScript
  • メリット
    • 少ないコード量で記述できる
      • トライアンドエラーの回数が増える
        • 9割型完成した後の微調整の連続のフェーズで効率が上がる
Haxe
  • メリット
    • JavaScriptの他、ActionScript、C++、C#、Java、PHPも出力できる

描画APIの選定

  • 処理時間の大半は描画である
    • 時間がかかるのは描画APIをキックするJS
      • DOMの再構築、再表示
      • Canvasへの描画

TypeScript作例

日本全国花粉飛散マップ Pollen Map in Japan | ICS

  • Flash Professional CCでデザインしている

最適化

  • TypeScriptからは複数のファイルを1ファイルとして出力する
    • TSのコンパイルオプションで指定できる
  • コンパイルはIDEでやる
    • Gruntでやると、コンパイルエラーがコンソールに出力されるので気付きにくい

デモ(最適化結果)

  • 日本花粉飛散マップの起動が7秒から4秒に短縮

TypeScriptでJSライブラリの開発

  • TypeScriptはコメントもJavaScriptに出力してくれる
    • 最悪JavaScriptに移行する場合も移行しやすい