ElmとVue.jsを比較しながら関数型言語によるエクササイズをおすすめする。
ElmͰؔܕΛҙࣝ͢Δ2018-06-26 ܂ാӳࢿ
View Slide
ࣗݾհ• ܂ാӳࢿ(͘Θ͍͚ͨ͑͢)• גࣜձࣾΞϥλφ• Node.jsNuxt.jsͰπʔϧ࡞ͬͨΓ• ͖ͳݴޠScala, Haskell• झຯɿμΠϏϯάɺυϩʔϯɺֶ
Elmͬͯͳʹʁ
http://elm-lang.org/
Elm• ؔܕϑϩϯτΤϯυݴޠ• ੩తܕ͚• Elm Architecture• ֎෦JSͱͷΓऔΓՄೳ
example
ೖྗͱΧϯτΞοϓ• Elm൛• https://ellie-app.com/BMTPN4b5kfa1• Vue.js൛ʢόά͋Γʣ• https://codepen.io/anon/pen/PaBOWm
શମߏࣅ͍ͯΔWJFXNPEFMVQEBUF)5.-5FNQMBUFEBUBNFUIPETElm 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 Stringmethods: { 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ΦεεϝͰ͢ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠