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

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

Transcript

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

   View Slide

2. ࣗݾ঺հ
   • ܂ാӳࢿ(͘Θ͸͍͚ͨ͑͢)
   • גࣜձࣾΞϥλφ
   • Node.js΍Nuxt.jsͰπʔϧ࡞ͬͨΓ
   • ޷͖ͳݴޠ͸Scala, Haskell
   • झຯɿμΠϏϯάɺυϩʔϯɺ਺ֶ
   

   View Slide

3. View Slide

4. Elmͬͯͳʹʁ
   

   View Slide

5. http://elm-lang.org/
   

   View Slide

6. Elm
   • ؔ਺ܕϑϩϯτΤϯυݴޠ
   • ੩తܕ෇͚
   • Elm Architecture
   • ֎෦JSͱͷ΍ΓऔΓ΋Մೳ
   

   View Slide

7. example
   

   View Slide

8. ೖྗͱΧ΢ϯτΞοϓ
   • Elm൛
   • https://ellie-app.com/BMTPN4b5kfa1
   • Vue.js൛ʢόά͋Γʣ
   • https://codepen.io/anon/pen/PaBOWm
   

   View Slide

9. શମߏ੒͸ࣅ͍ͯΔ
   WJFX
   NPEFM
   VQEBUF
   )5.-5FNQMBUF
   EBUB
   NFUIPET
   Elm Vue.js
   ΞϓϦέʔγϣϯͷߏ੒্͸͍͍ͩͨಉ͡ʹͳΔ
   

   View Slide

10. ܕΛҙࣝ͢Δ
    type alias Model =

    { count : Int

    , incr : Int

    }

    

    initialModel : Model

    initialModel =

    { count = 0

    , incr = 0

    }
    data: {

    count: 0,

    incr: 0

    }
    ҟͳΔܕͷ஋ΛೖྗͰ͖ͳ͍ɺଐੑΛ௥ՃͰ͖ͳ͍
    

    View Slide

11. ܕΛҙࣝ͢Δ
    — アクションを受けて

    — モデルを次の値に更新する関数

    update : Msg -> Model -> Model
    — 起こりうるアクションの型

    type Msg

    = Increment

    | UpdateIncr String
    methods: {

    increment() { this.value
    += this.incr }

    }
    ΞΫγϣϯͷ஋ͱݱࡏͷϞσϧͷ஋͔Β

    ࣍ͷϞσϧͷঢ়ଶ͕Ұҙʹܾ·Δ
    

    View Slide

12. ܕΛҙࣝ͢Δ
    view : Model -> Html Msg

    view model =

    div []

    [ input [ onInput UpdateIncr ] []

    , button [ onClick Increment ] [ text "増加" ]

    , div [] [text <| toString model.count]

    ]
    ModelҎ֎ͷঢ়ଶม਺͸ແ͍
    

    View Slide

13. ࢀরಁաੑΛҙࣝ͢Δ
    • ೖྗͱग़ྗͷܕͰࢀরಁաੑΛҡ࣋
    • ݱࡏ࣌ࠁऔಘͳͲ෭࡞༻ͷ͋Δؔ਺΋͋Δ
    • ಛผѻ͍͕ඞཁ
    • ίϯύΠϧ͕௨Ε͹ܕͷҧ͍ʹΑΔόά͕ແ
    ͍͜ͱ͕อূͰ͖Δ
    

    View Slide

14. Elmͷ࢖͍ॴ
    • ܕΛ͖ͬͪΓҙࣝͯ͠όάͷͳ͍ΞϓϦέʔγϣ
    ϯΛ࡞Δͱ͖
    • ୈҰڃؔ਺ͷѻ͍Λ΋ͬͱચ࿅͍ͤͨ͞ͱ͖
    • JavaScriptͰ΋ͬͱ៉ྷͳίʔυΛॻͨ͘Ί
    • ϥϑͳͷ΋͍͍͚Ͳɺͨ·ʹυMʹͳΓ͍ͨͱ͖
    

    View Slide

15. ElmΦεεϝͰ͢ɻ
    

    View Slide

16. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide