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

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

No content

Elmͬͯͳʹʁ

http://elm-lang.org/

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

example

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

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

ܕΛҙࣝ͢Δ type alias Model =
 { count : Int
 , incr : Int
 }
 
 initialModel : Model
 initialModel =
 { count = 0
 , incr = 0
 } data: {
 count: 0,
 incr: 0
 } ҟͳΔܕͷ஋ΛೖྗͰ͖ͳ͍ɺଐੑΛ௥ՃͰ͖ͳ͍

ܕΛҙࣝ͢Δ — アクションを受けて
 — モデルを次の値に更新する関数
 update : Msg -> Model -> Model — 起こりうるアクションの型
 type Msg
 = Increment
 | UpdateIncr String methods: {
 increment() { this.value += this.incr }
 } ΞΫγϣϯͷ஋ͱݱࡏͷϞσϧͷ஋͔Β
 ࣍ͷϞσϧͷঢ়ଶ͕Ұҙʹܾ·Δ

ܕΛҙࣝ͢Δ view : Model -> Html Msg
 view model =
 div []
 [ input [ onInput UpdateIncr ] []
 , button [ onClick Increment ] [ text "増加" ]
 , div [] [text <| toString model.count]
 ] ModelҎ֎ͷঢ়ଶม਺͸ແ͍

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

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

ElmΦεεϝͰ͢ɻ

͋Γ͕ͱ͏͍͟͝·ͨ͠