Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

TypeScriptをオススメする理由

TypeScriptが好きなのでオススメする理由を考えてみた。

2015/03/30 - P33に参考にさせていただいたサイトのURLを挿入しました

  • Identifiez-vous pour voir les commentaires

TypeScriptをオススメする理由

  1. 1. ありがとうございます!  資料を作るに当たり参考にさせていただきました。
  2. 2. 自己紹介 仲 裕介(なかゆうすけ)Yusuke Naka Twitter : @Tukimikage
  3. 3. 今日の流れ altJSの概要を知る TypeScriptをオススメする理由を知る TypeScriptを知る TypeScript開発に必要な環境を知る TypeScriptが書きたくなる
  4. 4. 今日の流れ altJSの概要を知る TypeScriptをオススメする理由を知る TypeScriptを知る TypeScript開発に必要な環境を知る TypeScriptが書きたくなる
  5. 5. altJSの概要を知る
  6. 6. Webは進化している  Webは文書を作成、閲覧する技術として登場 1992 CERN 1993 NTT
  7. 7. Webは進化している  HTML5の登場でアプリとしての役割を担うようになる Googleドキュメント (オフィス) BioDigital Human (教育)
  8. 8. JavaScriptの進化は緩やか  進化はエンジン次第 • JavaScript Interpreter(engine) • JavaScriptコードを実行する • ブラウザベンダ毎に異なる • ECMAScriptという共通仕様にもとづ いて実装されている ブラウザの主要構成要素 引用元:http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
  9. 9. 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仕様として、大規模開発を意識した様々な 機能拡張を実施する
  10. 10. 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/
  11. 11. JavaScriptの進化は緩やか  WebとJavaScriptの進化にはギャップが・・・
  12. 12. WebとJavaScript 進化のギャップを埋める手段としてaltJSが登場 GAPを埋めるにゃん http://nobuya-yoshida.sblo.jp/article/37330329.html
  13. 13. 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/
  14. 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/ 今回はこの3つについて紹介
  15. 15. 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
  16. 16. TypeScript 特徴 ・JavaScript(ECMAScript5ベース)を拡張した仕様で、 ECMAScript6の仕様も取り入れている ・静的型付け言語(型推論有り) ・JavaやC#をベースに言語機能が豊富 ・出力されるJavaScriptとはほぼ1:1、 コメントも含めて出力されるので可読性が高い ・既存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
  17. 17. Haxe 特徴 ・汎用プログラミング言語(オブジェクト指向) ・JavaScript、ActionScript、C++、C#、Java、PHPへの変 換が可能 ・厳格な静的型付け言語(動的型付けも可) ・言語機能が豊富 ・出力されるJSファイルが1つ ・既存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
  18. 18. まとめ:altJSの概要を知る  WebとJavaScriptの進化のギャップを埋める手段として、2010年ごろか ら登場し始めた  それ以前に存在していた汎用プログラミング言語もJavaScriptへの対応を 契機にaltJSとして括られる  JavaScriptを生成する中間言語と、その他の言語への変換にも対応する汎 用言語の2種類がある  規模が大きくなっても効率よく開発できる様々な工夫  クラス機構や静的型付け等  沢山あってどれがいいか迷う
  19. 19. 今日の流れ altJSの概要を知る TypeScriptをオススメする理由を知る TypeScriptを知る TypeScript開発に必要な環境を知る TypeScriptが書きたくなる
  20. 20. TypeScriptをオススメする理由を知る
  21. 21. 何を使えばいいか分からない http://free-photos.gatag.net/ altJSはたくさん種 類があるし・・・・
  22. 22. そうです、みんな迷います
  23. 23. http://free-photos.gatag.net/ 決めの問題です!
  24. 24. 面倒な比較表なんか作りません
  25. 25. http://free-photos.gatag.net/ 私は自信を持って TypeScriptをオススメします!
  26. 26. TypeScriptをオススメする理由1  学習コストが低い  JavaScript初心者にやさしい ○ コンパイル時に多くのバグを検出できる  例えば、未宣言変数の警告を行う“strict mode”と同じことが実行時ではなく、コンパイル 時に出来る ○ JavaやC#と同じくクラスベースオブジェクト指向言語  JavaScriptはprototypeベースのオブジェクト指向言語・・ちょっと変 ○ TypeScriptと変換後のJavaScriptを見比べることで、JavaScriptの一般 的なイディオムを身につけることが可能  JavaScriptをちゃんと書くって意外と大変・・・
  27. 27. TypeScriptをオススメする理由1  学習コストが低い  JavaScript初心者にやさしい var Hello; (function (Hello) { function world() { console.log('Hello World'); } Hello.world = world; })(Hello || (Hello = {})); JavaScript
  28. 28. TypeScriptをオススメする理由1  学習コストが低い  JavaScript初心者にやさしい module Hello { export function world(){ console.log('Hello World'); } } TypeScript
  29. 29. TypeScriptをオススメする理由2  学習コストが低い  JavaScript経験者にやさしい ○ 言語仕様の大半はJavaScriptを踏襲している  ちょっと便利な機能や制約がついたJavaScriptぐらいのイメージで書ける ○ 構文の多くはECMAScript5に準じたものか6を先取りしたもの ○ DOM操作についてもJavaScriptから使う場合とほぼ同じ
  30. 30. TypeScriptをオススメする理由3  生産効率が高い  機能分割がやりやすいためチーム開発に向いている ○ 内部module機能:名前空間を容易に分割することが可能 ○ 外部module機能:import構文にて外部モジュールを利用可能 「CommonJS」、「AMD」形式に対応
  31. 31. TypeScriptをオススメする理由3  生産効率が高い  静的型付けにより高精度なコード補完、開発支援機能等が実現可能 ○ Microsoft製だけあってVisualStudioはオフィシャルサポート ○ JetBrains製IDE(WebStorm等)も手厚くサポート
  32. 32. TypeScriptをオススメする理由3  生産効率が高い  型推論による静的型付けを導入しても損なわれない記述性 // Javaの場合 // 型の省略は出来ない String str = “hello”; //TypeScriptの場合 // 型のを省略可能 var str = "hello"; var str: string = "hello"; 参考にさせていただいたサイト:http://mzsm.me/2014/12/23/advent-calendar-2014-typescript/
  33. 33. TypeScriptをオススメする理由3  生産効率が高い  SouceMap対応でブラウザ上でのデバッグも可能  AngularJS等のMV○○フレームワークと組み合わせ利用可能  既存JavaScriptライブラリを有効活用 ○ 型定義ファイルを用意することで既存コードに対して型チェック機能が 働く ○ 型定義ファイルは公式リポジトリからダウンロード可能
  34. 34. TypeScriptを進める理由3  生産効率が高い  既存JavaScriptライブラリを有効活用 ○ 型定義ファイルは公式リポジトリからダウンロード可能 TypeScript Definition manager for DefinitelyTyped
  35. 35. TypeScriptを進める理由3  生産効率が高い  既存JavaScriptライブラリを有効活用 ○ 型定義ファイルは公式リポジトリからダウンロード可能 あなたもコミッター! 新しいライブラリは習熟を兼ねて型定義ファイルを書こう!
  36. 36. TypeScriptをオススメする理由4  保守性が良い  静的型付け言語なので変化を恐れない堅牢なコードが書ける ○ コンパイル時に行う型の整合性チェックが未知のバグを防ぐ ○ “strict mode”と合わせて、”—noImplicitAny”をコンパイラにつけるこ とで、any型を禁止してより厳格な言語仕様にすることも可能 ○ 特にリファクタリングや機能追加時に威力を発揮する ○ テストを用意せずともある程度の品質が担保できる (もちろんあるに越したことはない)
  37. 37. TypeScriptをオススメする理由4  保守性が良い  TypeScriptとほぼ1:1に対応するJavaScriptコードを生成 ○ 生成後のコードで簡単にデバッグすることが出来る ○ コメントまで含めて出力される ○ TypeScriptの利用を辞めた場合でも、そのままメンテナンスが出来る ○ 実行時に別途ランタイムを必要としないため、コードサイズが膨らまな い
  38. 38. TypeScriptをオススメする理由5  ECMAScript6に準拠  次世代のJavaScriptの仕様を基に設計されているため、修得するた めにかけた学習コストが無駄にならない(はず)
  39. 39. まとめ:TypeScriptをオススメする理由  TypeScriptは・・・  学習コストが低い ○ JavaScript初心者、JavaScript経験者にオススメ  生産効率が高い ○ チーム開発に向いている  保守性が良い ○ 万が一TypeScriptを捨ててもなんとかなる安心感  ECMAScript6に準拠 ○ 未来志向、学習コストが無駄にならない
  40. 40. 今日の流れ altJSの概要を知る TypeScriptをオススメする理由を知る TypeScriptを知る TypeScript開発に必要な環境を知る TypeScriptが書きたくなる
  41. 41. TypeScriptを知る
  42. 42. TypeScriptの機能  とてもじゃないけどここでは紹介しきれないので・・ TypeScript handbook(公式) • http://www.typescriptlang.org/Handbook • 最新版1.4の情報あり
  43. 43. TypeScriptの機能  とてもじゃないけどここでは紹介しきれないので・・ TypeScript handbook(公式) • http://www.typescriptlang.org/Handbook • 最新版1.4の情報あり
  44. 44. TypeScriptの機能  とてもじゃないけどここでは紹介しきれないので・・ TypeScript Quick Guid(日本語) • http://phyzkit.net/typescript/ • 情報は古く0.9ベースだが、ベーシックな機能は網羅している
  45. 45. TypeScriptの機能  とてもじゃないけどここでは紹介しきれないので・・ TypeScript Quick Guid(日本語) • http://phyzkit.net/typescript/ • 情報は古く0.9ベースだが、ベーシックな機能は網羅している
  46. 46. 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 • オススメ本!
  47. 47. TypeScriptの機能  とてもじゃないけどここでは紹介しきれないので・・ TypeScriptリファレンス Ver.1.0対応(日本語書籍) • 著者のわかめさん (https://twitter.com/vvakame)は日本の TypeScriptエバンジェリスト的な人
  48. 48. 今日の流れ altJSの概要を知る TypeScriptをオススメする理由を知る TypeScriptを知る TypeScript開発に必要な環境を知る TypeScriptが書きたくなる
  49. 49. TypeScript開発に必要な環境を知る
  50. 50. 開発するために必要なもの1  tsc(typescript compiler)  コンパイラ  インストールにはnode.jsが必要  セルフホスティング(TypeScriptで 書かれている)なので、OSに依存せ ずどの環境でも動く  遅いと有名だったが、1.1からいくら か改善 // インストール $ npm install typescript // コンパイル $ tsc hello.ts
  51. 51. 開発するために必要なもの2  tsd(typescript definiteiy)  型定義ファイル管理ツール  型定義ファイルの検索、インストー ル、構成管理ができる  ツールを使わずに手動でやっても大 丈夫 // インストール $ npm install tsd // 設定ファイル(tsd.json)作成 $ tsd init // 型定義ファイル検索 $ tsd search jquery // 型定義ファイルインストール $ tsd query jquery –s -a install
  52. 52. 開発するために必要なもの2  型定義ファイルの利用方法 /// <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
  53. 53. 開発するために必要なもの3  チーム開発ではタスクランナーを活用 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
  54. 54. 開発するために必要なもの3  IDEサポート  Visual Studio ○ http://codezine.jp/article/detail/8421  WebStorm ○ http://qiita.com/hkusu/items/54af02c93fda7996788c
  55. 55. まとめ:TypeScript開発に必要な環境を知る  必要なツールは2つだけ  tsc(コンパイラ)  tsd(型定義ファイル管理ツール)  node.jsでパッケージ管理  タスクランナーを活用してチームの開発環境を共通化  grunt、gulpで利用可能  IDEサポート  VisualStudioとWebStormでは手厚いサポートが受けられる
  56. 56. 今日のまとめ altJSの概要を知る TypeScriptをオススメする理由を知る TypeScriptを知る TypeScript開発に必要な環境を知る TypeScriptが書きたくなる
  57. 57. 今日のまとめ altJSの概要を知る TypeScriptをオススメする理由を知る TypeScriptを知る TypeScript開発に必要な環境を知る TypeScriptが書きたくなる
  58. 58. TypeScript書いてみたいと思っ た人手を上げて!
  59. 59. ご清聴ありがとうございました

×