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

Functional Programming in Frontend Elm編

mikesorae
December 20, 2019

Functional Programming in Frontend Elm編

フロントエンドで関数型プログラミングをやりたい資料のElm編です。

Elmの概要やPros/Cons等を紹介します。

mikesorae

December 20, 2019
Tweet

More Decks by mikesorae

Other Decks in Programming

Transcript

  1. ϑϩϯτΤϯυͷͭΒΈ ! ঢ়ଶ؅ཧ ◦ ϦονUI؀ڥͰ͸ը໘্ʹ༷ʑͳঢ়ଶ͕ෳ਺ಉ࣌ʹଘࡏ͢Δ ! ඇಉظॲཧ ◦ ಛʹSPAͰ͸ϑϩϯτΤϯυΞϓϦέʔγϣϯ͔ΒόοΫΤϯυͷAPIΛݺͼग़ͯ͠λεΫΛ ࣮ݱ͢ΔͨΊɺฒߦͯ͠ෳ਺ͷඇಉظॲཧ͕ಈ͍͍ͯΔ͜ͱ͕ଟ͍

    Single State, Unidirectional Data FlowͷΑ͏ͳΞʔΩςΫνϟͱ ܧଓϞφυ΍Algebraic EffectsͳͲͷFPతΞϓϩʔνʹΑͬͯ ෳࡶੑΛԼ͛ΔऔΓ૊Έ͕૿͖͑ͯͨ ↓ ͔ͤͬ͘ͳͷͰɺ΋ͬͱؔ਺ܕ͕ॻ͖΍͍͢ݴޠͰॻ͖͍ͨʂ
  2. Χ΢ϯλʔΞϓϦͷαϯϓϧίʔυ type alias Model = { count : Int }

    initialModel : Model initialModel = { count = 0 } type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> { model | count = model.count + 1 } Decrement -> { model | count = model.count - 1 } view : Model -> Html Msg view model = div [] [ button [ onClick Increment ] [ text "+1" ] , div [] [ text <| String.fromInt model.count ] , button [ onClick Decrement ] [ text "-1" ] ] main : Program () Model Msg main = Browser.sandbox { init = initialModel , view = view , update = update }
  3. Χ΢ϯλʔΞϓϦͷαϯϓϧίʔυ type alias Model = { count : Int }

    initialModel : Model initialModel = { count = 0 } type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> { model | count = model.count + 1 } Decrement -> { model | count = model.count - 1 } view : Model -> Html Msg view model = div [] [ button [ onClick Increment ] [ text "+1" ] , div [] [ text <| String.fromInt model.count ] , button [ onClick Decrement ] [ text "-1" ] ] main : Program () Model Msg main = Browser.sandbox { init = initialModel , view = view , update = update } Model Message Update View
  4. ؆୯ͳElmͷ͸͡Ί͔ͨ ! EllieΛ࢖͏ a. https://ellie-app.com/newΛ։͘ ! Elm ReactorΛ࢖͏ a. npm

    i -g elm, elm init͢Δ b. srcʹίʔυΛॻ͘ c. elm reactorͰىಈ ! ParcelΛ࢖͏ a. https://parceljs.org/elm.htmlΛ։͘ b. parcelΛΠϯετʔϧ͢Δ c. ඞཁͳϑΝΠϧΛ࡞੒͢Δ d. ίʔυΛॻ͘ e. parcel index.htmlͰىಈ
  5. ElmͱSPA ! ElmͷΞϓϦέʔγϣϯλΠϓ͸4ͭ͋Δ ◦ sandbox ▪ HTMLཁૉ͚ͩͷ࠷খߏ੒ɻ෭࡞༻΍֎෦ͱͷ௨৴Λѻ͑ͳ͍ ◦ element ▪

    HTMLཁૉ͚͚ͩͩͲ෭࡞༻΍֎෦ͱͷ௨৴Λѻ͑Δ ◦ document ▪ elementʹՃ͑ͯHTMLͷϝλཁૉ(λΠτϧ)Λѻ͑Δ ◦ application ▪ documentʹՃ͑ͯHTMLͷϝλཁૉͱURLભҠΛѻ͑Δ -> SPA͕࡞ΕΔ ࢀߟ: https://package.elm-lang.org/packages/elm/browser/latest/Browser ը໘ͷҰ෦͚ͩElmͱ͍͏ಋೖ΋Մೳ
  6. ϖʔδͷදࣔ΍ΞΫγϣϯ΋ܕ҆શ ! ϖʔδ΍ϝοηʔδͷܕΛఆٛ ͠ɺcaseͰ෼ذ͢Δ͜ͱʹΑΓ࿙ Εͳ҆͘શʹ࣮૷͢Δ͜ͱ͕Ͱ͖ Δ type Page = Blank

    | LoginPage Login.Model | TodoPage Todo.Model | NotFoundPage NotFound.Model type Msg = LinkClicked Browser.UrlRequest | UrlChanged Url.Url | LoginMsg Login.Msg | TodoMsg Todo.Msg | NotFoundMsg NotFound.Msg
  7. ܕΫϥε͕ͳ͍ ! Show΍OrdΫϥεʹ͋ΔΑ͏ͳૢ࡞΋ඞཁʹԠͯࣗ͡લͰ࣮૷͢Δඞཁ͕͋ ΔͨΊɺ͜͜Ͱ΋ϘΠϥʔϓϨʔτίʔυ͕૿͑Δ type FooBar = Foo | Bar

    show : FooBar -> String show foobar = case foobar of Foo -> “Foo” Bar -> “Bar” deriving ShowΈ͍ͨͳ͜ͱ͸Ͱ͖ͳ͍
  8. HTML/CSSपΓͷબ୒ࢶ͕গͳ͍ ! elm-uiͱ͍͏elmઐ༻ͷϨΠΞ΢τϥΠϒϥϦ͸ଘࡏ͢Δ͕ɺͲ͜·Ͱelm-ui Ͱ΍ͬͯͲ͜·ͰcssͰ΍Δ͔౳ͷઢҾ͖͕೉͍͠ ! elm-cssͱ͍͏CSS in JSͷElm൛Έ͍ͨͳ΋ͷ΋͋Δ͕jsonͱҧͬͯ஋΋͢΂ ͯؔ਺ͳͷͰ௚ײతʹ৮Δͷ͕೉͍͠ ◦

    elm-mdlͱ͍͏Material DesignͷϥΠϒϥϦ΋͋ΔΒ͍͠... ◦ https://package.elm-lang.org/packages/debois/elm-mdl/latest/Material ! CSS ModuleͷΑ͏ͳ͍͍ײ͡ͷ࢓૊Έ͕ࠓͷͱ͜Ζͳ͍ ◦ ͍ۙ΋ͷ͸͋Δ͕ख͕͔͔ؒΔ