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

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

Modern Web App LT!（freee x WACUL） LT資料

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. ありがとうございました！