Download as PDF, PPTX
Uploaded byJun-ichi Sakamoto
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
オープンソースカンファレンス Hokkaido 2015 におけるセッションスライドです。
More Related Content
Similar to はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
- 1.
- 2.
- 3. 勉強会コミュニティ & 宿泊イベント Codein 定山渓温泉
- 4.
- 5.
- 6. TypeScript ファイル (拡張子.ts) TypeScript コンパイラ (tsc コマンド) JavaScript ファイル (拡張子 .js) ※"コンパイラ"(翻訳機)ではなく、"トランスパイラ"(変換器)と呼ばれることもある。
- 7.
- 8.
- 9. 新しい言語で対抗しよう! • より高度・高級な仕様・機能をもつプログラミ ング言語を設計・開発! • この高機能言語でプログラムを書き、それを機 械でJavaScript に翻訳すれば、JavaScript の弱 点を克服できる! ☞ その "高機能言語" が TypeScript
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. 他と比べて TypeScript の特徴は? •元の TypeScript コードと 1 対 1 で対応するよ うな、読みやすい JavaScript を生成します。 • jQuery や AngularJS といった、JavaScript で 書かれたライブラリも普通に使えます。 • アロー関数や class 構文など、現代の JavaScript では率直に書けない構文を提供しま すが、この構文が、来る ECMAScript 6 の構文 を先取り。 • TypeScript を学んだ経験が ES6 にも概ね活かせる!
- 16.
- 17. TypeScript コンパイラ • TypeScriptコンパイラは、JavaScript で書かれ ています。 • TypeScript Playground では、Webブラウザ上で TypeScript コンパイラが動作しています。 • 通常は Node.js 上で TypeScript コンパイラを 実行・使用します。
- 18. TypeScript コンパイラの インストール • JavaScriptの実行エンジンである Node.js と、 そのパッケージマネージャ "npm" をお使いの PC にインストール。 • TypeScript コンパイラは、Node.js のパッケー ジとして公開されているので、npm によって インストールします。
- 19. $ sudo apt-getinstall git $ sudo apt-get install nodejs $ sudo apt-get install nodejs-legacy $ sudo apt-get install npm $ sudo npm install -g typescript@1.4 ※2015年5月時点、Uuntu Desktop 14.10 上での例。 TypeScript v.1.5はまだAlphaバージョンだったのでv.1.4を明示的に指定。 プロジェクトごとに使用するTypeScript コンパイラのバージョンが違 う場合に備え、-g なしでプロジェクトにインストールすることも。
- 20. TypeScript コンパイラの使い方 • TypeScriptコンパイラは、"tsc" というコマン ドです。 $ echo console.log('Hello, World.') > hello.ts $ tsc hello.ts $ ls -l hello.ts hello.js $ nodejs hello.js Hello, World.
- 21. Demonstration tsc コマンドによる TypeScriptから JavaScript へのコンパイル
- 22.
- 23.
- 24. TypeScript を書くためのエディタ • 著名なエディタであれば大抵、 TypeScriptを書くためのアドイ ンが流通しているようです。 • そのようなアドインを追加した エディタであれば何でもよいで しょう。 • もちろん統合開発環境(IDE)もオス スメ SublimeText Emacs Vim Brackets etc...
- 25. TypeScript を書くためのエディタ • なお、TypeScript用の支援がないエディタは、 せっかくの型付言語の利点が魅力半減！ オススメしません...。
- 26.
- 27. Visual Studio • 利用資格に制限があるものの、無償 で使える CommunityEdition がある。 • TypeScript のみならず、HTML や CSS など Web アプリ開発全般に強 い。 • 良くも悪くもオールインワンパッ ケージ。Visual Studio をインストー ルすれば TypeScipt 環境も出来上が る。 • Windows OS 上でしか動作しない。
- 28. WebStorm • Windows /MacOS / Linux 上で動作 する統合開発環境。 • TypeScript のみならず、HTML や CSS など Web アプリ開発全般に強 い。 • 有償。30日間 試用可能。
- 29. Atom • Windows /MacOS / Linux 上で動作 するテキストエディタ。 • GitHub 主導で開発。オープンソース。 無償で利用可能。 • 豊富なアドイン(パッケージ)が流通。 • テキストエディタと言いながら起動 が激重とのもっぱらの評判
- 30. Atom による TypeScript環境構築 • 以下のアドイン(パッケージ)をAtomにインス トールすればOK! •atomcomplete-plus •linter •atom-typescript
- 31.
- 32. デモで触れた TypeScript 構文の おさらい •class 構文 • アロー関数 • テンプレート文字列 ☞ いずれも ECMAScript6 で実現される。
- 33.
- 34.
- 35.
- 36. 型は正義! • TypeScript は"静的型付言語"。 • コンパイル時に、存在しない変数やメンバを参 照していないか、また、それらの型は適合して いるか、などがチェックされます。 • 新規にプログラムを書き起こすときはもちろん、 機能の追加や変更、不具合修正で威力を発揮!
- 37.
- 38. 使えます。が、"型定義" が必要！ • そのJavaScript ライブラリに、どんなメンバ や引数を持つ、どんな型のグローバルオブジェ クトや関数があるのかがわからないと、 TypeScript コンパイラはコンパイルができま せん。
- 39. "型定義" ファイルの登場 • そこで、TypeScriptの構文で型情報のみを記 述した "専用のテキストファイル" を作ってお き、これを参照してコンパイルする仕組みがあ ります。 • その "専用のテキストファイル" が "型定義" ファイルです。 • JavaScript のファイル名+".d.ts" という命名規 則 • 例) "jquery.d.ts"
- 40. "型定義" ファイルの入手方法 • 著名なJavaScript ライブラリには、既に誰か が TypeScript 用型定義ファイルを作成・公開s してくれてます。 • 型定義ファイルの集積所が DefinitelyTyped。 https://github.com/borisyankov/DefinitelyTyped
- 41. "tsd" コマンド • DefinitelyTypedサイトからの型定義の取得な どを管理してくれる。 $ sudo npm install -g tsd $ tsd install jquery
- 42. Demonstration jQuery と TypeScriptを使ったプログラミング
- 43. "型定義" を書く • 型定義ファイルが作成・公開されてなくても、 自分で書けばOK •型定義ファイルといっても、型情報しか書かなかっ ただけの、ただの TypeScript です。 • "declare" 構文をマスターすれば OK • 場合によっては、.d.ts ファイルを作るまでも なく、本体の .ts ファイル中にインラインで型 定義を書いてもいいでしょう。
- 44.
- 45. Web 開発でのデバッグ作業は? • GoogleChrome をはじめとした Web ブラウ ザに備え付けの、Ctrl + Shift + I 又は F12 開発 者ツールには、JavaScript デバッガが備わって います。 • この Web ブラウザの開発者ツールで、デバッ グ作業ができます。
- 46. じゃぁ、TypeScript がコンパイル して生成した JavaScriptコードに 対してデバッグ作業をするの?
- 47.
- 48.
- 49.
- 50. .mapファイルを生成すればOK! • TypeScript コンパイラは、オプションスイッ チ指定すれば、コンパイル時にsource map ファイル(.map) を同時生成します。 • TypeScript の特徴のひとつ、 "元の TypeScript コードと、概ね 1 対 1 で対応する ような JavaScript コードを生成する" が、副次的に、このようなデバッグのしやすさに効 いてきます。 ※source mapという仕組み上、完璧に TypeScript コード上でのデバッグができるわけではありません。
- 51.
- 52.
- 53. GitHub で 開発が進められています • ContributorLicense Agreement 結べば、 fork & commit & pull request できます。
- 54.
- 55.
- 56. 標準型定義ファイルについて Issue & PullRequest
- 57.
- 58.
- 59. TypeScript はオススメ • 安全で読みやすいコードが書ける •JavaScript の上位互換なので学習投資がムダに ならない • jQuery とか AngularJS とか普通に使える • 強力なエディタ支援がある • 普通にデバッガ使える • GitHub 上で開発にかかわれる
- 60. このセッションをとおして... • JavaScript で直接書く代わりにTypeScript を 使ってコーディングする人が増えることで... • 1人でも多くの方のコーディングがより楽しい 時間になれば幸いです。
- 61. 定山渓温泉でまたお会いしましょう! ― Learn &Practice & Share ― See you!