第2回 Build Insider OFFLINE: TypeScriptスペシャル

提供: IT勉強会・セミナーまとめWiki
移動: 案内検索
開催日 2014/6/14
開催情報
タグ Build Insider, TypeScript, HTML5
登壇者 井上章さん, 沢渡真雪さん, 池田泰延さん
セッション資料
セッション動画
ブログなど


TypeScript 1.0 オーバービュー

最初のセッションは、日本マイクロソフト株式会社 井上 章さんの「TypeScript 1.0 オーバービュー」でした。

"JavaScript is the Assmbly Language of the Web."

  • 重要だけど書くのは大変

TypeScript登場の背景

  • 大規模開発に対してはJavaScriptは大変
  • でもJavaScriptは必須

TypeScript

  • JavaScriptの上位拡張
  • JavaScriptのコードは、全てTypeScriptとして認識される

TypeScript開発環境

  • TypeScriptコンパイラは以下の場所にある
C:\Program Files(x86)\Microsoft SDKs\TypeScript

TypeScriptプロジェクト作成のデモ

  1. Visual Studio 2013起動
  2. プロジェクトテンプレートで[TypeScriptを使用したHTMLアプリケーション]を選択
  • プロジェクト構成
    • app.css
    • app.ts
    • app.js
    • app.js.map
    • index.html

2画面表示(左側にTypeScript、右側に生成されたJavaScriptを表示)を実現するには?

  1. [拡張機能と更新プログラム]で「Web Essentials」を入れる
  2. [オプション]メニューに[Web Essentials]が追加される
  3. [TypeScript] - [Show preview pane]をTrueにする

Playgroundのデモ

Playground - Welcome to TypeScript

  • TypeScript側にJavaScriptを書くと、JavaScript側にはそのまま出力される
    • TypeScriptはJavaScriptの上位拡張だから
  • Tips
    • altを押しながら、クリックすると同時に2か所編集できる

言語仕様のデモ

  • Interfaceを使ってClassを実装
interface Human {
    name: string;
    talk(): void;
}

class Talent implements Human {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    public talk() {
        alert(this.name + "です。");
    }
}

window.onload = () => {
    var talent = new Talent("ふなっしー");
    talent.talk();	// "ふなっしーです。"を表示
};
  • 引数にInterfaceを導入
interface Human {
    name: FullName;
    talk(): void;
}

interface FullName {
    firstName: string;
    lastName: string;
}

class Talent implements Human {
    name: FullName;

    constructor(name: FullName) {
        this.name = name;
    }

    public talk() {
        alert(this.name.firstName + " " + this.name.lastName);
    }
}

window.onload = () => {
    var talent = new Talent({ firstName: "ふなっしー", lastName: "だなっしー" });
    talent.talk();	// "ふなっしー だなっしー"を表示
};
  • Classを継承
interface Human {
    name: FullName;
    talk(): void;
}

interface FullName {
    firstName: string;
    lastName: string;
}

class Talent implements Human {
    name: FullName;

    constructor(name: FullName) {
        this.name = name;
    }

    public talk() {
        alert(this.name.firstName + " " + this.name.lastName);
    }
}

class KaryyPamuPamu extends Talent {
    constructor() {
        super({ firstName: "きゃりー", lastName: "ぱみゅぱみゅ" });
    }

    sing(): void {
        alert("ファッションモンスター");
    }
}

window.onload = () => {
    var karry = new KaryyPamuPamu();
    karry.talk();	// "きゃりー ぱみゅぱみゅ"を表示
    karry.sing();	// "ファッションモンスター"を表示
};
  • ClassをGenericsで実装

※記憶を頼りに書いているので若干違うかもしれません。

class Car<t> {
    constructor(public color: T) {
    }
}

enum Color1 { Green, Red, Blud };

enum Color2 { Yellow, White, Black };

window.onload = () => {
    var model1 = new Car<Color1>(Color1.Green);
    alert(model1.color);    // 0を表示

    var model2 = new Car<Color2>(Color2.White);
    alert(model2.color);    // 1を表示
};

テスト・デバッグのデモ

  1. IEで実行
  2. 開発者ツールを起動
  3. デバッガーで.tsファイルが認識される

仕組み

  • 開発者ツールの[ネットワーク]タブを選択
    • この時点でクライアントにダウンロードされたものは
      • app.css, app.js, app.js.map
    • デバッグ実行すると、app.tsがダウンロードされる
      • jsファイルの最後のコメント"//# sourceMappingURL=app.js.map"を参照している
        • app.js.mapに"app.ts"が設定されている

設定

  • [プロジェクトの設定] - [TypeScrptビルド] - [デバッグ] - [ソースマップを生成する]にチェック

参考書籍

TypeScriptリファレンス Ver.1.0対応

わかめ まさひろ インプレスジャパン 2014-05-16
売り上げランキング : 47421
by ヨメレバ
JavaScriptプログラマのための 実践的TypeScript入門

川俣晶 KADOKAWA/アスキー・メディアワークス 2014-05-31
売り上げランキング : 349392
by ヨメレバ
TypeScript入門 クラスと型チェック機能を加えたJavaScriptの拡張言語

川俣 晶 日経BP社 2014-06-04
売り上げランキング : 73595
by ヨメレバ

TypeScriptを実践的に使うために

2つ目のセッションは、沢渡 真雪さんの「TypeScriptを実践的に使うために」でした。

TSを採用する?しない?

  • 初見でも迷わずブレにくい
    • "class"と書いてあったらクラス定義だとすぐにわかる
  • 破壊的変更の安心感が増す
    • リファクタリングも安心してできる
    • 名前を間違えたらビルドが通らない

デモ(playground)

Playground - Welcome to TypeScript

Tips

  • Ctrl押しながらクリックで定義にジャンプ
  • 定義箇所を右クリック - [find all reference]
    • 全参照箇所の検索

デモ(Visual Stuio Online"Monaco")

  • AzureのポータルでWebサイトのダッシュボードを表示し、[Visual Studio Onlineでの編集]をクリック ※画面上部の[構成]から[VISUAL STUDIO ONLINEでの編集]を[オン]にしておく必要があります。
  • MonacoはTypeScriptとnode.jsで作られている

デモ(Visual StudioからDefinitelyTypedを使う)

  • jquery.TypeScript.DefinitelyTypedのインストール
    • プロジェクトのコンテキストメニュー[Nuget パッケージの管理]
    • Nugetで"definitelytyped jquery"で検索し、インストール
  • tsファイルに型定義ファイルをドロップすると参照が追加される


TypeScriptで効率化するHTML5のインタラクティブコンテンツの開発

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

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に移行する場合も移行しやすい

参考書籍

TypeScriptリファレンス Ver.1.0対応

わかめ まさひろ インプレスジャパン 2014-05-16
売り上げランキング : 47421
by ヨメレバ