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

3204f6241aaca4a1082bfe1202e60d69?s=47 mather
June 26, 2018

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

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

3204f6241aaca4a1082bfe1202e60d69?s=128

mather

June 26, 2018
Tweet

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