SlideShare une entreprise Scribd logo
1  sur  14
TypeScriptを動かす

          丹野 嘉信
http://ytanno.herokuapp.com/
目次
• TypeScriptを動かす
• javaScriptとVisualStudio
TypeScriptとは
• javaScriptの上位互換・・・になる可能性が
  高い言語
TypeScript 変換 → javaScript

利点
下記URLを見るとお腹がいっぱいになります
https://sites.google.com/site/jun1sboardgames/
programming/typescript
試使
• http://www.typescriptlang.org/Playground/
下準備
• Node.jsのインストール http://nodejs.org/
• Node.js command prompt で
  npm install -g typescript
プロジェクトの作成
拡張ツール
• Web Essentials
http://visualstudiogallery.msdn.microsoft.com/6ed
4c78f-a23e-49ad-b5fd-369af0c2107f

ファイルセーブ時にTypeScriptのSource Mapを出
力

変換後のJavaScriptのコードがリアルタイムで
閲覧可能
開発
Chrome からデバック
欠点・結論
• VisualStudioからデバックができない
• インテリセンスがまだ弱い
• VS2012以降対応

結論
今はまだ弱いがこのままサポートが続けば
本当にJavaScriptの上位互換になる。
今後に期待。
参考URL
• http://neue.cc/2012/10/12_382.html
• https://sites.google.com/site/jun1sboardgame
  s/programming/typescript
• http://terurou.hateblo.jp/entry/2012/10/17/0
  31013
JavaScript編
• インテリセンスのサポートが強い
外部ファイルの
   インテリセンスも有効
• 外部ファイルを現在のファイルにドラッ
  クアンドドロップするだけ
参考URL
• http://yagioyagio.blog103.fc2.com/blog-entry-
  36.html
ご清聴ありがとうございまし
      た

Contenu connexe

Tendances

タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜Masaya Kogawa
 
Node.js version16の新機能
Node.js version16の新機能Node.js version16の新機能
Node.js version16の新機能Masaki Suzuki
 
AndroidアプリをTravis CIでビルド
AndroidアプリをTravis CIでビルドAndroidアプリをTravis CIでビルド
AndroidアプリをTravis CIでビルドKiwamu Okabe
 
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないときNode.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないときRyunosuke SATO
 
海外で注目されてるJs framework “mithril”の特徴
海外で注目されてるJs framework “mithril”の特徴海外で注目されてるJs framework “mithril”の特徴
海外で注目されてるJs framework “mithril”の特徴Shoyo Kyou
 
Sails.jsのメリット・デメリット
Sails.jsのメリット・デメリットSails.jsのメリット・デメリット
Sails.jsのメリット・デメリットIto Kohta
 
Riotjsハンズオン
RiotjsハンズオンRiotjsハンズオン
Riotjsハンズオンomi end
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたItaru Kitagawa
 
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみるづや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみるzuya
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
NodeにしましょうYuzo Hebishima
 
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?Yosuke Onoue
 
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発するHiroyuki Kusu
 
kichijyojipm17-Riot20190301
kichijyojipm17-Riot20190301kichijyojipm17-Riot20190301
kichijyojipm17-Riot20190301Masanobu Shimura
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626Taku AMANO
 
S14 t3 yosuke_yamashita
S14 t3 yosuke_yamashitaS14 t3 yosuke_yamashita
S14 t3 yosuke_yamashitaTakeshi Akutsu
 
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装kidach1
 

Tendances (20)

JavaScript TDD紹介 #agilesamurai
JavaScript TDD紹介 #agilesamuraiJavaScript TDD紹介 #agilesamurai
JavaScript TDD紹介 #agilesamurai
 
Node js 入門
Node js 入門Node js 入門
Node js 入門
 
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
 
Node.js version16の新機能
Node.js version16の新機能Node.js version16の新機能
Node.js version16の新機能
 
AndroidアプリをTravis CIでビルド
AndroidアプリをTravis CIでビルドAndroidアプリをTravis CIでビルド
AndroidアプリをTravis CIでビルド
 
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないときNode.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
 
海外で注目されてるJs framework “mithril”の特徴
海外で注目されてるJs framework “mithril”の特徴海外で注目されてるJs framework “mithril”の特徴
海外で注目されてるJs framework “mithril”の特徴
 
Sails.jsのメリット・デメリット
Sails.jsのメリット・デメリットSails.jsのメリット・デメリット
Sails.jsのメリット・デメリット
 
進撃のSbt
進撃のSbt進撃のSbt
進撃のSbt
 
Riotjsハンズオン
RiotjsハンズオンRiotjsハンズオン
Riotjsハンズオン
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
 
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみるづや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
Nodeにしましょう
 
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?
 
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
 
kichijyojipm17-Riot20190301
kichijyojipm17-Riot20190301kichijyojipm17-Riot20190301
kichijyojipm17-Riot20190301
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
 
S14 t3 yosuke_yamashita
S14 t3 yosuke_yamashitaS14 t3 yosuke_yamashita
S14 t3 yosuke_yamashita
 
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
 
Node.js Hands-On
Node.js Hands-OnNode.js Hands-On
Node.js Hands-On
 

En vedette

Power shellmemo
Power shellmemoPower shellmemo
Power shellmemoytanno
 
2012 kanemotolablecture6
2012 kanemotolablecture62012 kanemotolablecture6
2012 kanemotolablecture6ytanno
 
Sfm memo
Sfm memoSfm memo
Sfm memoytanno
 
2012 kanemotolablecture2
2012 kanemotolablecture22012 kanemotolablecture2
2012 kanemotolablecture2ytanno
 
Be project
Be projectBe project
Be projectsneha94
 
2012 kanemotolablecture1
2012 kanemotolablecture12012 kanemotolablecture1
2012 kanemotolablecture1ytanno
 

En vedette (7)

Power shellmemo
Power shellmemoPower shellmemo
Power shellmemo
 
2012 kanemotolablecture6
2012 kanemotolablecture62012 kanemotolablecture6
2012 kanemotolablecture6
 
Sfm memo
Sfm memoSfm memo
Sfm memo
 
2012 kanemotolablecture2
2012 kanemotolablecture22012 kanemotolablecture2
2012 kanemotolablecture2
 
Reflexion modulo 1
Reflexion modulo 1Reflexion modulo 1
Reflexion modulo 1
 
Be project
Be projectBe project
Be project
 
2012 kanemotolablecture1
2012 kanemotolablecture12012 kanemotolablecture1
2012 kanemotolablecture1
 

Similaire à Type scriptmemo

VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発Yuta Matsumura
 
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門Narami Kiyokura
 
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub  (#kyotojs)JavaScript on GitHub  (#kyotojs)
JavaScript on GitHub (#kyotojs)y_uuki
 
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC WebアプリケーションPlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC WebアプリケーションKazuhiro Hara
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...Naoya Ito
 
アカツキはどのようにAWSを活用しているか #jawsug
アカツキはどのようにAWSを活用しているか #jawsugアカツキはどのようにAWSを活用しているか #jawsug
アカツキはどのようにAWSを活用しているか #jawsugaktsk
 
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入Yu Nobuoka
 
JavaScript And Keywords
JavaScript And KeywordsJavaScript And Keywords
JavaScript And Keywordsuupaa
 
Firefox mobile for android internals
Firefox mobile for android internalsFirefox mobile for android internals
Firefox mobile for android internalsMakoto Kato
 
パワーユーザー必携の海外の拡張機能20選+α
パワーユーザー必携の海外の拡張機能20選+αパワーユーザー必携の海外の拡張機能20選+α
パワーユーザー必携の海外の拡張機能20選+αAkira Maruyama
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~normalian
 
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについてMasahito Zembutsu
 
TypeScript + Express
TypeScript + ExpressTypeScript + Express
TypeScript + Expresskamiyam .
 
ソーシャルゲーム開発における運用とそのツール
ソーシャルゲーム開発における運用とそのツールソーシャルゲーム開発における運用とそのツール
ソーシャルゲーム開発における運用とそのツールYoshiaki Sugimoto
 
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミングDLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミングterurou
 
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)Shinya Nakajima
 
マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介Sunao Tomita
 

Similaire à Type scriptmemo (20)

VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
 
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門
 
SnapDishの事例
SnapDishの事例SnapDishの事例
SnapDishの事例
 
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub  (#kyotojs)JavaScript on GitHub  (#kyotojs)
JavaScript on GitHub (#kyotojs)
 
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC WebアプリケーションPlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
 
アカツキはどのようにAWSを活用しているか #jawsug
アカツキはどのようにAWSを活用しているか #jawsugアカツキはどのようにAWSを活用しているか #jawsug
アカツキはどのようにAWSを活用しているか #jawsug
 
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
 
210630 python
210630 python210630 python
210630 python
 
JavaScript And Keywords
JavaScript And KeywordsJavaScript And Keywords
JavaScript And Keywords
 
Firefox mobile for android internals
Firefox mobile for android internalsFirefox mobile for android internals
Firefox mobile for android internals
 
パワーユーザー必携の海外の拡張機能20選+α
パワーユーザー必携の海外の拡張機能20選+αパワーユーザー必携の海外の拡張機能20選+α
パワーユーザー必携の海外の拡張機能20選+α
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
 
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
 
TypeScript + Express
TypeScript + ExpressTypeScript + Express
TypeScript + Express
 
Html5 nagoya 07
Html5 nagoya 07Html5 nagoya 07
Html5 nagoya 07
 
ソーシャルゲーム開発における運用とそのツール
ソーシャルゲーム開発における運用とそのツールソーシャルゲーム開発における運用とそのツール
ソーシャルゲーム開発における運用とそのツール
 
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミングDLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
 
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
 
マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介
 

Plus de ytanno

How to be friend with Attiny202 which is small microcontroller
How to be friend with Attiny202 which is small microcontrollerHow to be friend with Attiny202 which is small microcontroller
How to be friend with Attiny202 which is small microcontrollerytanno
 
Process of Interval Photograph System
Process of Interval Photograph SystemProcess of Interval Photograph System
Process of Interval Photograph Systemytanno
 
How to make an effort for good job
How to make an effort for good jobHow to make an effort for good job
How to make an effort for good jobytanno
 
How To Bind Cuda And OpenCV
How To Bind Cuda And OpenCV How To Bind Cuda And OpenCV
How To Bind Cuda And OpenCV ytanno
 
How to autorun graphic application
How to autorun graphic applicationHow to autorun graphic application
How to autorun graphic applicationytanno
 
How to setup 3D printer (Ender 3 pro)
How to setup 3D printer (Ender 3 pro)How to setup 3D printer (Ender 3 pro)
How to setup 3D printer (Ender 3 pro)ytanno
 
How to set https server
How to set https serverHow to set https server
How to set https serverytanno
 
How to write code in Attiny10
How to write code in Attiny10How to write code in Attiny10
How to write code in Attiny10ytanno
 
How to set up two i2cs on Attiny841
How to set up two i2cs on Attiny841How to set up two i2cs on Attiny841
How to set up two i2cs on Attiny841ytanno
 
How to write code on MachXO2
How to write code on MachXO2How to write code on MachXO2
How to write code on MachXO2ytanno
 
K-means and X-means
K-means and X-meansK-means and X-means
K-means and X-meansytanno
 
First Step SVM
First Step SVMFirst Step SVM
First Step SVMytanno
 
さるでも分かりたい9dofで作るクォータニオン姿勢
さるでも分かりたい9dofで作るクォータニオン姿勢さるでも分かりたい9dofで作るクォータニオン姿勢
さるでも分かりたい9dofで作るクォータニオン姿勢ytanno
 
Xaml html5
Xaml html5Xaml html5
Xaml html5ytanno
 
C# でブラウザ操作
C# でブラウザ操作C# でブラウザ操作
C# でブラウザ操作ytanno
 
PI制御を作ってみた
PI制御を作ってみたPI制御を作ってみた
PI制御を作ってみたytanno
 
CharpTwitter
CharpTwitterCharpTwitter
CharpTwitterytanno
 
MongoDBCSharp
MongoDBCSharpMongoDBCSharp
MongoDBCSharpytanno
 
VisualStudinoの役に立ちそうな拡張機能をまとめてみた
VisualStudinoの役に立ちそうな拡張機能をまとめてみたVisualStudinoの役に立ちそうな拡張機能をまとめてみた
VisualStudinoの役に立ちそうな拡張機能をまとめてみたytanno
 
2013_kougi6
2013_kougi62013_kougi6
2013_kougi6ytanno
 

Plus de ytanno (20)

How to be friend with Attiny202 which is small microcontroller
How to be friend with Attiny202 which is small microcontrollerHow to be friend with Attiny202 which is small microcontroller
How to be friend with Attiny202 which is small microcontroller
 
Process of Interval Photograph System
Process of Interval Photograph SystemProcess of Interval Photograph System
Process of Interval Photograph System
 
How to make an effort for good job
How to make an effort for good jobHow to make an effort for good job
How to make an effort for good job
 
How To Bind Cuda And OpenCV
How To Bind Cuda And OpenCV How To Bind Cuda And OpenCV
How To Bind Cuda And OpenCV
 
How to autorun graphic application
How to autorun graphic applicationHow to autorun graphic application
How to autorun graphic application
 
How to setup 3D printer (Ender 3 pro)
How to setup 3D printer (Ender 3 pro)How to setup 3D printer (Ender 3 pro)
How to setup 3D printer (Ender 3 pro)
 
How to set https server
How to set https serverHow to set https server
How to set https server
 
How to write code in Attiny10
How to write code in Attiny10How to write code in Attiny10
How to write code in Attiny10
 
How to set up two i2cs on Attiny841
How to set up two i2cs on Attiny841How to set up two i2cs on Attiny841
How to set up two i2cs on Attiny841
 
How to write code on MachXO2
How to write code on MachXO2How to write code on MachXO2
How to write code on MachXO2
 
K-means and X-means
K-means and X-meansK-means and X-means
K-means and X-means
 
First Step SVM
First Step SVMFirst Step SVM
First Step SVM
 
さるでも分かりたい9dofで作るクォータニオン姿勢
さるでも分かりたい9dofで作るクォータニオン姿勢さるでも分かりたい9dofで作るクォータニオン姿勢
さるでも分かりたい9dofで作るクォータニオン姿勢
 
Xaml html5
Xaml html5Xaml html5
Xaml html5
 
C# でブラウザ操作
C# でブラウザ操作C# でブラウザ操作
C# でブラウザ操作
 
PI制御を作ってみた
PI制御を作ってみたPI制御を作ってみた
PI制御を作ってみた
 
CharpTwitter
CharpTwitterCharpTwitter
CharpTwitter
 
MongoDBCSharp
MongoDBCSharpMongoDBCSharp
MongoDBCSharp
 
VisualStudinoの役に立ちそうな拡張機能をまとめてみた
VisualStudinoの役に立ちそうな拡張機能をまとめてみたVisualStudinoの役に立ちそうな拡張機能をまとめてみた
VisualStudinoの役に立ちそうな拡張機能をまとめてみた
 
2013_kougi6
2013_kougi62013_kougi6
2013_kougi6
 

Type scriptmemo