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

Transcript

1. ElmͰ ؔ਺ܕΛҙࣝ͢Δ 2018-06-26 ܂ാӳࢿ

2. ࣗݾ঺հ • ܂ാӳࢿ(͘Θ͸͍͚ͨ͑͢) • גࣜձࣾΞϥλφ • Node.js΍Nuxt.jsͰπʔϧ࡞ͬͨΓ • ޷͖ͳݴޠ͸Scala, Haskell

   • झຯɿμΠϏϯάɺυϩʔϯɺ਺ֶ
3. None

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠