Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JSでElmを学ぶ

 JSでElmを学ぶ

F425aff2e1f934fc1e5fa95b1f933068?s=128

boiyama

March 20, 2018
Tweet

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

  6. None
  7. None
  8. ( . . ) ͸ શ ෦ e x p

    o r t ͢ Δ ͱ ͍ ͏ ҙ ຯ
  9. None
  10. None
  11. None
  12. None
  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 ͱ ͍ ͬ ͨ ༧ ໿ ޠ ͕ ແ ͍
  17. None
  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 ” ؔ ਺
  22. None
  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