Functional Programming in Frontend Elm編

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

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

Transcript

1. Functional Programming in Frontend Elmฤ @mikesorae
2. ϑϩϯτΤϯυͷͭΒΈ ! ঢ়ଶ؅ཧ ◦ ϦονUI؀ڥͰ͸ը໘্ʹ༷ʑͳঢ়ଶ͕ෳ਺ಉ࣌ʹଘࡏ͢Δ ! ඇಉظॲཧ ◦ ಛʹSPAͰ͸ϑϩϯτΤϯυΞϓϦέʔγϣϯ͔ΒόοΫΤϯυͷAPIΛݺͼग़ͯ͠λεΫΛ ࣮ݱ͢ΔͨΊɺฒߦͯ͠ෳ਺ͷඇಉظॲཧ͕ಈ͍͍ͯΔ͜ͱ͕ଟ͍ Single State, Unidirectional Data FlowͷΑ͏ͳΞʔΩςΫνϟͱ ܧଓϞφυ΍Algebraic EffectsͳͲͷFPతΞϓϩʔνʹΑͬͯ ෳࡶੑΛԼ͛ΔऔΓ૊Έ͕૿͖͑ͯͨ ↓ ͔ͤͬ͘ͳͷͰɺ΋ͬͱؔ਺ܕ͕ॻ͖΍͍͢ݴޠͰॻ͖͍ͨʂ
3. FP޲͚AltJS Elm Reason Scala.js PureScript ७ਮؔ਺ܕݴޠɻ)BTLFMMϥΠΫɻܰྔɻ ७ਮؔ਺ܕݴޠɻ)BTLFMMϥΠΫɻͭΑ͍ɻ ؔ਺ܕ ΦϒδΣΫτࢦ޲ɻ0$BNMϕʔεɻ 'BDFCPPL੡Ͱ3FBDU΋࢖͑Δɻ ؔ਺ܕ ΦϒδΣΫτࢦ޲ɻΈΜͳ஌ͬͯΔɻ
4. Elmͷ֓ཁ
5. Elmͱ͸ ! HaskellϥΠΫͳ७ਮؔ਺ܕݴޠͱɺReduxͷݩͱͳͬͨUnidirectional Data FlowΞʔΩςΫνϟ(The Elm Architecture => TEA)͕Ұମͱͳͬͨ΋ͷ ! Ұൠతͳ७ਮؔ਺ܕݴޠ͕࣋ͭෳࡶͳػߏΛࣺͯɺγϯϓϧɾ࣮༻ʹدͤͯ ͍Δ
6. ElmΞʔΩςΫνϟ ෭࡞༻͸͢΂ͯTEA͕੥͚ෛ͏ͨΊɺ࣮ߦ࣌ྫ֎͕ى͖ʹ͍͘
7. Χ΢ϯλʔΞϓϦͷαϯϓϧίʔυ 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 }
8. Χ΢ϯλʔΞϓϦͷαϯϓϧίʔυ 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
9. ؆୯ͳ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Ͱىಈ
10. 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ͱ͍͏ಋೖ΋Մೳ
11. Elmͷͭ·͖ͮͲ͜Ζ ؔ਺ܕతͳURL΍JSONσίʔυͷऔΓѻ͍ํΛ֮͑Δඞཁ͕͋Δ ࢀߟ: https://package.elm-lang.org/packages/elm/url/latest/Url-Parser
12. Elmͷͭ·͖ͮͲ͜Ζ ! ؾܰʹ෭࡞༻͕ىͤ͜ͳ͍ ◦ ྑ͘΋ѱ͘΋TEAʹकΒΕ͍ͯΔ ◦ ෭࡞༻Λى͍ͨ͜͠ͱ͖ɺ͓֎ͷjsͱձ࿩͢Δͱ͖͸ඞͣCmdΛൃߦ͢Δඞཁ͕͋Δ
13. Elmͷྑ͍ͱ͜Ζ
14. ݴޠ࢓༷͕γϯϓϧ ! ࠷খݶͷσʔλߏ଄ɺ੍ޚߏจɺࣜͷΈΛఏڙ ! ެࣜΨΠυΛݟͯ΋਺࣌ؒ͋Ε͹ಡΈऴΘΔఔ౓ͷ෼ྔ ◦ https://guide.elm-lang.jp/
15. ඞཁͳػೳ͕͍͍ͩͨTEAʹ͋Δ ! TEAࣗମ͕Unidirectional Data FlowΛఏڙ͍ͯ͠Δଞɺඇಉظॲཧ΍αϒε ΫϦϓγϣϯɺԾ૝DOMɺϧʔςΟϯά౳ɺϑϩϯτΤϯυ։ൃʹඞཁͳػ ೳ͕Ұ௨Γఏڙ͞Ε͍ͯΔɻͦͷͨΊϥΠϒϥϦ΍ϑϨʔϜϫʔΫͷબఆί ετ͕௿͍
16. ࣮ߦ࣌҆શ ! ෭࡞༻Λ͢΂ͯTEA͕ड͚΋ͭ͜ͱͰΞϓϦ಺ͷग़དྷࣄΛ΄ͱΜͲܕϨϕϧ ʹམͱ͢͜ͱ͕Ͱ͖ΔͨΊɺίϯύΠϧ͑͞௨Ε͹࣮ߦ࣌Τϥʔ͕΄ͱΜͲ ͳ͍
17. ϖʔδͷදࣔ΍ΞΫγϣϯ΋ܕ҆શ ! ϖʔδ΍ϝοηʔδͷܕΛఆٛ ͠ɺ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
18. DOMґଘແ͠Ͱviewͷςετ͕Ͱ͖Δ ! view΋HtmlΛग़ྗ͢Δ୯ͳΔؔ਺ Ͱ͋ΔͨΊɺܕϨϕϧͷ੍໿΍Ծ ૝DOMϨϕϧͰؔ਺ͷςετ͕Ͱ ͖Δ ! jest + enzymeͱ͔΍ΔΑΓ؆୯ ࢀߟ: https://package.elm-lang.org/packages/eeue56/elm-html-test/latest/
19. ίϛϡχςΟ͕׆ൃ ! Πϕϯτ΍Discord͕׆ൃͰαϙʔτΛड͚΍͍͢ ◦ https://discordapp.com/invite/4j2MxCg ◦ https://elm-jp.connpass.com/
20. ElmͷͭΒ͍ͱ͜Ζ
21. Ϟδϡʔϧ෼ׂ͕ͭΒ͍ ! ػೳ͝ͱͷϞδϡʔϧ෼ׂͳͲͰϘΠϥʔϓϨʔτίʔυ͕૿͑΍͍͢ ◦ ԼҐϞδϡʔϧͰൃੜͨ͠Msg΍ModelͷऔΓճ͠౳ ◦ جૅ͔ΒΘ͔ΔElmͷஶऀͷ@jinjor͞ΜͷϦϙδτϦʹ͋ΔReturnͰWrap͢Δ΍Γํ͕ྑ͞ ͦ͏ ▪ https://github.com/jinjor/elm-teapp/blob/master/src3/Return.elm
22. ܕΫϥε͕ͳ͍ ! Show΍OrdΫϥεʹ͋ΔΑ͏ͳૢ࡞΋ඞཁʹԠͯࣗ͡લͰ࣮૷͢Δඞཁ͕͋ ΔͨΊɺ͜͜Ͱ΋ϘΠϥʔϓϨʔτίʔυ͕૿͑Δ type FooBar = Foo | Bar show : FooBar -> String show foobar = case foobar of Foo -> “Foo” Bar -> “Bar” deriving ShowΈ͍ͨͳ͜ͱ͸Ͱ͖ͳ͍
23. 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ͷΑ͏ͳ͍͍ײ͡ͷ࢓૊Έ͕ࠓͷͱ͜Ζͳ͍ ◦ ͍ۙ΋ͷ͸͋Δ͕ख͕͔͔ؒΔ
24. ·ͱΊ ! TEA͸Reduxͷݩωλʹͳͬͨ୯Ұํ޲ΞʔΩςΫνϟ ! Elm͸७ਮؔ਺ܕ͕ͩݴޠ࢓༷͸ඇৗʹγϯϓϧ ◦ γϯϓϧ͞ͱͷτϨʔυΦϑͰɺ۪௚ʹϘΠϥʔϓϨʔτίʔυΛॻ͔ͳ͍ͱ͍͚ͳ͍͜ͱ΋ ଟ͍ ◦ ݴޠ࢓༷͕୯७ͰϘΠϥʔϓϨʔτ͕ଟ͍ͱ͍͏఺Ͱ͸Goʹ͍ۙҹ৅΋͋Δ ! TEAͷԸܙʹΑΓߴ͍࣮ߦ࣌҆શੑ͕͋Δ ڵຯ͕͋Δਓ͸ੋඇElmͰ༡ΜͰΈ·͠ΐ͏ʂ