Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScript+React入門

rchaser53
December 19, 2016

 TypeScript+React入門

rchaser53

December 19, 2016
Tweet

More Decks by rchaser53

Other Decks in Programming

Transcript

  1. TypeScript + React
    入門
    @rchaser53

    View full-size slide

  2. 伝えたいこと
    静的解析があると本当に楽
    (TypeScript
    でもFlow
    でもOK)
    ゆるく導入してもメリットはある
    少しずつ学んでいく

    View full-size slide

  3. 本日のリポジトリ
    取引先のフィールドが淡々と出力されるだけのものです
    TypeScript
    で書いた際の雰囲気をお楽しみください
    https://github.com/rchaser53/TsxDemo

    View full-size slide

  4. 静的解析があると本当に楽
    N
    番煎じなので静的解析については略
    補完や構文エラーが出るのは非常に便利
    visual studio code
    優秀
    (
    好きなeditor
    を使いたいならtsserver
    で頑張ろう)

    View full-size slide

  5. 補完機能は思ったより大事
    オブジェクトの構造の把握が容易になる
    =>
    新規メンバーや臨時メンバーが入りやすい
    =>
    リファクタリングもしやすい
    interface
    を充実させれば下手なドキュメントより優秀?
    (
    エラーが出るから少なくともメンテはされる)

    View full-size slide

  6. ゆるく導入してもメリットはある
    ハードルは日に日に下がっている
    TypeScript 2
    系で設定は大分楽になった
    TypeScript 2.1.4
    でmodule
    の宣言も不要に

    View full-size slide

  7. 例1. props
    のinterface
    だけでも効果あり
    export interface Props {
    name: string
    label: string
    index: number
    }
    export class Row extends React.Component< Props, {} > {
    // 略
    }

    View full-size slide

  8. 例2.
    導入が楽なところから攻める(tsconfig
    編)
    noUnusedLocals
    使用していないローカル変数をチェックする
    noUnusedParameters
    使用していない引数をチェックする

    View full-size slide

  9. 例2.
    導入が楽なところから攻める(
    型編)
    readonly
    property
    を読取り専用にする
    export interface Circle {
    readonly radius: number
    x: number
    y: number
    }
    let circleA: CirCle = { radius: 10, x: 5, y: 5 }
    circleA.radiux = 20 // Error!
    circleA.x = 10 // ok

    View full-size slide

  10. ハードルが低く効果がわかりやすい所から
    体感してもらえないと導入しても使ってくれない
    簡単にできて、効果が実感しやすい所から攻める
    やってくれる人を少しずつ増やしていく

    View full-size slide

  11. 少しずつ学んでいく
    一から全部やろうとするから辛い
    空いた時間で少しずつ綺麗にしていく
    (
    ファイル、関数、オブジェクト単位で少しずつ)
    最初のうちは分かる物だけ使えばよい

    View full-size slide

  12. わかる機能から始める
    非常に多機能。最初から全部は辛い
    簡単なものから使っていく
    特に既存プロジェクトに一気に導入するのは辛い

    View full-size slide

  13. 皆で一斉にやらなくたっていい
    誰かまず始める
    空き時間で型を付けたり、interface
    を宣言したりする
    (2-3
    日に1
    回、2-30
    分くらいでも十分に効果あり)
    ある程度ノウハウがたまったら展開していく
    (
    コードレビューあたりを利用)

    View full-size slide

  14. 終わりに
    何事もすぐに理想の状態にはならない
    ちょっとずつ頑張っていく

    View full-size slide