Slide 1
Slide 1 text
Flowtype
による
コンポー
ネント指向に
おける型の入手
@joe_re
Slide 2
Slide 2 text
Who am I?
twitter: @joe_re
github: @joere
working in freee.K.K
Slide 3
Slide 3 text
What is Flowtype?
Facebook
が作ったstatic type checker
JavaScript
の世界に静的な型チェックを導入できる
OCaml
製
Slide 4
Slide 4 text
特徴
ファル変更を監視して、
依存関係のあるものだけを
チェックするので2
度目以降のコンパイルが爆速
強力な型推論
提供するのは型付け用のシンタックスと、
その解析と補完
のみ(Not AltJS)
Slide 5
Slide 5 text
今日話すこと
型推論マジで強力
flux
と組み合わせた例
Webpack
のCSS Loader
に対応させる
vs Typescript(
おまけ)
Slide 6
Slide 6 text
どれだけ型推論が強力
かというと
Slide 7
Slide 7 text
強力な型推論 ①
/
/ @
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
Slide 8
Slide 8 text
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
>
Slide 9
Slide 9 text
ちなみにts
ではエラー
にならない
（
まぁjs
の文法上はエラー
じゃないし）
$
n
o
d
e
> '
H
e
l
l
o
, W
o
r
l
d
' * 1
0
N
a
N
Slide 10
Slide 10 text
強力な型推論②
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
Slide 11
Slide 11 text
チェックすればエラー
にならない
/
/ @
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
!
Slide 12
Slide 12 text
かしこい。。！！
Slide 13
Slide 13 text
ちなみに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
>
Slide 14
Slide 14 text
With Flux!
Slide 15
Slide 15 text
Sample Application
雑なElectron
製のPomodoroTimer
https://github.com/joere/pomododesuka
Slide 16
Slide 16 text
※ with flux
と言いつつ例ではRedux
を使っていますが、
その他のflux
実装にも応用できると思うのでご容赦ください
Slide 17
Slide 17 text
Actions
Slide 18
Slide 18 text
Actions
Slide 19
Slide 19 text
Reducer
Slide 20
Slide 20 text
Reducer
Slide 21
Slide 21 text
Reducer
Slide 22
Slide 22 text
Reducer
Slide 23
Slide 23 text
Component
Slide 24
Slide 24 text
Component
Slide 25
Slide 25 text
Component
Slide 26
Slide 26 text
Component
Slide 27
Slide 27 text
Component
Slide 28
Slide 28 text
デモ
Slide 29
Slide 29 text
With Webpack
and
CSS Loader
Slide 30
Slide 30 text
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
した際の型を指定
Slide 31
Slide 31 text
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
;
}
Slide 32
Slide 32 text
vs TypeScript
(
おまけ)
Slide 33
Slide 33 text
TypeScript is a
language but Flowtype
is just a syntax checker
Slide 34
Slide 34 text
あくまでsyntax checker
なのでjs
のシンタックスの拡張はし
ない
TypeScript
にあるようなscope
定義や、
Constructor
で受け取った値を自動でClass
のproperty
にす
るような独自記法は存在しない
その分babel
と共にあるのでどこまでもesnext
の世界で戦え
るとも言える
//@flow
と書けばflow
が有効になるし、
書かなければそのままなだけなので手軽に始められる
Slide 35
Slide 35 text
TypeScript's types are nullable,
but Flowtype's types are
nonnullable by default
Slide 36
Slide 36 text
Flowtype
の型はデフォルトでnonnullable
(
冒頭の紹介の通り)
Typescript
はnonnullable type
を提供していない
2.0
からサポー
トする
https://github.com/Microsoft/TypeScript/pull/7140
マー
ジ済みなので、
最新リポジトリでstrictNullChecks
と
target es6
を有効にすれば今でも動く
Slide 37
Slide 37 text
TypeScript has many
definitions for library!
but Flowtype is...
Slide 38
Slide 38 text
Typescript
には多数のライブラリの型定義情報が蓄積されて
いるが、Flowtype
はまだまだ揃っていない
公式に型定義のリポジトリはある
https://github.com/flowtype/flowtyped
d.ts
に対応させたい気持ちはある
https://github.com/facebook/flow/issues/7
d.ts AST > Babylon AST > codegen
これできれば一発当てられそう感
Slide 39
Slide 39 text
まとめ
Slide 40
Slide 40 text
TypeScript
もいいけど
Flowtype
も
かなりイケてるぞ
Slide 41
Slide 41 text
ありがとうございました！