JavaScript使いのためのTypeScript実践入門

1. JavaScript使いのための TypeScript実践入門 2016/08/24 株式会社オープンウェブ・テクノロジー白石俊平

2. 本日のアジェンダ • 自己紹介 • 書きながら学ぶTypeScript • TypeScriptを仕事で使う • TypeScriptのメリット・デメリット • まとめ • おまけ

3. 自己紹介 • html5jファウンダー • HTML5 Experts.jp編集長 • 株式会社オープンウェブ・テクノロジー CEO – TechFeedというサービスをやっています

4. TechFeed • エンジニア向けキュレーションサービス – 世界中からテック情報収集してランク付けしてます。 • 速い、深い、面白い！ • モバイルアプリはTypeScript（Angular2）で作ってます。ぜひ使ってみてください。 http://techfeed.io

5. TechFeed http://techfeed.io http://facebook.com/techfeedapp http://twitter.com/techfeedapp 最先端が、ここにある。

6. 書きながら学ぶTypeScript

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)

37. TypeScriptのメリット・デメリット

38. TypeScriptのメリット • 最新の言語仕様を思う存分使える • 静的型付け言語である – コンパイラによるコードの静的解析 – コードがより文書的 – ツールによるコーディング補助 • 入力補完 • リファクタリング

39. TypeScriptのデメリット • ツールチェインがまだ未成熟 – WebStormといえどもまだまだ • JavaScriptコードとの統合はやはりつらい – 基本的には型定義ファイル（d.ts）必要 – JSとTSの間には浅くない溝がある – なので、プロジェクトの一部をTSで…というのは厳しい • 静的型付け言語である – 記述が冗長になりがち – JSほど気楽に書き下させない – ビルドが速くない（これはBabelでも同じだが…）

40. まとめ TypeScriptはよい言語だがちとつらい

JavaScript使いのためのTypeScript実践入門

Shumpei Shiraishi

JavaScript使いのためのTypeScript実践入門