SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

TypeScriptでknockout.jsを使う・その1~準備~

JavaScript向けのMVVMフレームワーク、というかライブラリの、knockout.jsを使ってみました。
公式サイトは↓です。
Knockout : Home


AngulerやEmberなど、ここの所クライアントサイドのMVなんちゃらなライブラリが色々流行ってますが、
knockout.jsはデータバインディングの機能に特化したシンプルなライブラリです。
データバインディングの概念は、C#などでXAML系の開発を行ってた人には特に馴染みやすいのでは、と思います。

knockout.jsのチュートリアル

ここのチュートリアルが非常に良くできていて、ブラウザ上で実際にスクリプトを書いて実行結果を確認しながら学習を進めることができます。
公式のトップページ画面上部から、Tutorialsのリンクをクリックすると、チュートリアルのページが表示されます。
http://learn.knockoutjs.com/
f:id:minami_SC:20150221161552p:plain

・左上:チュートリアルの内容の説明
・右上:HTMLをココに書きます。
・左下:実行結果が表示されます。
・右下:JavaScriptのコードをココに書きます。


上記公式サイトと、以下の日本語ドキュメントをざっと読めば、だいたいの使い方は学習できるかと思います。

knockout.jsをTypeScriptで使用する

ということで、さっそくこのknockout.jsをTypeScriptで使ってみたいと思います。

準備

TypeScript1.4のインストール

VS2013Update2以降では、標準でTypeScriptが使えるようになっていますが、これはTypeScriptのバージョン1.0となっています。
しかし、knockoutの型定義ファイルでは、TypeScript1.4で追加されたUnion Typeという言語仕様を使っていて、そのままではコンパイルできません。


そこで、TypeScript1.4を使うための拡張機能をインストールします。

拡張機能と更新プログラム」のダイアログを開き、TypeScriptで検索します。
検索結果に出てくる、TypeScript 1.4 for Visual Studio 2013というのをインストールすればOKです。(※VS2013を使用している場合)
f:id:minami_SC:20150221161608p:plain

プロジェクト作成

拡張機能をインストールできたら、さっそくプロジェクトを作成してみます。
新規プロジェクト作成のダイアログで、「TypeScriptを使用したHTMLアプリケーション」を選んでプロジェクトを作成します。

ライブラリのインストール

Nugetで以下二つのパッケージをインストールします。
・knockoutjs
・knockout.TypeScript.DefinitelyTyped

Nugetのコンソールからインストールする場合は、以下の通り。

Install-Package knockoutjs
Install-Package knockout.TypeScript.DefinitelyTyped

動作確認

ここまでできたら、サンプルコードを書いて実行し、動作確認をしてみます。
index.htmlとapp.tsをそれぞれ以下のように書き換えます。

index.html
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="Scripts/knockout-3.2.0.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <p data-bind="text: message"></p>
</body>
</html>
app.ts
/// <reference path="scripts/typings/knockout/knockout.d.ts" />

class AppViewModel {
    message: string = "Hello World!!";
}

window.onload = () => {
    var viewModel = new AppViewModel();
    ko.applyBindings(viewModel);
};


f:id:minami_SC:20150221161619p:plain
こんな風に、<p>タグの部分にHello World!!という文字列が表示されればOKです。
細かい使い方は、また続きます。