TypeScriptをオススメする理由
Download as PPTX, PDF54 likes13,400 views
TypeScriptが好きなのでオススメする理由を考えてみた。 2015/03/30 - P33に参考にさせていただいたサイトのURLを挿入しました
![開発するために必要なもの３
チーム開発ではタスクランナーを活用
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](https://image.slidesharecdn.com/typescriptp-150327002831-conversion-gate01/85/TypeScript-54-320.jpg)
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. ご清聴ありがとうございました