JSでElmを学ぶ

Roppongi.js #1 での発表資料です。
https://roppongi-js.connpass.com/event/81528/

English ver.
https://speakerdeck.com/boiyaa/learning-elm-in-js

Transcript

1. J S Ͱ E l m Λ ֶ Ϳ 2 0 1 8 . 3 . 2 0 R o p p o n g i . j s # 1
2. • ϑϩϯτΤϯυΤϯδχΞ at PERSOL • GitHub: boiyaa
 Twitter: boiyaaaaaa
3. ͜ ͷ εϥ Π υ ͸ ElmͷίʔυΛJavaScriptͰදݱͯ͠ΈΔ͜ͱʹΑͬͯɺ • Elmͷจ๏Λ஌Δ • Elm͕΍͍ͬͯΔ͜ͱΛ஌Δ • Elmͷݴޠ࢓༷͔ΒJSͰͷॻ͖ํͷࢀߟʹ͢Δ ͜ͱ͕໨తͰ͢
4. • ϑϩϯτΤϯυ༻७ਮؔ਺ܕݴޠ • JSʹίϯύΠϧ͢Δ • ܕ҆શɺNon-nullable • ReactͷΑ͏ʹએݴతʹUIΛߏங͢Δ • Reduxಉ༷Single source of truth
5. C o u n t e r A p p
8. ( . . ) ͸ શ ෦ e x p o r t ͢ Δ ͱ ͍ ͏ ҙ ຯ
13. m o d e l Λ Ҿ ਺ ʹ औ Δ ؔ ਺
14. m s g ͱ m o d e l Λ Ҿ ਺ ʹ औ Δ Χ Ϧ ʔ Խ ͞ Ε ͨ ؔ ਺
15. Ұ ݟ ఆ ਺ ͩ ͕ Ҿ ਺ ͷ ແ ͍ ؔ ਺
16. 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 ͱ ͍ ͬ ͨ ༧ ໿ ޠ ͕ ແ ͍
18. “ V i e w ” ؔ ਺ • એݴతʹఆٛ͞ΕͨHTMLߏ଄Λฦ͢
19. E l m ͷ ؔ ਺ ద ༻ ͸ ׅ ހ ͷ ͔ Θ Γ ʹ ۭ ന Λ ࢖ ͏ શ ͯͷ ؔ ਺ ͷ Ҿ ਺ ͕ 1 ͭ ͱ ܾ · ͬͯ ͍ Δ ͷ Ͱ ղ ऍ Ͱ ͖ Δ “ V i e w ” ؔ ਺
20. J S Ͱ Χ Ϧ ʔ Խ ͢ Δ ͱ ಡ Έ ʹ͘ ͍ “ V i e w ” ؔ ਺
21. J S X ͷ ํ ͕ ݟ ΍ ͢ ͍ “ V i e w ” ؔ ਺
23. • Messages͸ൃੜͨ͠ࣄ (ReduxͰ͍͏Action) • Updateؔ਺͸Messageड৴࣌ʹݺ͹Εɺߋ৽͞ΕͨΞ ϓϦέʔγϣϯͷঢ়ଶΛฦ͢ (ReduxͰ͍͏Reducer) “ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺
24. “ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺
25. “ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺ U n i o n ܕ C a s e ࣜ
26. “ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺ σ ʔ λ ί ϯε τ ϥ Ϋ λ C a s e ࣜ U n i o n ܕ
27. “ 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 ܕ σ ʔ λ ί ϯε τ ϥ Ϋ λ
28. “ 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 ܕ ͸ ଞ ͷ ܕ ͷ η ο τ Ͱɺ ϑ Ν ʔε τ Ϋ ϥε Ͱ ͸ ͳ ͘ ɺ ύ λ ʔϯ Ϛ ο νϯ ά ͢ Δ ػ ೳ ͸ ͳ ͍
29. F o r m A p p
30. “ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺ Ҿ ਺ Λ औ Δ ͱ ه ड़ ྔ ͕ ૿ ͑ͯ ͠ · ͏ ૿ ͑Δ ౓ ω ε τ ͯ͠ ͠ · ͏
31. “ M e s s a g e s ” ͱ “ U p d a t e ” ؔ ਺ R e d u x ͷ ΍ Γ ํ
32. · ͱ Ί • JSͰElmͷݎ࿚ੑΛ࠶ݱ͢Δͷ͸ݫ͍͠ • શ͕ͯࣜΛ࠾༻ͯ͠จ΍returnΛ੍ݶͯ͠ίʔσΟϯ άύλʔϯΛݮΒ͢͜ͱ͸Ͱ͖Δ • JSΑΓTypeScript΍Flowͷํ͕ݎ࿚ੑ޲্Ͱ͖Δ͕ɺ ֎෦JSϞδϡʔϧ΍any͕͋Δ͜ͱͰElmϨϕϧ໨ࢦ͢ ͷ͸೉͍͠
33. T h a n k y o u