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

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