TypeScript ハッカソン環境構築/Web Serverの準備/ハンズオン
環境構築TypeScriptをコンパイルするために
VS2012の人• 以下からダウンロードしてインストール• http://www.microsoft.com/en-us/download/details.aspx?id=34790• 「TypeScript for Visual Studio...
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 T...
WindowsでVS2012が入ってない人• IISExpressがおすすめです。• WebMatrixが入ってれば入ってるかも• 以下よりダウンロードできます。• http://www.microsoft.com/ja-jp/download...
Windows以外の人• Node.jsで簡単なWebサーバーを作りましょう。• WindowsでNode.jsが入っている人もこれでもOKvar connect = require("connect");var server = connec...
あらかじめ用意しました• 以下をダウンロードして展開• http://goo.gl/yrTh9• IISExpressの人• server.batをダブルクリック!• Node.jsの人1. Shellで展開したディレクトリに移動して2. np...
ハンズオンTypeScriptに踏み出すために
ハンズオンを始める前に• 「Web Serverの準備」でダウンロードしたディレクトリを使います。• ダウンロードしておいてください。
HTMLを追加しよう• アプリケーションのルートに「sample.html」を以下の内容で追加します。• http://localhost:9090/sample.html にアクセスします。<!DOCTYPE html><html><head...
JavaScriptを追加しよう• scriptsフォルダの下に「sample.js」を以下の内容で追加します。var button = document.getElementById("exec");var textbox = documen...
HTMLからJavaScriptを参照しよう• sample.htmlのbody要素内の一番下にscript要素を追加します。• 以下のようになります。<!DOCTYPE html><html><head><title></title></he...
JavaScriptをTypeScriptにしよう• 「sample.js」のファイル名を「sample.ts」に変更します。
TypeScriptをコンパイルしよう• コマンドでカレントディレクトリをアプリケーションのルートディレクトリに移動します。• 以下のコマンドを実行します。• ※失敗します。> tsc scripts/sample.ts
コンパイルを成功させよう• 「sample.ts」を以下のように変更します。var button:any = document.getElementById("exec");var textbox:any = document.getEleme...
型をちゃんと指定しよう• 型をanyとしていた部分をそれぞれの型にキャストします。var button:HTMLButtonElement =<HTMLButtonElement>document.getElementById("exec");...
モジュール化しよう• 「sample.ts」を以下のように変更します。module App{var button:HTMLButtonElement =<HTMLButtonElement>document.getElementById("ex...
クラスを作ろう• 「message.ts」ファイルを追加して、以下のようにします。module App{export class Message{private _value: String;constructor(value: String)...
コンパイルしよう• 以下のコマンドを実行します。> tsc scripts/*.ts
プロパティを追加しよう• 「 message.ts」を以下のように変更します。module App{export class Message{private _value: String;constructor(value: String){t...
コンパイルしよう• 以下のコマンドを実行します。• ※失敗します。> tsc scripts/*.ts
オプションを変更してコンパイルしよう• tscのオプションを指定します。> tsc scripts/*.ts –target ES5
ファイルを参照しよう• 「sample.ts」から「message.ts」を参照します。• 「sample.ts」を以下のように変更します。• ※画面は動かなくなります。/// <reference path="message.ts" />mo...
HTMLからJavaScriptを参照しよう• 「sample.html」に「message.js」への参照を追加します。<!DOCTYPE html><html><head><title></title></head><body><div><...
jQuery を参照しよう• 「sample.html」にjQueryの参照を追加します。• 以下のようなCDNから取ってくると便利です。• http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1....
TypeScriptでjQueryを使ってみよう• 「sample.ts」を以下のように変更しまて、コンパイルします。• 失敗します。/// <reference path="message.ts" />module App{var butto...
$を解決しよう• 「sample.ts」を以下のように変更しまて、コンパイルします。/// <reference path="message.ts" />declare var $: any;module App{var button:any ...
jQueryの型定義を入手しよう• http://www.tsdpm.com/を開きます。• jQueryで検索をかけて結果の一番上をクリックします。• ダイアログの下にあるリンクからダウンロードします。• ダウンロードした「jquery.d....
jQueryの型定義を参照しよう• 「jquery.d.ts」を参照するために「sample.ts」を以下のように変更してコンパイルします。/// <reference path="message.ts" />/// <reference pa...
Appendix
エディタ• VS2012• Expressも対象• Web Matrix• Vim• Emacs• Sublime Text• Web Storm• Flash Develop• others…
Upcoming SlideShare
Loading in …5
×

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

750 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
750
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. TypeScript ハッカソン環境構築/Web Serverの準備/ハンズオン
  2. 2. 環境構築TypeScriptをコンパイルするために
  3. 3. VS2012の人• 以下からダウンロードしてインストール• http://www.microsoft.com/en-us/download/details.aspx?id=34790• 「TypeScript for Visual Studio 2012」でググってね!実施後の追記どうやらVS2012が入っていなくてもOKらしいです。
  4. 4. Node.jsの人• Windowsの人• http://nodejs.org/ からインストーラーをダウンロードしてインストール• MACの人• 詳しい人だれかお願いします。• Node.jsが入ってる人• Node.jsがはいったらこれ
  5. 5. WindowsでNode.jsを入れたくない人• 実はこんな方法もいけます。• http://kmaru.hatenablog.com/entry/2013/02/03/195424
  6. 6. Web Server の準備ハンズオンを実施するために
  7. 7. VS2012が入ってる人• 特になにもいりません。• IIS Expressが入っているので次のスライドを参照してください。• もしくは TypeScript for Visual Studio 2012 を入れるとついてくるProject Templateでプロジェクトを作ってください。
  8. 8. WindowsでVS2012が入ってない人• IISExpressがおすすめです。• WebMatrixが入ってれば入ってるかも• 以下よりダウンロードできます。• http://www.microsoft.com/ja-jp/download/details.aspx?id=1038> "C:Program Files (x86)IIS Expressiisexpress" /path:%~dp0 /port:9090 /clr:v2.0上のようなバッチファイルを作って実行!
  9. 9. Windows以外の人• Node.jsで簡単なWebサーバーを作りましょう。• WindowsでNode.jsが入っている人もこれでもOKvar connect = require("connect");var server = connect.createServer(connect.logger(),connect.static(__dirname));server.listen(3000);> node server.jsこんなファイル(ここではserver.js)を作って実行!
  10. 10. あらかじめ用意しました• 以下をダウンロードして展開• http://goo.gl/yrTh9• IISExpressの人• server.batをダブルクリック!• Node.jsの人1. Shellで展開したディレクトリに移動して2. npm install3. npm server.js• ブラウザでhttp://localhost:9090/index.htmlにアクセス
  11. 11. ハンズオンTypeScriptに踏み出すために
  12. 12. ハンズオンを始める前に• 「Web Serverの準備」でダウンロードしたディレクトリを使います。• ダウンロードしておいてください。
  13. 13. 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>
  14. 14. JavaScriptを追加しよう• scriptsフォルダの下に「sample.js」を以下の内容で追加します。var button = document.getElementById("exec");var textbox = document.getElementById("message");button.addEventListener("click", function(){alert(textbox.value);}, false);
  15. 15. 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>
  16. 16. JavaScriptをTypeScriptにしよう• 「sample.js」のファイル名を「sample.ts」に変更します。
  17. 17. TypeScriptをコンパイルしよう• コマンドでカレントディレクトリをアプリケーションのルートディレクトリに移動します。• 以下のコマンドを実行します。• ※失敗します。> tsc scripts/sample.ts
  18. 18. コンパイルを成功させよう• 「sample.ts」を以下のように変更します。var button:any = document.getElementById("exec");var textbox:any = document.getElementById("message");button.addEventListener("click", function(){alert(textbox.value);}, false);
  19. 19. 型をちゃんと指定しよう• 型をanyとしていた部分をそれぞれの型にキャストします。var button:HTMLButtonElement =<HTMLButtonElement>document.getElementById("exec");var textbox:HTMLInputElement =<HTMLInputElement>document.getElementById("message");button.addEventListener("click", function(){alert(textbox.value);}, false);
  20. 20. モジュール化しよう• 「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);}
  21. 21. クラスを作ろう• 「message.ts」ファイルを追加して、以下のようにします。module App{export class Message{private _value: String;constructor(value: String){this._value = value;}}}
  22. 22. コンパイルしよう• 以下のコマンドを実行します。> tsc scripts/*.ts
  23. 23. プロパティを追加しよう• 「 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;}}}
  24. 24. コンパイルしよう• 以下のコマンドを実行します。• ※失敗します。> tsc scripts/*.ts
  25. 25. オプションを変更してコンパイルしよう• tscのオプションを指定します。> tsc scripts/*.ts –target ES5
  26. 26. ファイルを参照しよう• 「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);}
  27. 27. 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>
  28. 28. 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>
  29. 29. 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());});}
  30. 30. $を解決しよう• 「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());});}
  31. 31. jQueryの型定義を入手しよう• http://www.tsdpm.com/を開きます。• jQueryで検索をかけて結果の一番上をクリックします。• ダイアログの下にあるリンクからダウンロードします。• ダウンロードした「jquery.d.ts」を「scripts」フォルダの下に「typings」フォルダを作って格納します。
  32. 32. jQueryの型定義を参照しよう• 「jquery.d.ts」を参照するために「sample.ts」を以下のように変更してコンパイルします。/// <reference path="message.ts" />/// <reference path="typings/jquery.d.ts" />// declare var $: any; ←削除してもOKmodule 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());});}
  33. 33. Appendix
  34. 34. エディタ• VS2012• Expressも対象• Web Matrix• Vim• Emacs• Sublime Text• Web Storm• Flash Develop• others…

×