JavaScript使いのためのTypeScript実践入門
•Download as PPTX, PDF•
19 likes•5,566 views
JavaScript書ける人向けの、実践的なTypeScript入門です。 「書いて学ぶ」をコンセプトとして、TypeScriptの文法全般学べる内容にしてみました。スライド通りコピペで進めて頂ければ、10分くらいでTypeScriptの全容を知ることができると思います。 TechFeed (https://techfeed.io) 開発を行う上で得た知見 (エディタは何を使うか、WebpackやTSのメリット・デメリットなど) も盛り込んであります。 2016/8/26 html5jビギナー部主宰の勉強会で話した内容です。
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to JavaScript使いのためのTypeScript実践入門
Similar to JavaScript使いのためのTypeScript実践入門 (20)
More from Shumpei Shiraishi
More from Shumpei Shiraishi (20)
Recently uploaded
Recently uploaded (9)
JavaScript使いのためのTypeScript実践入門
- 2. 本日のアジェンダ • 自己紹介 • 書きながら学ぶTypeScript • TypeScriptを仕事で使う • TypeScriptのメリット・デメリット • まとめ • おまけ
- 3. 自己紹介 • html5jファウンダー • HTML5 Experts.jp編集長 • 株式会社オープンウェブ・テクノロジー CEO – TechFeedというサービスをやっています
- 4. TechFeed • エンジニア向けキュレーションサービス – 世界中からテック情報収集してランク付けしてます。 • 速い、深い、面白い！ • モバイルアプリはTypeScript（Angular2）で作ってます。 ぜひ使ってみてください。 http://techfeed.io
- 7. TypeScriptとは？ ES.next + 型 + α ざっくり言い過ぎると
- 8. ライブコーディング • https://goo.gl/zferqi にアクセス TypeScript Playground
- 9. ES.nextな部分を試してみる • ECMAScript6以降で導入された言語仕様は多 岐に登るが、その中でも特に仕様頻度が高い ものを紹介 – 変数 – 文字列 – 配列 – オブジェクトリテラル – デストラクチャリング – 関数 – クラス
- 10. ES.nextな部分を試してみる: 変数 • letやconstが使えます。 – let: スコープが {...} に限定された変数の定義 • varは、関数スコープしか持たない – const: 再代入不可のlet • 正直、varの出番はもうありません – ぼくらは、「基本const、たまにlet」というルールでやっ てます let a ='Hello'; const b = 'World'; b = 'Error'; // 再代入不可
- 11. ES.nextな部分を試してみる: 文字列 • テンプレート文字列 – バッククォートで囲んだ文字列内では、"${ }" を使って式を埋め込める let a ='Hello'; const b = 'World'; const c = `${a}, ${b}`;
- 12. ES.nextな部分を試してみる: 配列 • spread演算子 – 配列の中身をいい感じに展開 • for...of – 配列（正確にはイテレータ）をループ処理 let a ='Hello'; const b = 'World'; const c = `${a}, ${b}`; const d = [a, b]; const e = [1, 2, ...d]; // [1, 2, 'Hello', 'World'] e.push(...d); // [1,2,'Hello','World','Hello','World'] for (let f of e) console.log(f); // 1, 2, Hello, World
- 13. ES.nextな部分を試してみる: オブジェクトリテラル • Property Shorthand – 変数名と同名のプロパティを簡単に定義 – {a: a} みたいなのを {a} で宣言できる – 個人的には異様に便利 • Computed PropertyNames – {[式]: 値} とすることで、プロパティ名に式を使用できる • Method properties – オブジェクトのメンバーに関数を指定するのが楽になった let a ='Hello'; const b = 'World'; const c = {a, b}; // {a: Hello, b: World} const d = {[a]: a}; // {Hello: Hello} const f = { method() {} };
- 14. ES.nextな部分を試してみる: デストラクチャリング • 配列やオブジェクトの中身を変数に展開 するのがとても楽に • オブジェクトも配列も展開可能 const fullName = {firstName: 'Shumpei', lastName: 'Shiraishi'}; // Destructuring const {firstName, lastName} = fullName; const array = [firstName, lastName]; // Destructuring const [first, last] = array;
- 15. ES.nextな部分を試してみる: 関数1 • アロー関数 – ( ) => { 関数本体 } という形式で関数定義可能 – 関数本体が単一の式な場合、中括弧を省略可能 • デフォルト引数 – 関数の仮引数に「= デフォルト値」と指定することで、 引数のデフォルト値を指定可能 const sum = (a = 0, b = 0) => { return a + b; }; // 上と同義 // const sum = (a = 0, b = 0) => a + b;
- 16. ES.nextな部分を試してみる: 関数2 • Rest Parameter – 関数の最後の仮引数を「...仮引数名」とすること で、可変長引数を配列として扱うことが可能 • Spread Operator – 「...配列」とすることで、配列を関数の引数に展 開できる // 可変長引数を取る関数 const join = (s, ...rest) => [s, ...rest].join(' '); let s = ['Wor', 'ld']; // 配列を引数に展開 join('Hello,', ...s);
- 17. ES.nextな部分を試してみる: クラス • クラス定義 • コンストラクタ class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } }
- 18. ES.nextな部分を試してみる: クラス • 継承 – 親クラスのメンバーを引き継いだ新たなクラ スを作れる ...(略)... class MorningGreeter extends Greeter { greet() { return "Good morning, " + this.greeting; } }
- 19. ES.nextな部分を試してみる: async/await • Promiseベースの非同期なコードを、あたかも同期的なコードであるかのように記述できるようになる – 処理は依然として非同期なので、並列度が下がることもない – 一度使うとやめられないくらい便利。 • asyncキーワードは関数に指定する。 – 指定した関数内ではawaitを使える – async関数の戻り値はPromiseとなる • awaitキーワードは、Promiseを返す関数呼び出しの前に付与する – Promiseを返す関数の結果を戻り値として受け取れる。 – エラーをtry-catchできる。 • TypeScriptのコンパイルターゲットをES6にしないと使えない（Promiseやyieldが必要なので） // 指定したミリ秒待つ関数 function waitFor(millis): Promise<void> { return new Promise(resolve => setTimeout(resolve, millis)); } // 非同期関数 async function hello(seconds) { try { // awaitで、Promiseの終了を待ち合わせ await waitFor(seconds * 1000); alert('Hello'); } catch (e) {} } hello(3); // 3秒後に「Hello」が表示される
- 20. 型+αを試してみる • 型定義、型推論、ダックタイピング • ジェネリクス • クラス • 抽象クラス • インターフェース • Enum（列挙型）
- 21. 型+αを試してみる: 型定義、型推論、ダックタイピング • 「変数名: 変数の型」という記述で変数の型 を明示的に指定可能 • 型を明示的に指定しない場合も、右辺から型 推論される。 • 型のORも可能（型Aもしくは型B) let a: string ='Hello'; // 型を明示的に指定 const b = 'World'; // 型推論 b = 1; // 型が合わないためエラー // 文字列もしくは数値型 let c: string | number = 'Hello'; c = 1; // 数値も代入可能
- 22. 型+αを試してみる: 型定義、型推論、ダックタイピング • 無名の型を簡単に宣言できる • ダックタイピング – 「もしもそれがアヒルのように歩き、アヒルのように鳴く のなら、それはアヒルである」 – 宣言された型とは無関係のオブジェクトでも、インター フェースが一致していれば同じ型だとみなされる // 無名の型をアドホックに宣言 function hello(person: {name: string}): void { alert(`Hello, ${person.name}`); } // 上の型と一致するオブジェクトを引数に指定 hello({name: 'shiraishi'});
- 23. 型+αを試してみる: ジェネリクス • 型情報の一部をパラメータ化する機能 • 例えば、配列内容の具体的な型は、コー ディング時に初めて決定する // 文字列型の配列を宣言 let a: Array<string> = []; // 配列については、以下のようにも指定可能 // let a: string[] = []; a = 1; // 型が合わないためエラー // 右辺の型から、型推論も行われる let b = [1, 2, 3]; // numberの配列と推論される b = 'a';
- 24. 型+αを試してみる: クラス • アクセス修飾子 – private: そのクラス内でのみ利用可能 – protected: そのクラス、もしくは子クラスから利用可能 – public: あらゆる場所から利用可能 • コンストラクタでのプロパティ指定 – コンストラクタの仮引数に、アクセス修飾子をつけると、 クラスのプロパティ宣言を省略できる class Greeter { constructor(private greeting: string) { } greet() { return "Hello, " + this.greeting; } }
- 25. 型+αを試してみる: 抽象クラス • abstractキーワードをクラスに指定すると抽象クラス となる。 – 抽象クラスはnewできない – 抽象クラスには抽象メソッド（中身なしのメソッド）を定 義できる • 抽象クラスを継承するクラスは、抽象メソッドの実装 が求められる abstract class Greeter { constructor(private greeting: string) { } abstract greet(); } // 抽象メソッドを実装していないのでエラー class MorningGreeter extends Greeter {}
- 26. 型+αを試してみる: インターフェース • interfaceキーワードを使用すると、インターフェース を定義できる • インターフェースは全てのメソッドが抽象メソッドと なる • implementsキーワードでインターフェースを実装する クラスを作成可能 – 継承とは異なり、複数のインターフェースを実装可能 interface Greeter { greet(); } // 抽象メソッドを実装していないのでエラー class MorningGreeter implements Greeter {}
- 27. 型を試してみる: Enum（列挙型） • ひとまとまりの定数を型としてまとめら れる機能 • Enumとは異なるが、代入可能な文字列を 型として定義する機能もある // 0から始まる定数が割り振られる enum RGB {RED, GREEN, YELLOW}; // 定数値を指定することも可能 // enum RGB {RED = 1, GREEN, YELLOW}; const color: RGB = RGB.RED; // red/blue/yellowに限定した文字列型 let s: 'red' | 'blue' | 'yellow'; s = 'black';
- 28. TypeScriptを仕事で使う
- 29. TypeScriptを仕事で使う • 仕事で使う、とは？ – 毎日書く→良いエディタが必要 – 複数人で書く→コーディングスタイルの統一 が必要 – コードが大規模→モジュール型開発 – 可能な限り自動化する→ビルドの自動化
- 30. TypeScriptを書くためのエディタ エディタ 良い点（主観） 悪い点（主観） Visual Studio Code そつなし 設定がJSON WebStorm 多機能 重い Atom そつなし 設定がGUI ファイル検索・イン デックスが重い Sublime Text （あんまり使ってない） そつなし 設定がJSON
- 31. コーディングスタイルの統一 • tslintをつかおう – コーディングスタイルについてかなり細かい レベルまで設定可能 • ESLintには敵わないが
- 32. モジュール型開発 • モジュール構文（import/export）を使用 – TypeScriptは、モジュール構文を様々なスタ イルのJavaScriptコードに変換可能 • モジュール分割すると、それをまとめ上 げる必要も生じる – →モジュールバンドラー必須
- 33. モジュールバンドラー • モジュールバンドラーで、import/exportを JSコードに変換 import {Component} from 'angular2/core' ↓ (TypeScriptコンパイラ) var Component = require('angular2/core').Component; ↓ (モジュールバンドラーがrequireをブラウザ上で使えるよう変 換) var component_1 = __webpack_require__(1);
- 34. モジュールバンドラー • TechFeedではWebpackを選択 – 実績豊富 – React界隈でのデファクト – なんでもできそう – 既に下調べが済んでいた • その他の選択肢について – Browserify…最古参 – System.js • 現在のところAngular2公式？ • 後発なため情報が少なめ • JSPMも組み合わせる必要あり？ • 参考文献 – http://webpack.github.io/docs/comparison.html – http://ilikekillnerds.com/2015/07/jspm-vs-webpack/
- 35. ビルドの自動化 • コード修正→再ビルド→（ビルド終了を 待って）ブラウザリロードを自動化する 必要がある • TechFeedではgulp+Webpackを組み合わ せ – Webpackは超多機能だが、gulpで書くほうが 楽なことも多数
- 36. 初公開！TechFeedのビルド環境 • Angular2 • Ionic • gulp • Webpack • (Cordova)
- 38. TypeScriptのメリット • 最新の言語仕様を思う存分使える • 静的型付け言語である – コンパイラによるコードの静的解析 – コードがより文書的 – ツールによるコーディング補助 • 入力補完 • リファクタリング
- 39. TypeScriptのデメリット • ツールチェインがまだ未成熟 – WebStormといえどもまだまだ • JavaScriptコードとの統合はやはりつらい – 基本的には型定義ファイル（d.ts）必要 – JSとTSの間には浅くない溝がある – なので、プロジェクトの一部をTSで…というのは厳 しい • 静的型付け言語である – 記述が冗長になりがち – JSほど気楽に書き下させない – ビルドが速くない（これはBabelでも同じだが…）