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. ܕΛҙࣝ͢Δ type alias Model =
 { count : Int
 ,

    incr : Int
 }
 
 initialModel : Model
 initialModel =
 { count = 0
 , incr = 0
 } data: {
 count: 0,
 incr: 0
 } ҟͳΔܕͷ஋ΛೖྗͰ͖ͳ͍ɺଐੑΛ௥ՃͰ͖ͳ͍
  2. ܕΛҙࣝ͢Δ — アクションを受けて
 — モデルを次の値に更新する関数
 update : Msg -> Model

    -> Model — 起こりうるアクションの型
 type Msg
 = Increment
 | UpdateIncr String methods: {
 increment() { this.value += this.incr }
 } ΞΫγϣϯͷ஋ͱݱࡏͷϞσϧͷ஋͔Β
 ࣍ͷϞσϧͷঢ়ଶ͕Ұҙʹܾ·Δ
  3. ܕΛҙࣝ͢Δ view : Model -> Html Msg
 view model =


    div []
 [ input [ onInput UpdateIncr ] []
 , button [ onClick Increment ] [ text "増加" ]
 , div [] [text <| toString model.count]
 ] ModelҎ֎ͷঢ়ଶม਺͸ແ͍