2016年12月04日

初めてのTypeScript (2) - jQueryを利用してみる

   このエントリーをはてなブックマークに追加 Clip to Evernote
これは TypeScript Advent Calendar 2016 の4日目の記事です。

初めてのTypeScript (1) - 新規プロジェクトを作成してみる」の続きです。

今度は、jQueryを利用してみようと思います。


準備

Visual Studio 2015のNuGetで、jQuery と jQuery 用の jquery.TypeScript.DefinitelyTyped をインストールします。 これだけです。

jQueryを使ってみる。

前回のプログラム(Visual Studioが自動生成する「TypeScriptを使用したHTMLアプリケーション」を jQuery を使って書き換えてみました。

class Greeter {
    private element: JQuery;
    private span: JQuery;
    private timerToken: number;

    constructor(element: JQuery) {
        this.element = element;
        this.element.append("The time is: ");
        this.span = $('<span>');
        this.element.append(this.span);
        this.span.text(new Date().toUTCString());
    }

    start() {
        this.timerToken = setInterval(() => this.span.text(new Date().toUTCString()), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

class Application {
    static run() {
        let greeter = new Greeter($('#content'));
        greeter.start();
    }
}

$(() => {
    Application.run();
});

DOM操作の部分を jQuery を使ったコードに書き換えてみました。HTMLElement型の代わりに、JQuery型を利用しています。

ついでに、staticメソッド使えるのかなということで、Application クラスを定義して、run 静的メソッドを定義しています。

次に、jQueryが使えるように、index.htmlにscriptタグを追加します。

<head>
    ...
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="app.js"></script>
</head>

これで動かしてみます。無事動きました。

ボタンのクリックイベントを利用する

そういえば、Greeterクラスに定義してある stopメソッドって、定義してるだけで使っていないです。 なので、stopメソッドも使ってみます。

start/stop を行うボタンを配置。初期状態は、"Start"を表示します。

<body>
    <h1>TypeScript HTML App</h1>
    <div id="content"></div>
    <br>
    <button id="startstopButton" type="button">Start</button>
</body>

そして、GreeterクラスにisRunningメソッドを追加します。それに伴い、数か所変更。

class Greeter {
    private element: JQuery;
    private span: JQuery;
    private timerToken: number = null;

    constructor(element: JQuery) {
        this.element = element;
        this.element.append("The time is: ");
        this.span = $('<span>');
        this.element.append(this.span);
    }

    isRunning() {
        return this.timerToken !== null;
    }

    start() {
        this.timerToken = setInterval(() => this.span.text(new Date().toUTCString()), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
        this.timerToken = null;
    }

}

Applicationクラスのrunメソッドを以下のように書き替えます。

class Application {
    static run() {
        let greeter = new Greeter($('#content'));
        $('#startstopButton').on('click', (e) => {
            if (greeter.isRunning()) {
                greeter.stop(); $(e.target).text("Start");
            } else {
                greeter.start(); $(e.target).text("Stop");
            }
        });
    }
}

$(() => {
    Application.run();
});

callback関数を書くのに、いちいち function() { } と書かなくて済むのがとても良いです。

jQuery利用しているところは、JQuery型が導入された以外は、JavaScriptの時とほとんど変わらないですね。
 

動かしてみます。問題なく動いてるようです。



 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52479550