30 分で分かる？TypeScript 入門VS ハッカソン倶楽部　 TypeScript 勉強会Write by 森理 麟

2

Myself

森理 麟 (@moririring)職業：ゲームプログラマHP : moririringのHPツール : VagrantWinMicrosoft MVP for Visual C#(2013.01 –2014.12)

3

MyCommunity

VSハッカソン倶楽部 + Visual Studio勉強会C++テンプレート完全ガイド読書会UnityクリエイターズIT英語勉強会ぼちぼちぼっち開発

4

TypeScript とは？

5

TypeScript とは？名前どおりなら Type(= 型 )のある (Java)Script 言語

6

関わっているのはアンダースヘルスバーグ

7

彼は Turbo Pascal, Delphi そして C# の父でもある

8

「ほら、型はしっかり付いているほうがいいんだ。だってもっと多くの誤りを早くに見つけられるから。それにコード生成も向上する。だって、プログラムで使ってる型の堅牢性を確かめるための実行時に動的なチェックが少なくてすむから。」

引用 :C#に関するアンダース ヘルスバーグへのインタビュー (2005年)

9

Q.C# のように書ける言語？

TypeScript では例えばこんなソースが出てきます。

var func1 = () => { return "fun1" };

10

A. 違う。 ECMAScript に準拠している。

ECMAScript とは JavaScriptの標準規格。 TypeScript では策定中の仕様も先取りしている。

11

C# でさっきの書き方（ラムダ式）が登場したのは 2008年。Arrow Function の説明にもちらっと C# の方がとの記述。

12

但し C# みたいに書ける言語と思って TypeScript を始めるのはなかなか厳しい道とか

13

ここまでのまとめ

TypeScript はアンダースの関わっている新しい言語TypeScript は型を強く意識した言語C# のように書ける言語ではなく ECMAScript を準拠して先の仕様も書ける言語

14

TypeScript の特徴とは？

15

公式サイト曰く

TypeScript lets you write JavaScript the way you really want to.TypeScript はあなたが本当に書きたい書き方で JavaScriptを書ける

16

公式サイト曰く

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.TypeScript は型付けされたJavaScript のスーパーセット。コンパイルで JavaScript を作る

17

公式サイト曰く

Any browser. Any host. Any OS. Open Source.オープンソースでどんなブラウザでもどんな環境でも、どんな OS でも動く。

18

ここに注目！

コンパイル出来る！

TypeScript は JavaScript を出力する仕様最適化はないけれど、先人のノウハウが詰まった JavaScriptコードを生成。JavaScript の学習素材としても非常に優秀

19

JavaScrpit が動いているソースを、TypeScript に持ってきてコンパイルすると全て動くか？

流石に無理。 TypeScript Quick Guideの作者曰く「 2 万行を移植して、 100 行に 2,3 行程度の修正」

例えば以下がエラーvar x = 0;x = "a";

20

ここに注目！

スーパーセット ( ＝上位拡張仕様 )

取得が比較的容易JS で得てきた資産も使いまわしやすい

DefinitelyTyped で有名処の JS ライブラリは殆ど使える！

JS では自作する必要がある、クラスや名前空間が使える

21

僕が気になることコンパイル出来ることは果たしてどれぐらいの人にひっかかるのか？因みに僕はイチコロ反応しているのは C# や Javaなどコンパイラ言語系の人が多いのかな？

22

ここまでのまとめ

TypeScript はコンパイル出来る静的言語TypeScript は JavaScript のスーパーセットTypeScript は JavaScritp の構文はすべて使えるけれど、そのまま動くわけではない

23

TypeScript が作られた経緯は？

24

Scalable というキーワード

TypeScript is a language for application-scale JavaScript development

TypeScrpit は JavaScript 開発者の大規模開発のための言語

↑理由はよく分からないけれど、この言葉公式からなくし中！

25

実際、 TypeScript の普及するもっともポイントとなるのがこの大規模開発というアプローチではないかと思う。JavaScript がめっちゃ使える人には TypeScript というアプローチは必要ないかもしれない。ただ大人数開発だとそうはいかず

26

Q. 本当に大規模で使えるのか？A.MS ではすでに 30 万行以上( ！ ) 書かれている

引用 :MicrosoftのVisual StudioがTypeScriptを正式サポート

27

JS の問題は色んなところで叫ばれており、いろんなアプローチがとられている。代替プログラミング言語を総称して AltJS と呼ぶ。

28

CoffeeScript 、少ない記述量で書ける。 JS を 1/3 ぐらいに出来る。

Haxe 、多くの言語に出力できる。コンパイル速い。

JSX 、 JS を高速に出来る。 10% は速くなる

Dart 、 Google が推しているブラウザで動かせる新しい言語

TypeScript 、型が厳密で JS のスーパーセット

29

今月の Goolge トレンド

30

TypeScript なら他の AltJS が勝っても ( 全部負けても ) JavaScript の綺麗なコードが残せる。スーパーセットでECMAScript の仕様を先取りしているので知識が無駄になる量も少ないどうなっても損はしない

31

今後はロードマップを見るとECMAScript6 の文字が多い

32

ここまでのまとめ

TypeScript は大規模開発向けJavaScript は大規模開発には向いておらず代行手段が色々あるAltJS は群雄割拠。でもどういう結果になっても TypeScriptをやるにはデメリットがない

33

TypeScript を使うには？

34

実際書くにはどうすれば？公式サイトNode.jsVisual Studio各種テキストエディタも対応Eclipse にも対応

35

Windows の人はやっぱりVisual Studio が一番！無料の「 Visual Studio Express 2013 for Web 」でも使える。Nuget から「 Web Essentials 」をいれると最強

36

今日のまとめ

TypeScript はアンダース・ヘルスバーグが関わっているTypeScript は JavaScript のスーパーセットでコンパイル可能TypeScript は大規模開発向け。やっておけば損はしない。TypeScript は多くの環境で開発出来るけれど Visual Studio がおススメ！

37

参考

Visual StudioユーザーのためのTypeScript入門 TypeScriptで学ぶJavaScript入門 特集：TypeScript（プレビュー版）概説モダンな言語でHTML5を開発しよう！ 俯瞰して理解する

altJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe) TypeScript + AngularJSでTodoのサンプルを書いてみた既存JavaScriptをTypeScriptとして修正する方法 C#は強い型付けの言語？それとも弱い型付けの言語？ 静的型付けでの型推論と動的型付けでの型チェック TypeScript Roadmap TypeScript超入門、Visual Studioで始めるTypeScript開発

入門 TypeScriptリファレンス（書籍）

38

ご清聴ありがとうございました