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

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

mather
June 26, 2018

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

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

mather

June 26, 2018
Tweet

More Decks by mather

Other Decks in Programming

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