はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
•
18 likes•15,796 views
オープンソースカンファレンス Hokkaido 2015 におけるセッションスライドです。
Recommended
More Related Content
What's hot
What's hot (19)
Similar to はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
Similar to はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら! (20)
More from Jun-ichi Sakamoto
More from Jun-ichi Sakamoto (20)
Recently uploaded
Recently uploaded (9)
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
- 2. はじめに
- 3. 勉強会コミュニティ & 宿泊イベント Code in 定山渓温泉
- 4. TypeScriptとは
- 6. TypeScript ファイル (拡張子 .ts) TypeScript コンパイラ (tsc コマンド) JavaScript ファイル (拡張子 .js) ※"コンパイラ"(翻訳機)ではなく、"トランスパイラ"(変換器)と呼ばれることもある。
- 9. 新しい言語で対抗しよう! • より高度・高級な仕様・機能をもつプログラミ ング言語を設計・開発! • この高機能言語でプログラムを書き、それを機 械で JavaScript に翻訳すれば、JavaScript の弱 点を克服できる! ☞ その "高機能言語" が TypeScript
- 10. このコードと、
- 11. このコード、どっちがいい?
- 15. 他と比べて TypeScript の特徴は? • 元の TypeScript コードと 1 対 1 で対応するよ うな、読みやすい JavaScript を生成します。 • jQuery や AngularJS といった、JavaScript で 書かれたライブラリも普通に使えます。 • アロー関数や class 構文など、現代の JavaScript では率直に書けない構文を提供しま すが、この構文が、来る ECMAScript 6 の構文 を先取り。 • TypeScript を学んだ経験が ES6 にも概ね活かせる!
- 16. TypeScript の開発環境
- 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-get install 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 へのコンパイル
- 23. エディタ
- 24. TypeScript を書くためのエディタ • 著名なエディタであれば大抵、 TypeScript を書くためのアドイ ンが流通しているようです。 • そのようなアドインを追加した エディタであれば何でもよいで しょう。 • もちろん統合開発環境(IDE)もオス スメ SublimeText Emacs Vim Brackets etc...
- 25. TypeScript を書くためのエディタ • なお、TypeScript 用の支援がないエディタは、 せっかくの型付言語の利点が魅力半減！ オススメしません...。
- 26. リッチ系をピックアップ
- 27. Visual Studio • 利用資格に制限があるものの、無償 で使える Community Edition がある。 • 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
- 32. デモで触れた TypeScript 構文の おさらい • class 構文 • アロー関数 • テンプレート文字列 ☞ いずれも ECMAScript6 で実現される。
- 34. いいえ。
- 36. 型は正義! • TypeScript は "静的型付言語"。 • コンパイル時に、存在しない変数やメンバを参 照していないか、また、それらの型は適合して いるか、などがチェックされます。 • 新規にプログラムを書き起こすときはもちろん、 機能の追加や変更、不具合修正で威力を発揮!
- 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 ファイル中にインラインで型 定義を書いてもいいでしょう。
- 45. Web 開発でのデバッグ作業は? • Google Chrome をはじめとした Web ブラウ ザに備え付けの、Ctrl + Shift + I 又は F12 開発 者ツールには、JavaScript デバッガが備わって います。 • この Web ブラウザの開発者ツールで、デバッ グ作業ができます。
- 46. じゃぁ、TypeScript がコンパイル して生成した JavaScript コードに 対してデバッグ作業をするの?
- 47. いいえ。
- 49. Souce Map
- 50. .mapファイルを生成すればOK! • TypeScript コンパイラは、オプションスイッ チ指定すれば、コンパイル時に source map ファイル(.map) を同時生成します。 • TypeScript の特徴のひとつ、 "元の TypeScript コードと、概ね 1 対 1 で対応する ような JavaScript コードを生成する" が、副次的に、このようなデバッグのしやすさに効 いてきます。 ※source mapという仕組み上、完璧に TypeScript コード上でのデバッグができるわけではありません。
- 52. Open Source
- 53. GitHub で 開発が進められています • Contributor License Agreement 結べば、 fork & commit & pull request できます。
- 54. CLA申請書
- 55. 2日後に返信もらう
- 56. 標準型定義ファイルについて Issue & Pull Request
- 57. しくじった。
- 58. まとめ
- 59. TypeScript はオススメ • 安全で読みやすいコードが書ける • JavaScript の上位互換なので学習投資がムダに ならない • jQuery とか AngularJS とか普通に使える • 強力なエディタ支援がある • 普通にデバッガ使える • GitHub 上で開発にかかわれる
- 60. このセッションをとおして... • JavaScript で直接書く代わりに TypeScript を 使ってコーディングする人が増えることで... • 1人でも多くの方のコーディングがより楽しい 時間になれば幸いです。
- 61. 定山渓温泉でまたお会いしましょう! ― Learn & Practice & Share ― See you!