TypeScriptをオススメする理由
•Download as PPTX, PDF•
54 likes•13,366 views
TypeScriptが好きなのでオススメする理由を考えてみた。 2015/03/30 - P33に参考にさせていただいたサイトのURLを挿入しました
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to TypeScriptをオススメする理由
Similar to TypeScriptをオススメする理由 (20)
More from Yusuke Naka
More from Yusuke Naka (20)
TypeScriptをオススメする理由
- 3. 自己紹介 仲 裕介（なかゆうすけ）Yusuke Naka Twitter : @Tukimikage
- 6. altJSの概要を知る
- 9. JavaScriptの進化は緩やか 進化はエンジン次第 • JavaScript Interpreter（engine） • JavaScriptコードを実行する • ブラウザベンダ毎に異なる • ECMAScriptという共通仕様にもとづ いて実装されている ブラウザの主要構成要素 引用元：http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
- 10. JavaScriptの進化は緩やか ECMAScriptの進化はお世辞にも早いとはいえない・・・ 策定時期 名称 状況 1999年12月 ECMAScript3 最新バージョンは3.1 今もIEの旧バージョンなど一部のブラウザのJavaScriptエンジ ンのベースになっている 2000年頃 ECMAScript4→破棄 策定打ち切り 2007年頃 ECMAScript4→破棄 大規模且つ複雑なアプリ開発に対応しようとしたが、意見がま とまらず打ち切り 2009年12月 ECMAScript5 最新バージョンは5.1 StrictモードやJSONのサポート等を実施し、主要モダンブラウ ザは軒並み対応している 現在策定中 ECMAScript6 2014年末策定完了、2015年3月から公式発行スタート予定 次世代のJavaScript仕様として、大規模開発を意識した様々な 機能拡張を実施する
- 11. JavaScriptの進化は緩やか モダンブラウザのエンジンは軒並みECMAScript 5.1準拠 ブラウザ JavaScriptエンジン 準拠するECMAScript IE（IE9+） Chakra ECMA-262 5.1 Chrome（23+） V8 ECMA-262 5.1 Opera（15+） V8 ECMA-262 5.1 Firefox（21+） Spidermonkey ECMA-262 5.1 Safari（6+） Nitro ECMA-262 5.1 詳しい準拠状況：http://kangax.github.io/compat-table/es5/
- 14. altJSの比較 言語 設計/開発 登場時期 影響をうけた言語 CoffeScript Jeremy Ashkenas, et al. 2009 JavaScript,Python,Ruby,Haskell TypeScript Microsoft 2012 JavaScript,Java,C# Haxe Haxe Foundation Nicolas Cannasse 2005 ActionSctipt,OCaml Dart Google 2011 Java,C++,JavaScript,CoffeScript,G o JSX DeNA 2012 JavaScript,ActionScript 引用元：https://html5experts.jp/clockmaker/2183/
- 15. altJSの比較 言語 設計/開発 登場時期 影響をうけた言語 CoffeScript Jeremy Ashkenas, et al. 2009 JavaScript,Python,Ruby,Haskell TypeScript Microsoft 2012 JavaScript,Java,C# Haxe Haxe Foundation Nicolas Cannasse 2005 ActionSctipt,OCaml Dart Google 2011 Java,C++,JavaScript,CoffeScript,G o JSX DeNA 2012 JavaScript,ActionScript 引用元：https://html5experts.jp/clockmaker/2183/ 今回はこの３つについて紹介
- 16. CoffeScript 特徴 ・文法はRuby（Rails 3.1から採用されている） ・コード量が少なく可読性の高いコードが書ける ・動的型付け言語 ・Class機構をサポート ・既存JSライブラリをそのまま活用できる ・少人数、小規模な開発に向いている ・採用実績が多い（GitHubも大好き？） window.onload = -> countManager = new CountManager $("#btn").click -> # カウントを更新 countManager.addCount() # CSSの角度を計算 rot = countManager.getCount() * 90 # エレメントに適用 $("#effect").css("transform", "rotateX(#{rot}deg)”) class CountManager _count: 0 addCount: -> @_count++ getCount: -> return @_count CoffeScript
- 17. TypeScript 特徴 ・JavaScript（ECMAScript5ベース）を拡張した仕様で、 ECMAScript6の仕様も取り入れている ・静的型付け言語（型推論有り） ・JavaやC#をベースに言語機能が豊富 ・出力されるJavaScriptとはほぼ１：１、 コメントも含めて出力されるので可読性が高い ・既存JSライブラリ利用には型定義ファイルが必要 ・JavaScriptを知っていれば学習コストが低い ・コンパイルに時間が掛かる ・多人数・大規模開発に向く /// <reference path="jquery/jquery.d.ts" /> window.onload = ()=> { var countManager:CountManager = new CountManager(); $("#btn").click(()=> { // カウントを更新 countManager.addCount(); // CSSの角度を計算 var rot:number = countManager.getCount() * 90; // エレメントに適用 $("#effect").css("transform", "rotateX(" + rot + "deg)"); }); } class CountManager { private _count:number = 0; constructor() { } addCount() { this._count++; } getCount() { return this._count; } } TypeScript
- 18. Haxe 特徴 ・汎用プログラミング言語（オブジェクト指向） ・JavaScript、ActionScript、C++、C#、Java、PHPへの変 換が可能 ・厳格な静的型付け言語（動的型付けも可） ・言語機能が豊富 ・出力されるJSファイルが１つ ・既存JSライブラリ利用には専用IFファイルが必要 ・コンパイルが高速 ・多人数・大規模開発に向く package ; import js.Browser; import js.JQuery; class Main { static function main() { new Main(); } function new () { Browser.window.onload = init; } function init(e:Dynamic){ var countManager:CountManager = new CountManager(); new JQuery("#btn").click(function():Void { // カウントを更新 countManager.addCount(); // CSSの角度を計算 var rot:Int = countManager.getCount() * 90; // エレメントに適用 new JQuery("#effect").css("transform", "rotateX(" + rot + "deg)"); }); } } class CountManager { private var _count:Int = 0; public function new () { } public function addCount():Void { _count ++; } public function getCount():Int { return _count; } } Haxe
- 19. まとめ：altJSの概要を知る WebとJavaScriptの進化のギャップを埋める手段として、2010年ごろか ら登場し始めた それ以前に存在していた汎用プログラミング言語もJavaScriptへの対応を 契機にaltJSとして括られる JavaScriptを生成する中間言語と、その他の言語への変換にも対応する汎 用言語の２種類がある 規模が大きくなっても効率よく開発できる様々な工夫 クラス機構や静的型付け等 沢山あってどれがいいか迷う
- 23. そうです、みんな迷います
- 25. 面倒な比較表なんか作りません
- 27. TypeScriptをオススメする理由１ 学習コストが低い JavaScript初心者にやさしい ○ コンパイル時に多くのバグを検出できる 例えば、未宣言変数の警告を行う“strict mode”と同じことが実行時ではなく、コンパイル 時に出来る ○ JavaやC#と同じくクラスベースオブジェクト指向言語 JavaScriptはprototypeベースのオブジェクト指向言語・・ちょっと変 ○ TypeScriptと変換後のJavaScriptを見比べることで、JavaScriptの一般 的なイディオムを身につけることが可能 JavaScriptをちゃんと書くって意外と大変・・・
- 28. TypeScriptをオススメする理由１ 学習コストが低い JavaScript初心者にやさしい var Hello; (function (Hello) { function world() { console.log('Hello World'); } Hello.world = world; })(Hello || (Hello = {})); JavaScript
- 29. TypeScriptをオススメする理由１ 学習コストが低い JavaScript初心者にやさしい module Hello { export function world(){ console.log('Hello World'); } } TypeScript
- 30. TypeScriptをオススメする理由２ 学習コストが低い JavaScript経験者にやさしい ○ 言語仕様の大半はJavaScriptを踏襲している ちょっと便利な機能や制約がついたJavaScriptぐらいのイメージで書ける ○ 構文の多くはECMAScript5に準じたものか6を先取りしたもの ○ DOM操作についてもJavaScriptから使う場合とほぼ同じ
- 31. TypeScriptをオススメする理由３ 生産効率が高い 機能分割がやりやすいためチーム開発に向いている ○ 内部module機能：名前空間を容易に分割することが可能 ○ 外部module機能：import構文にて外部モジュールを利用可能 「CommonJS」、「AMD」形式に対応
- 32. TypeScriptをオススメする理由３ 生産効率が高い 静的型付けにより高精度なコード補完、開発支援機能等が実現可能 ○ Microsoft製だけあってVisualStudioはオフィシャルサポート ○ JetBrains製IDE（WebStorm等）も手厚くサポート
- 33. TypeScriptをオススメする理由３ 生産効率が高い 型推論による静的型付けを導入しても損なわれない記述性 // Javaの場合 // 型の省略は出来ない String str = “hello”; //TypeScriptの場合 // 型のを省略可能 var str = "hello"; var str: string = "hello"; 参考にさせていただいたサイト：http://mzsm.me/2014/12/23/advent-calendar-2014-typescript/
- 34. TypeScriptをオススメする理由３ 生産効率が高い SouceMap対応でブラウザ上でのデバッグも可能 AngularJS等のMV○○フレームワークと組み合わせ利用可能 既存JavaScriptライブラリを有効活用 ○ 型定義ファイルを用意することで既存コードに対して型チェック機能が 働く ○ 型定義ファイルは公式リポジトリからダウンロード可能
- 35. TypeScriptを進める理由３ 生産効率が高い 既存JavaScriptライブラリを有効活用 ○ 型定義ファイルは公式リポジトリからダウンロード可能 TypeScript Definition manager for DefinitelyTyped
- 36. TypeScriptを進める理由３ 生産効率が高い 既存JavaScriptライブラリを有効活用 ○ 型定義ファイルは公式リポジトリからダウンロード可能 あなたもコミッター！ 新しいライブラリは習熟を兼ねて型定義ファイルを書こう！
- 37. TypeScriptをオススメする理由４ 保守性が良い 静的型付け言語なので変化を恐れない堅牢なコードが書ける ○ コンパイル時に行う型の整合性チェックが未知のバグを防ぐ ○ “strict mode”と合わせて、”—noImplicitAny”をコンパイラにつけるこ とで、any型を禁止してより厳格な言語仕様にすることも可能 ○ 特にリファクタリングや機能追加時に威力を発揮する ○ テストを用意せずともある程度の品質が担保できる （もちろんあるに越したことはない）
- 38. TypeScriptをオススメする理由４ 保守性が良い TypeScriptとほぼ１：１に対応するJavaScriptコードを生成 ○ 生成後のコードで簡単にデバッグすることが出来る ○ コメントまで含めて出力される ○ TypeScriptの利用を辞めた場合でも、そのままメンテナンスが出来る ○ 実行時に別途ランタイムを必要としないため、コードサイズが膨らまな い
- 39. TypeScriptをオススメする理由５ ECMAScript6に準拠 次世代のJavaScriptの仕様を基に設計されているため、修得するた めにかけた学習コストが無駄にならない（はず）
- 40. まとめ：TypeScriptをオススメする理由 TypeScriptは・・・ 学習コストが低い ○ JavaScript初心者、JavaScript経験者にオススメ 生産効率が高い ○ チーム開発に向いている 保守性が良い ○ 万が一TypeScriptを捨ててもなんとかなる安心感 ECMAScript6に準拠 ○ 未来志向、学習コストが無駄にならない
- 42. TypeScriptを知る
- 43. TypeScriptの機能 とてもじゃないけどここでは紹介しきれないので・・ TypeScript handbook（公式） • http://www.typescriptlang.org/Handbook • 最新版1.4の情報あり
- 44. TypeScriptの機能 とてもじゃないけどここでは紹介しきれないので・・ TypeScript handbook（公式） • http://www.typescriptlang.org/Handbook • 最新版1.4の情報あり
- 45. TypeScriptの機能 とてもじゃないけどここでは紹介しきれないので・・ TypeScript Quick Guid（日本語） • http://phyzkit.net/typescript/ • 情報は古く0.9ベースだが、ベーシックな機能は網羅している
- 46. TypeScriptの機能 とてもじゃないけどここでは紹介しきれないので・・ TypeScript Quick Guid（日本語） • http://phyzkit.net/typescript/ • 情報は古く0.9ベースだが、ベーシックな機能は網羅している
- 47. TypeScriptの機能 とてもじゃないけどここでは紹介しきれないので・・ TypeScriptリファレンス （日本語書籍） • http://www.amazon.co.jp/dp/484433588X/r ef=pd_lpo_sbs_dp_ss_2?pf_rd_p=187205609 &pf_rd_s=lpo-top- stripe&pf_rd_t=201&pf_rd_i=4822298353&pf_r d_m=AN1VRQENFRJN5&pf_rd_r=1S66WT6P6 H5WY8FX8GF8 • オススメ本！
- 48. TypeScriptの機能 とてもじゃないけどここでは紹介しきれないので・・ TypeScriptリファレンス Ver.1.0対応（日本語書籍） • 著者のわかめさん （https://twitter.com/vvakame）は日本の TypeScriptエバンジェリスト的な人
- 51. 開発するために必要なもの１ tsc（typescript compiler） コンパイラ インストールにはnode.jsが必要 セルフホスティング（TypeScriptで 書かれている）なので、OSに依存せ ずどの環境でも動く 遅いと有名だったが、1.1からいくら か改善 // インストール $ npm install typescript // コンパイル $ tsc hello.ts
- 52. 開発するために必要なもの２ tsd（typescript definiteiy） 型定義ファイル管理ツール 型定義ファイルの検索、インストー ル、構成管理ができる ツールを使わずに手動でやっても大 丈夫 // インストール $ npm install tsd // 設定ファイル（tsd.json）作成 $ tsd init // 型定義ファイル検索 $ tsd search jquery // 型定義ファイルインストール $ tsd query jquery –s -a install
- 53. 開発するために必要なもの２ 型定義ファイルの利用方法 /// <reference path="jquery/jquery.d.ts" /> typings/tsd.d.ts /// <reference path="typings/tsd.d.ts" /> module Hello { export function world(){ console.log('Hello World'); } } main.ts
- 54. 開発するために必要なもの３ チーム開発ではタスクランナーを活用 typescript: { base: { src: [‘./src/*.ts'], dest: ‘./js/’, options: { basePath: ’./', sourceMap: true } } } grunt.loadNpmTasks('grunt-typescript'); grunt var tsc = require('gulp-typescript-compiler'); gulp.task(’tsc', function () { return gulp.src(‘./src/*.ts') .pipe(tsc({ module: '', sourcemap: true, logErrors: true })) .pipe(gulp.dest(‘./js/') ); }); gulp
- 55. 開発するために必要なもの３ IDEサポート Visual Studio ○ http://codezine.jp/article/detail/8421 WebStorm ○ http://qiita.com/hkusu/items/54af02c93fda7996788c
- 56. まとめ：TypeScript開発に必要な環境を知る 必要なツールは２つだけ tsc（コンパイラ） tsd（型定義ファイル管理ツール） node.jsでパッケージ管理 タスクランナーを活用してチームの開発環境を共通化 grunt、gulpで利用可能 IDEサポート VisualStudioとWebStormでは手厚いサポートが受けられる
- 60. ご清聴ありがとうございました