Tweet
Tweet

Slide 1

Slide 1 text

J S Ͱ E l m Λ ֶ Ϳ 2 0 1 8 . 3 . 2 0 R o p p o n g i . j s # 1

Slide 2

Slide 2 text

• ϑϩϯτΤϯυΤϯδχΞ at PERSOL • GitHub: boiyaa
 Twitter: boiyaaaaaa

Slide 3

Slide 3 text

͜ ͷ εϥ Π υ ͸ ElmͷίʔυΛJavaScriptͰදݱͯ͠ΈΔ͜ͱʹΑͬͯɺ • Elmͷจ๏Λ஌Δ • Elm͕΍͍ͬͯΔ͜ͱΛ஌Δ • Elmͷݴޠ࢓༷͔ΒJSͰͷॻ͖ํͷࢀߟʹ͢Δ ͜ͱ͕໨తͰ͢

Slide 4

Slide 4 text

• ϑϩϯτΤϯυ༻७ਮؔ਺ܕݴޠ • JSʹίϯύΠϧ͢Δ • ܕ҆શɺNon-nullable • ReactͷΑ͏ʹએݴతʹUIΛߏங͢Δ • Reduxಉ༷Single source of truth

Slide 5

Slide 5 text

C o u n t e r A p p

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

( . . ) ͸ શ ෦ e x p o r t ͢ Δ ͱ ͍ ͏ ҙ ຯ

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

m o d e l Λ Ҿ ਺ ʹ औ Δ ؔ ਺

Slide 14

Slide 14 text

m s g ͱ m o d e l Λ Ҿ ਺ ʹ औ Δ Χ Ϧ ʔ Խ ͞ Ε ͨ ؔ ਺

Slide 15

Slide 15 text

Ұ ݟ ఆ ਺ ͩ ͕ Ҿ ਺ ͷ ແ ͍ ؔ ਺

Slide 16

Slide 16 text

E l m ʹ ͸ ม ਺ ɺ ఆ ਺ ɺ Ϋ ϥε ͕ ͳ ͍ ͷ ͱ ɺ શ ͯ ͕ ࣜ ͳ ͷ Ͱɺ v a r, l e t , c o n s t , f u n c t i o n , re t u r n ͱ ͍ ͬ ͨ ༧ ໿ ޠ ͕ ແ ͍

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

“ V i e w ” ؔ ਺ • એݴతʹఆٛ͞ΕͨHTMLߏ଄Λฦ͢

Slide 19

Slide 19 text

E l m ͷ ؔ ਺ ద ༻ ͸ ׅ ހ ͷ ͔ Θ Γ ʹ ۭ ന Λ ࢖ ͏ શ ͯͷ ؔ ਺ ͷ Ҿ ਺ ͕ 1 ͭ ͱ ܾ · ͬͯ ͍ Δ ͷ Ͱ ղ ऍ Ͱ ͖ Δ “ V i e w ” ؔ ਺

Slide 20

Slide 20 text

J S Ͱ Χ Ϧ ʔ Խ ͢ Δ ͱ ಡ Έ ʹ͘ ͍ “ V i e w ” ؔ ਺

Slide 21

Slide 21 text

J S X ͷ ํ ͕ ݟ ΍ ͢ ͍ “ V i e w ” ؔ ਺

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

• Messages͸ൃੜͨ͠ࣄ (ReduxͰ͍͏Action) • Updateؔ਺͸Messageड৴࣌ʹݺ͹Εɺߋ৽͞ΕͨΞ ϓϦέʔγϣϯͷঢ়ଶΛฦ͢ (ReduxͰ͍͏Reducer) “ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺

Slide 24

Slide 24 text

“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺

Slide 25

Slide 25 text

“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺ U n i o n ܕ C a s e ࣜ

Slide 26

Slide 26 text

“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺ σ ʔ λ ί ϯε τ ϥ Ϋ λ C a s e ࣜ U n i o n ܕ

Slide 27

Slide 27 text

“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺ σ ʔ λ ί ϯε τ ϥ Ϋ λ ͸ ϑ Ν ʔε τ Ϋ ϥε ͷ ஋ ͱ ͯ͠ ࢖ ༻ Ͱ ͖ Δ U n i o n ܕ ͱ C a s e ࣜ Λ ࢖ ͏ ͜ ͱ ʹ Αͬͯɺ ύ λ ʔϯ Λ ໢ ཏ ͠ ͳ ͚ Ε ͹ ί ϯύ Πϧ Τ ϥ ʔ ʹ ͳ Δ C a s e ࣜ U n i o n ܕ σ ʔ λ ί ϯε τ ϥ Ϋ λ

Slide 28

Slide 28 text

“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺ ಉ ༷ ͷ ݴ ޠ α ϙ ʔ τ ͕ ͳ ͍ ͷ Ͱ J S Ͱ ද ݱ Ͱ ͖ ͳ ͍ Ty p e S c r i p t ΍ F l o w ͷ U n i o n ܕ ͸ ଞ ͷ ܕ ͷ η ο τ Ͱɺ ϑ Ν ʔε τ Ϋ ϥε Ͱ ͸ ͳ ͘ ɺ ύ λ ʔϯ Ϛ ο νϯ ά ͢ Δ ػ ೳ ͸ ͳ ͍

Slide 29

Slide 29 text

F o r m A p p

Slide 30

Slide 30 text

“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺ Ҿ ਺ Λ औ Δ ͱ ه ड़ ྔ ͕ ૿ ͑ͯ ͠ · ͏ ૿ ͑Δ ౓ ω ε τ ͯ͠ ͠ · ͏

Slide 31

Slide 31 text

“ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺ R e d u x ͷ ΍ Γ ํ

Slide 32

Slide 32 text

· ͱ Ί • JSͰElmͷݎ࿚ੑΛ࠶ݱ͢Δͷ͸ݫ͍͠ • શ͕ͯࣜΛ࠾༻ͯ͠จ΍returnΛ੍ݶͯ͠ίʔσΟϯ άύλʔϯΛݮΒ͢͜ͱ͸Ͱ͖Δ • JSΑΓTypeScript΍Flowͷํ͕ݎ࿚ੑ޲্Ͱ͖Δ͕ɺ ֎෦JSϞδϡʔϧ΍any͕͋Δ͜ͱͰElmϨϕϧ໨ࢦ͢ ͷ͸೉͍͠

Slide 33

Slide 33 text

T h a n k y o u