VSハッカソン TypeScript ハンズオン

34
TypeScript ハハハハハ ハハハハ /Web Server ハハハ / ハハハハハ

description

 

Transcript of VSハッカソン TypeScript ハンズオン

Page 1: VSハッカソン TypeScript ハンズオン

TypeScript ハッカソン環境構築 /Web Server の準備 / ハンズオン

Page 2: VSハッカソン TypeScript ハンズオン

環境構築TypeScript をコンパイルするために

Page 3: VSハッカソン TypeScript ハンズオン

VS2012 の人• 以下からダウンロードしてインストール• http://

www.microsoft.com/en-us/download/details.aspx?id=34790

• 「 TypeScript for Visual Studio 2012 」でググってね!

実施後の追記どうやら VS2012が入っていなくても OKらしいです。

Page 4: VSハッカソン TypeScript ハンズオン

Node.js の人• Windows の人• http://nodejs.org/ からインストーラーをダウンロードしてインス

トール

• MAC の人• 詳しい人だれかお願いします。

• Node.js が入ってる人• Node.js がはいったらこれ

Page 5: VSハッカソン TypeScript ハンズオン

Windows で Node.js を入れたくない人• 実はこんな方法もいけます。• http://kmaru.hatenablog.com/entry/2013/02/03/195424

Page 6: VSハッカソン TypeScript ハンズオン

Web Server の準備ハンズオンを実施するために

Page 7: VSハッカソン TypeScript ハンズオン

VS2012 が入ってる人• 特になにもいりません。• IIS Express が入っているので次のスライドを参照してください。• もしくは TypeScript for Visual Studio 2012 を入れるとついてく

る Project Template でプロジェクトを作ってください。

Page 8: VSハッカソン TypeScript ハンズオン

Windows で VS2012 が入ってない人• IISExpress がおすすめです。• WebMatrix が入ってれば入ってるかも• 以下よりダウンロードできます。

• http://www.microsoft.com/ja-jp/download/details.aspx?id=1038

> "C:\Program Files (x86)\IIS Express\iisexpress" /path:%~dp0 /port:9090 /clr:v2.0

上のようなバッチファイルを作って実行!

Page 9: VSハッカソン TypeScript ハンズオン

Windows 以外の人• Node.js で簡単な Web サーバーを作りましょう。• Windows で Node.js が入っている人もこれでも OK

var connect = require("connect");var server = connect.createServer( connect.logger(), connect.static(__dirname));server.listen(3000);

> node server.jsこんなファイル (ここではserver.js)を作って実行!

Page 10: VSハッカソン TypeScript ハンズオン

あらかじめ用意しました• 以下をダウンロードして展開• http://goo.gl/yrTh9

• IISExpress の人• server.bat をダブルクリック!

• Node.js の人1. Shell で展開したディレクトリに移

動して2. npm install3. npm server.js

• ブラウザでhttp://localhost:9090/index.htmlにアクセス

Page 11: VSハッカソン TypeScript ハンズオン

ハンズオンTypeScript に踏み出すために

Page 12: VSハッカソン TypeScript ハンズオン

ハンズオンを始める前に• 「 Web Server の準備」でダウンロードしたディレクトリを

使います。• ダウンロードしておいてください。

Page 13: VSハッカソン TypeScript ハンズオン

HTML を追加しよう• アプリケーションのルートに「 sample.html 」を以下の内容

で追加します。• http://localhost:9090/sample.html にアクセスします。

<!DOCTYPE html><html><head> <title></title></head><body> <div> <input type="text" id="message" /> <button type="button" id="exec">Click</button> </div></body></html>

Page 14: VSハッカソン TypeScript ハンズオン

JavaScript を追加しよう• scripts フォルダの下に「 sample.js 」を以下の内容で追加し

ます。

var button = document.getElementById("exec");var textbox = document.getElementById("message");

button.addEventListener("click", function(){

alert(textbox.value);

}, false);

Page 15: VSハッカソン TypeScript ハンズオン

HTML から JavaScript を参照しよう• sample.html の body 要素内の一番下に script 要素を追加し

ます。• 以下のようになります。

<!DOCTYPE html><html><head> <title></title></head><body> <div> <input type="text" id="message" /> <button type="button" id="exec">Click</button> </div> <script src="scripts/sample.js"></script></body></html>

Page 16: VSハッカソン TypeScript ハンズオン

JavaScript を TypeScript にしよう• 「 sample.js 」のファイル名を「 sample.ts 」に変更します。

Page 17: VSハッカソン TypeScript ハンズオン

TypeScript をコンパイルしよう• コマンドでカレントディレクトリをアプリケーションのルー

トディレクトリに移動します。• 以下のコマンドを実行します。• ※ 失敗します。

> tsc scripts/sample.ts

Page 18: VSハッカソン TypeScript ハンズオン

コンパイルを成功させよう• 「 sample.ts 」を以下のように変更します。

var button:any = document.getElementById("exec");var textbox:any = document.getElementById("message");

button.addEventListener("click", function(){

alert(textbox.value);

}, false);

Page 19: VSハッカソン TypeScript ハンズオン

型をちゃんと指定しよう• 型を any としていた部分をそれぞれの型にキャストします。

var button:HTMLButtonElement = <HTMLButtonElement>document.getElementById("exec");

var textbox:HTMLInputElement = <HTMLInputElement>document.getElementById("message");

button.addEventListener("click", function(){

alert(textbox.value);

}, false);

Page 20: VSハッカソン TypeScript ハンズオン

モジュール化しよう• 「 sample.ts 」を以下のように変更します。

module App{ var button:HTMLButtonElement = <HTMLButtonElement>document.getElementById("exec"); var textbox:HTMLInputElement = <HTMLInputElement>document.getElementById("message");

button.addEventListener("click", function(){

alert(textbox.value);

}, false);}

Page 21: VSハッカソン TypeScript ハンズオン

クラスを作ろう• 「 message.ts 」ファイルを追加して、以下のようにします。

module App{

export class Message{

private _value: String;

constructor(value: String){ this._value = value; } }}

Page 22: VSハッカソン TypeScript ハンズオン

コンパイルしよう• 以下のコマンドを実行します。

> tsc scripts/*.ts

Page 23: VSハッカソン TypeScript ハンズオン

プロパティを追加しよう• 「 message.ts 」を以下のように変更します。

module App{ export class Message{ private _value: String; constructor(value: String){ this._value = value; }

public get value(): String{ return this._value; } public set value(v: String){ this._value = v; }

}}

Page 24: VSハッカソン TypeScript ハンズオン

コンパイルしよう• 以下のコマンドを実行します。• ※ 失敗します。

> tsc scripts/*.ts

Page 25: VSハッカソン TypeScript ハンズオン

オプションを変更してコンパイルしよう• tsc のオプションを指定します。

> tsc scripts/*.ts –target ES5

Page 26: VSハッカソン TypeScript ハンズオン

ファイルを参照しよう• 「 sample.ts 」から「 message.ts 」を参照します。• 「 sample.ts 」を以下のように変更します。• ※ 画面は動かなくなります。

/// <reference path="message.ts" />

module App{var button:HTMLButtonElement =

<HTMLButtonElement>document.getElementById("exec");var textbox:HTMLInputElement =

<HTMLInputElement>document.getElementById("message");

button.addEventListener("click", function(){var msg:App.Message = new App.Message(textbox.value);alert(msg.value.toString());

}, false);}

Page 27: VSハッカソン TypeScript ハンズオン

HTML から JavaScript を参照しよう• 「 sample.html 」に「 message.js 」への参照を追加します。

<!DOCTYPE html><html><head> <title></title></head><body> <div> <input type="text" id="message" /> <button type="button" id="exec">Click</button> </div> <script src="scripts/message.js"></script> <script src="scripts/sample.js"></script></body></html>

Page 28: VSハッカソン TypeScript ハンズオン

jQuery を参照しよう• 「 sample.html 」に jQuery の参照を追加します。

• 以下のような CDN から取ってくると便利です。• http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js<!DOCTYPE html>

<html><head> <title></title></head><body> <div> <input type="text" id="message" /> <button type="button" id="exec">Click</button> </div> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script> <script src="scripts/message.js"></script> <script src="scripts/sample.js"></script></body></html>

Page 29: VSハッカソン TypeScript ハンズオン

TypeScript で jQuery を使ってみよう• 「 sample.ts 」を以下のように変更しまて、コンパイルします。

• 失敗します。

/// <reference path="message.ts" />

module App{var button:any = $("#exec");var textbox:any = $("#message");

button.on("click", function(){

var msg:App.Message = new App.Message(textbox.val());alert(msg.value.toString());

});}

Page 30: VSハッカソン TypeScript ハンズオン

$ を解決しよう• 「 sample.ts 」を以下のように変更しまて、コンパイルしま

す。/// <reference path="message.ts" />

declare var $: any;

module App{var button:any = $("#exec");var textbox:any = $("#message");

button.on("click", function(){

var msg:App.Message = new App.Message(textbox.val());alert(msg.value.toString());

});}

Page 31: VSハッカソン TypeScript ハンズオン

jQuery の型定義を入手しよう• http://www.tsdpm.com/を開きます。• jQuery で検索をかけて結果の一番上をクリックします。• ダイアログの下にあるリンクからダウンロードします。• ダウンロードした「 jquery.d.ts 」を「 scripts 」フォルダの

下に「 typings 」フォルダを作って格納します。

Page 32: VSハッカソン TypeScript ハンズオン

jQuery の型定義を参照しよう• 「 jquery.d.ts 」を参照するために「 sample.ts 」を以下のよ

うに変更してコンパイルします。

/// <reference path="message.ts" />/// <reference path="typings/jquery.d.ts" />

// declare var $: any; ←削除しても OK

module App{var button:JQuery = $("#exec");var textbox:JQuery = $("#message");

button.on("click", function(){var msg:App.Message = new App.Message(textbox.val());alert(msg.value.toString());

});}

Page 33: VSハッカソン TypeScript ハンズオン

Appendix

Page 34: VSハッカソン TypeScript ハンズオン

エディタ• VS2012• Express も対象

• Web Matrix• Vim• Emacs• Sublime Text• Web Storm• Flash Develop• others…