Save 37% off PRO during our Black Friday Sale! »

Flowtypeによるコンポーネント指向における型の入手/flowtype-with-flow

 Flowtypeによるコンポーネント指向における型の入手/flowtype-with-flow

http://connpass.com/event/31305/

Modern Web App LT!(freee x WACUL) LT資料

B72422afc5f3ffc844f672b59122e16d?s=128

joe_re

June 10, 2016
Tweet

Transcript

  1. Flowtype による コンポー ネント指向に おける型の入手 @joe_re

  2. Who am I? twitter: @joe_re github: @joe­re working in freee.K.K

  3. What is Flowtype? Facebook が作ったstatic type checker JavaScript の世界に静的な型チェックを導入できる OCaml

  4. 特徴 ファル変更を監視して、 依存関係のあるものだけを チェックするので2 度目以降のコンパイルが爆速 強力な型推論 提供するのは型付け用のシンタックスと、 その解析と補完 のみ(Not AltJS)

  5. 今日話すこと 型推論マジで強力 flux と組み合わせた例 Webpack のCSS Loader に対応させる vs Typescript(

    おまけ)
  6. どれだけ型推論が強力 かというと

  7. 強力な型推論 ① / / @ f l o w f

    u n c t i o n f o o ( x ) { r e t u r n x * 1 0 ; } f o o ( ' H e l l o , w o r l d ! ' ) ; $ f l o w f l o w . j s : 5 5 : f o o ( ' H e l l o , w o r l d ! ' ) ; ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ f u n c t i o n c a l l 3 : r e t u r n x * 1 0 ; ^ s t r i n g . T h i s t y p e i s i n c o m p a t i b l e w i t h 3 : r e t u r n x * 1 0 ; ^ ^ ^ ^ ^ ^ n u m b e r
  8. OCaml 製だけあって OCaml っぽさを感じる 強力さ l e t f o

    o x = x * 1 0 ; ; # v a l f o o : i n t - > i n t = < f u n >
  9. ちなみにts ではエラー にならない ( まぁjs の文法上はエラー じゃないし) $ n o

    d e > ' H e l l o , W o r l d ' * 1 0 N a N
  10. 強力な型推論② f u n c t i o n b

    a r ( x ) { i f ( x < 1 0 ) { r e t u r n ; } r e t u r n x * 1 0 ; } c o n s o l e . l o g ( b a r ( 1 ) * 1 0 ) ; $ f l o w f l o w . j s : 8 8 : c o n s o l e . l o g ( a * 1 0 ) ; ^ u n d e f i n e d . T h i s t y p e i s i n c o m p a t i b l e w i t h 8 : c o n s o l e . l o g ( a * 1 0 ) ; ^ ^ ^ ^ ^ ^ n u m b e r
  11. チェックすればエラー にならない / / @ f l o w f

    u n c t i o n b a r ( x ) { i f ( x < 1 0 ) { r e t u r n ; } r e t u r n x * 1 0 ; } c o n s t a = b a r ( 1 ) ; i f ( a ) { c o n s o l e . l o g ( a * 1 0 ) ; } $ f l o w N o e r r o r s !
  12. かしこい。。!!

  13. ちなみにOCaml 的には こんな感じ l e t b a r x

    = i f x < 1 0 t h e n N o n e e l s e S o m e ( x * 1 0 ) ; ; # v a l b a r : i n t - > i n t o p t i o n = < f u n >
  14. With Flux!

  15. Sample Application 雑なElectron 製のPomodoroTimer https://github.com/joe­re/pomodo­desuka

  16. ※ with flux と言いつつ例ではRedux を使っていますが、 その他のflux 実装にも応用できると思うのでご容赦ください

  17. Actions

  18. Actions

  19. Reducer

  20. Reducer

  21. Reducer

  22. Reducer

  23. Component

  24. Component

  25. Component

  26. Component

  27. Component

  28. デモ

  29. With Webpack and CSS Loader

  30. Settings # f l o w c o n f

    i g [ o p t i o n s ] m o d u l e . f i l e _ e x t = . r e a c t . j s m o d u l e . f i l e _ e x t = . j s m o d u l e . n a m e _ m a p p e r . e x t e n s i o n = ' s c s s ' - > ' < P R O J E C T _ R O O T > / i n t e r f a c e / C S S M o d u l e s . j s ' / / C S S M o d u l e s . j s / / @ f l o w / / C S S m o d u l e s h a v e a ` c l a s s N a m e ` e x p o r t w h i c h i s a s t r i n g t y p e C S S M o d u l e = { [ k e y : s t r i n g ] : s t r i n g } ; c o n s t e m p t y C S S M o d u l e : C S S M o d u l e = { } ; e x p o r t d e f a u l t e m p t y C S S M o d u l e ; m o d u l e . n a m e _ m a p p e r . e x t e n s i o n = ' s c s s ' で .scss 拡張子のファイルをimport した際の型を指定
  31. Component and Style / / t i m e r

    _ t e x t . r e a c t . j s i m p o r t s t y l e f r o m ' ! s t y l e ! c s s ! s a s s ! . / t i m e r _ t e x t . s c s s ' ; e x p o r t d e f a u l t c l a s s T i m e r T e x t e x t e n d s C o m p o n e n t { r e n d e r ( ) { r e t u r n ( < d i v c l a s s N a m e = { ` t i m e r - t e x t $ { s t y l e [ " t i m e r - t e x t " ] } ` } > { t h i s . p r o p s . t i m e } < / d i v > ) ; t } } / * t i m e r _ t e x t . s c s s * / : l o c a l ( . t i m e r - t e x t ) { f o n t - s i z e : 1 0 0 p x ; m a r g i n : a u t o ; }
  32. vs TypeScript ( おまけ)

  33. TypeScript is a language but Flowtype is just a syntax

    checker
  34. あくまでsyntax checker なのでjs のシンタックスの拡張はし ない TypeScript にあるようなscope 定義や、 Constructor で受け取った値を自動でClass

    のproperty にす るような独自記法は存在しない その分babel と共にあるのでどこまでもesnext の世界で戦え るとも言える //@flow と書けばflow が有効になるし、 書かなければそのままなだけなので手軽に始められる
  35. TypeScript's types are nullable, but Flowtype's types are non­nullable by

    default
  36. Flowtype の型はデフォルトでnon­nullable ( 冒頭の紹介の通り) Typescript はnon­nullable type を提供していない 2.0 からサポー

    トする https://github.com/Microsoft/TypeScript/pull/7140 マー ジ済みなので、 最新リポジトリでstrictNullChecks と target es6 を有効にすれば今でも動く
  37. TypeScript has many definitions for library! but Flowtype is...

  38. Typescript には多数のライブラリの型定義情報が蓄積されて いるが、Flowtype はまだまだ揃っていない 公式に型定義のリポジトリはある https://github.com/flowtype/flow­typed d.ts に対応させたい気持ちはある https://github.com/facebook/flow/issues/7 d.ts

    AST ­> Babylon AST ­> codegen これできれば一発当てられそう感
  39. まとめ

  40. TypeScript もいいけど Flowtype も かなりイケてるぞ

  41. ありがとうございました!