Embed Size (px)
Citation preview
React+TypeScriptもいいぞ
2016/11/28 フロントエンドエンジニア部 創立ビアバッシュ<会小川 充(mitsuruog)
自己紹介
● 小川 充（mitsuruog）
● 株式会社ギブリー リードフロントエンドエンジニア
● ng-japan
○ 普段はAngularな人
○ ガルパンおじさん
● Blog: http://blog.mitsuruog.info/
● Github: https://github.com/mitsuruog
なにをしているのか？
2017/01 全面リニューアル予定
http://codeprep.jp/
CODEPREP リニューアル
● PHP
● Frontend: React+TypeScript(1.8)+Flux
● Backend: Scala
周辺ツールなど
● Build - Webpack
● UnitTest - karma + jasmine + enzyme
○ https://github.com/airbnb/enzyme
● Lint - TSLint + tslint-react
○ https://palantir.github.io/tslint/
○ https://github.com/palantir/tslint-react
● Deploy - CircleCI + Github hook で自動デプロイ
● Error Tracking - Rollbar
○ https://rollbar.com/
実際使ってみてどうだったか？
で、実際に使ってみてどうだったのか？
● 使う前に考えていたこと
○ ポジティブ
■ 強力な型チェックによる 完全な型セーフな世界 ！
○ ネガティブ
■ 型定義が面倒ではないか？
■ 既存のFrontendのツールチェーンと共存できるか？
■ テストカバレッジがうまく取得できるか？
で、実際に使ってみてどうだったのか？
● 強力な型チェックによる完全な型セーフな世界！
○ コンパイル時に型エラーを検出できるのは偉大。
○ IDEの補助も得られる。
で、実際に使ってみてどうだったのか？
● 強力な型チェックによる完全な型セーフな世界！
○ ただ、完全ではない。
■ [as any] [null] を使うケースに必ず遭遇する。
で、実際に使ってみてどうだったのか？
● 型定義が面倒ではないか？
○ 面倒なことは面倒だが、TypeScriptには型推論機能があるため少し軽減される。
○ ただ、サードパーティ製のライブラリと組み合わせる場合は、型を探すのが面倒。
■ 型定義ファイルが使えない場合もある。
で、実際に使ってみてどうだったのか？
● 既存のFrontendのツールチェーンと共存できるか？
○ とりあえず、Webpackのエコシステムに乗る。
○ TypeStrong/ts-loader: TypeScript loader for webpack https://github.com/TypeStrong/ts-loader
● テストカバレッジがうまく取得できるか？
○ うまく取得できていない。。。（調査中）
で、実際に使ってみてどうだったのか？
● 使う前に考えていたこと
○ ポジティブ
■ 強力な型チェックによる 完全な型セーフな世界 ！
○ ネガティブ
■ 型定義が面倒ではないか？
■ 既存のFrontendのツールチェーンと共存できるか？
■ テストカバレッジがうまく取得できるか？
TypeScript導入の効果は複利のようなもの
コードサンプル例
● Component
● Componentの継承
● Stateless functional component
Component
● 内部Stateを持つもの。
● React.Component<P, S>を継承
する。○ PはProps、SはState
● Stateの初期化はコンストラクタ
内で行う。
import * as React from "react";
interface IHelloProps { userId: number;}
interface IHelloState { name: string;}
class Hello extends React.Component<IHelloProps, IHelloState> { constructor(props: IHelloProps) { super(props); this.state = { name: "mitsuruog", }; }}export default Hello;
Componentの継承
● 共通機能を親クラスに分離す
る。
● PropsやStateも共通なものは分
離して継承する。 画面A 画面B 画面C
画面共通
Componentの継承(子Component側)
import * as React from "react";
interface IHelloProp extends IBaseProp {}
interface IHelloState extends IBaseState { name: string;}
export default class Hello extends Base<IHelloProp, IHelloState> { constructor(props: IHelloProp) { super(props); // 親Componentで初期化したStateとmergeする this.state = Object.assign({}, this.getInitialStates(), { name: "", }); }}
● 親Componentを継承して、PropsとStateも継承する。
Componentの継承(親Component側)
import * as React from "react";
export interface IBaseProps { userId: number; }export interface IBaseState { isRender: boolean; }
export default class Base<P extends IBaseProps, S extends IBaseState> extends React.Component<P, S> {
constructor(props: P) { super(props as P); }
// 継承先でStateを初期化するための細工、getInitialStateではなくgetInitialState[s] // getInitialStateはReact.Componentでサポートしていないので警告が出る protected getInitialStates() { return { isRender: false } as IBaseState as S; }}
● 親Components内では子Componentの型<P, S>を利用する。
Stateless functional component
● 内部Stateを持たないもの。
● Pureなfunctionを利用する。
● argumentsにProps型を指定す
る。
import * as React from "react";
export interface IGreetingProps { name: string;}
export default function Greeting({ name }: IGreetingProps) { return ( <div>Hello {name}</div> );}
開発時に工夫しているポイント
● Code自動生成
● Component catalog
Stateless functional component
増加問題
（現在54個。たぶん2倍以上になる）
Code自動生成
● inquirer + mustacheを使って自作○ Angularと心中する - @Quramy https://quramy.github.io/spa-knowhow-note/#/23
● 次のScaffoldを生成○ Component本体の.tsx
○ ComponentとついとなるBEMの.scss
○ UnitTest用の.spec
○ Component catalog用の定義ファイル.styleguide(後述)
Component catalog
● mustacheを使って自作○ styleguide用の定義ファイルからCatalogを自動生成。
○ TypeScriptのInterface型定義を取り出して再利用できると尚良い。（誰か教えて）
まとめ
まとめ
● TypeScript導入の効果は複利のようなもの
○ 大規模で期間が長いほど効果が高い。
○ 完全ではないが、無い時代と比べると。。。ry)
● 環境構築の敷居は高め
○ とはいえ、これは昨今のFrontend全般で言えること。
● Stateless functional componentが多くなるので工夫しよう
○ Code自動生成
○ Component catalog
新規構築であればTypeScript導入を検討する価値は十分ある
ありがとうございました！
一緒にCODEPREP盛り上げてくれる仲間も募集中です！！https://www.wantedly.com/projects/66283
参考
● React + Redux + TypeScript でWebアプリを作った感想・勉強法と Angular との比較 - Qiita
○ http://qiita.com/star__hoshi/items/34eb4ccafcfa100b5cad
● TypeScript1.6 + React 書いてみてハマったポイントとか - Qiita
○ http://qiita.com/Linda_pp/items/ff0feac7e34a65657b3c
● React JSX with TypeScript(1.6) - Qiita
○ http://qiita.com/Quramy/items/70f97e68d21859d91ed8
● React & Webpack · TypeScript
○ https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
