VSハッカソン TypeScript ハンズオン
-
Upload
kazuhide-maruyama -
Category
Documents
-
view
859 -
download
0
description
Transcript of VSハッカソン TypeScript ハンズオン
TypeScript ハッカソン環境構築 /Web Server の準備 / ハンズオン
環境構築TypeScript をコンパイルするために
VS2012 の人• 以下からダウンロードしてインストール• http://
www.microsoft.com/en-us/download/details.aspx?id=34790
• 「 TypeScript for Visual Studio 2012 」でググってね!
実施後の追記どうやら VS2012が入っていなくても OKらしいです。
Node.js の人• Windows の人• http://nodejs.org/ からインストーラーをダウンロードしてインス
トール
• MAC の人• 詳しい人だれかお願いします。
• Node.js が入ってる人• Node.js がはいったらこれ
Windows で Node.js を入れたくない人• 実はこんな方法もいけます。• http://kmaru.hatenablog.com/entry/2013/02/03/195424
Web Server の準備ハンズオンを実施するために
VS2012 が入ってる人• 特になにもいりません。• IIS Express が入っているので次のスライドを参照してください。• もしくは TypeScript for Visual Studio 2012 を入れるとついてく
る Project Template でプロジェクトを作ってください。
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
上のようなバッチファイルを作って実行!
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)を作って実行!
あらかじめ用意しました• 以下をダウンロードして展開• http://goo.gl/yrTh9
• IISExpress の人• server.bat をダブルクリック!
• Node.js の人1. Shell で展開したディレクトリに移
動して2. npm install3. npm server.js
• ブラウザでhttp://localhost:9090/index.htmlにアクセス
ハンズオンTypeScript に踏み出すために
ハンズオンを始める前に• 「 Web Server の準備」でダウンロードしたディレクトリを
使います。• ダウンロードしておいてください。
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>
JavaScript を追加しよう• scripts フォルダの下に「 sample.js 」を以下の内容で追加し
ます。
var button = document.getElementById("exec");var textbox = document.getElementById("message");
button.addEventListener("click", function(){
alert(textbox.value);
}, false);
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>
JavaScript を TypeScript にしよう• 「 sample.js 」のファイル名を「 sample.ts 」に変更します。
TypeScript をコンパイルしよう• コマンドでカレントディレクトリをアプリケーションのルー
トディレクトリに移動します。• 以下のコマンドを実行します。• ※ 失敗します。
> tsc scripts/sample.ts
コンパイルを成功させよう• 「 sample.ts 」を以下のように変更します。
var button:any = document.getElementById("exec");var textbox:any = document.getElementById("message");
button.addEventListener("click", function(){
alert(textbox.value);
}, false);
型をちゃんと指定しよう• 型を any としていた部分をそれぞれの型にキャストします。
var button:HTMLButtonElement = <HTMLButtonElement>document.getElementById("exec");
var textbox:HTMLInputElement = <HTMLInputElement>document.getElementById("message");
button.addEventListener("click", function(){
alert(textbox.value);
}, false);
モジュール化しよう• 「 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);}
クラスを作ろう• 「 message.ts 」ファイルを追加して、以下のようにします。
module App{
export class Message{
private _value: String;
constructor(value: String){ this._value = value; } }}
コンパイルしよう• 以下のコマンドを実行します。
> tsc scripts/*.ts
プロパティを追加しよう• 「 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; }
}}
コンパイルしよう• 以下のコマンドを実行します。• ※ 失敗します。
> tsc scripts/*.ts
オプションを変更してコンパイルしよう• tsc のオプションを指定します。
> tsc scripts/*.ts –target ES5
ファイルを参照しよう• 「 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);}
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>
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>
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());
});}
$ を解決しよう• 「 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());
});}
jQuery の型定義を入手しよう• http://www.tsdpm.com/を開きます。• jQuery で検索をかけて結果の一番上をクリックします。• ダイアログの下にあるリンクからダウンロードします。• ダウンロードした「 jquery.d.ts 」を「 scripts 」フォルダの
下に「 typings 」フォルダを作って格納します。
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());
});}
Appendix
エディタ• VS2012• Express も対象
• Web Matrix• Vim• Emacs• Sublime Text• Web Storm• Flash Develop• others…