Elmで関数型を意識する / Think functionally with Elm

ElmとVue.jsを比較しながら関数型言語によるエクササイズをおすすめする。

Transcript

1. ElmͰ ؔ਺ܕΛҙࣝ͢Δ 2018-06-26 ܂ാӳࢿ
2. ࣗݾ঺հ • ܂ാӳࢿ(͘Θ͸͍͚ͨ͑͢) • גࣜձࣾΞϥλφ • Node.js΍Nuxt.jsͰπʔϧ࡞ͬͨΓ • ޷͖ͳݴޠ͸Scala, Haskell • झຯɿμΠϏϯάɺυϩʔϯɺ਺ֶ
4. Elmͬͯͳʹʁ
5. http://elm-lang.org/
6. Elm • ؔ਺ܕϑϩϯτΤϯυݴޠ • ੩తܕ෇͚ • Elm Architecture • ֎෦JSͱͷ΍ΓऔΓ΋Մೳ
7. example
8. ೖྗͱΧ΢ϯτΞοϓ • Elm൛ • https://ellie-app.com/BMTPN4b5kfa1 • Vue.js൛ʢόά͋Γʣ • https://codepen.io/anon/pen/PaBOWm
9. શମߏ੒͸ࣅ͍ͯΔ WJFX NPEFM VQEBUF )5.-
   5FNQMBUF EBUB NFUIPET Elm Vue.js ΞϓϦέʔγϣϯͷߏ੒্͸͍͍ͩͨಉ͡ʹͳΔ
10. ܕΛҙࣝ͢Δ type alias Model =
 { count : Int
 , incr : Int
 }
 
 initialModel : Model
 initialModel =
 { count = 0
 , incr = 0
 } data: {
 count: 0,
 incr: 0
 } ҟͳΔܕͷ஋ΛೖྗͰ͖ͳ͍ɺଐੑΛ௥ՃͰ͖ͳ͍
11. ܕΛҙࣝ͢Δ — アクションを受けて
 — モデルを次の値に更新する関数
 update : Msg -> Model -> Model — 起こりうるアクションの型
 type Msg
 = Increment
 | UpdateIncr String methods: {
 increment() { this.value += this.incr }
 } ΞΫγϣϯͷ஋ͱݱࡏͷϞσϧͷ஋͔Β
 ࣍ͷϞσϧͷঢ়ଶ͕Ұҙʹܾ·Δ
12. ܕΛҙࣝ͢Δ view : Model -> Html Msg
 view model =
 div []
 [ input [ onInput UpdateIncr ] []
 , button [ onClick Increment ] [ text "増加" ]
 , div [] [text <| toString model.count]
 ] ModelҎ֎ͷঢ়ଶม਺͸ແ͍
13. ࢀরಁաੑΛҙࣝ͢Δ • ೖྗͱग़ྗͷܕͰࢀরಁաੑΛҡ࣋ • ݱࡏ࣌ࠁऔಘͳͲ෭࡞༻ͷ͋Δؔ਺΋͋Δ • ಛผѻ͍͕ඞཁ • ίϯύΠϧ͕௨Ε͹ܕͷҧ͍ʹΑΔόά͕ແ ͍͜ͱ͕อূͰ͖Δ
14. Elmͷ࢖͍ॴ • ܕΛ͖ͬͪΓҙࣝͯ͠όάͷͳ͍ΞϓϦέʔγϣ ϯΛ࡞Δͱ͖ • ୈҰڃؔ਺ͷѻ͍Λ΋ͬͱચ࿅͍ͤͨ͞ͱ͖ • JavaScriptͰ΋ͬͱ៉ྷͳίʔυΛॻͨ͘Ί • ϥϑͳͷ΋͍͍͚Ͳɺͨ·ʹυMʹͳΓ͍ͨͱ͖
15. ElmΦεεϝͰ͢ɻ
16. ͋Γ͕ͱ͏͍͟͝·ͨ͠