Functional Programming in Frontend Elmฤ @mikesorae 

ϑϩϯτΤϯυͷͭΒΈ ! ঢ়ଶ؅ཧ ○ ϦονUI؀ڥͰ͸ը໘্ʹ༷ʑͳঢ়ଶ͕ෳ਺ಉ࣌ʹଘࡏ͢Δ ! ඇಉظॲཧ ○ ಛʹSPAͰ͸ϑϩϯτΤϯυΞϓϦέʔγϣϯ͔ΒόοΫΤϯυͷAPIΛݺͼग़ͯ͠λεΫΛ ࣮ݱ͢ΔͨΊɺฒߦͯ͠ෳ਺ͷඇಉظॲཧ͕ಈ͍͍ͯΔ͜ͱ͕ଟ͍ Single State, Unidirectional Data FlowͷΑ͏ͳΞʔΩςΫνϟͱ ܧଓϞφυ΍Algebraic EffectsͳͲͷFPతΞϓϩʔνʹΑͬͯ ෳࡶੑΛԼ͛ΔऔΓ૊Έ͕૿͖͑ͯͨ ↓ ͔ͤͬ͘ͳͷͰɺ΋ͬͱؔ਺ܕ͕ॻ͖΍͍͢ݴޠͰॻ͖͍ͨʂ 

FP޲͚AltJS Elm Reason Scala.js PureScript ७ਮؔ਺ܕݴޠɻ)BTLFMMϥΠΫɻܰྔɻ ७ਮؔ਺ܕݴޠɻ)BTLFMMϥΠΫɻͭΑ͍ɻ ؔ਺ܕΦϒδΣΫτࢦ޲ɻ0$BNMϕʔεɻ 'BDFCPPL੡Ͱ3FBDU΋࢖͑Δɻ ؔ਺ܕΦϒδΣΫτࢦ޲ɻΈΜͳ஌ͬͯΔɻ 

Elmͷ֓ཁ 

Elmͱ͸ ! HaskellϥΠΫͳ७ਮؔ਺ܕݴޠͱɺReduxͷݩͱͳͬͨUnidirectional Data FlowΞʔΩςΫνϟ(The Elm Architecture => TEA)͕Ұମͱͳͬͨ΋ͷ ! Ұൠతͳ७ਮؔ਺ܕݴޠ͕࣋ͭෳࡶͳػߏΛࣺͯɺγϯϓϧɾ࣮༻ʹدͤͯ ͍Δ 

ElmΞʔΩςΫνϟ ෭࡞༻͸͢΂ͯTEA͕੥͚ෛ͏ͨΊɺ࣮ߦ࣌ྫ֎͕ى͖ʹ͍͘ 

Χ΢ϯλʔΞϓϦͷαϯϓϧίʔυ 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 } 

Χ΢ϯλʔΞϓϦͷαϯϓϧίʔυ 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 

؆୯ͳ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Ͱىಈ 

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ͱ͍͏ಋೖ΋Մೳ 

Elmͷͭ·͖ͮͲ͜Ζ ؔ਺ܕతͳURL΍JSONσίʔυͷऔΓѻ͍ํΛ֮͑Δඞཁ͕͋Δ ࢀߟ: https://package.elm-lang.org/packages/elm/url/latest/Url-Parser 

Elmͷͭ·͖ͮͲ͜Ζ ! ؾܰʹ෭࡞༻͕ىͤ͜ͳ͍ ○ ྑ͘΋ѱ͘΋TEAʹकΒΕ͍ͯΔ ○ ෭࡞༻Λى͍ͨ͜͠ͱ͖ɺ͓֎ͷjsͱձ࿩͢Δͱ͖͸ඞͣCmdΛൃߦ͢Δඞཁ͕͋Δ 

Elmͷྑ͍ͱ͜Ζ 

ݴޠ࢓༷͕γϯϓϧ ! ࠷খݶͷσʔλߏ଄ɺ੍ޚߏจɺࣜͷΈΛఏڙ ! ެࣜΨΠυΛݟͯ΋਺࣌ؒ͋Ε͹ಡΈऴΘΔఔ౓ͷ෼ྔ ○ https://guide.elm-lang.jp/ 

ඞཁͳػೳ͕͍͍ͩͨTEAʹ͋Δ ! TEAࣗମ͕Unidirectional Data FlowΛఏڙ͍ͯ͠Δଞɺඇಉظॲཧ΍αϒε ΫϦϓγϣϯɺԾ૝DOMɺϧʔςΟϯά౳ɺϑϩϯτΤϯυ։ൃʹඞཁͳػ ೳ͕Ұ௨Γఏڙ͞Ε͍ͯΔɻͦͷͨΊϥΠϒϥϦ΍ϑϨʔϜϫʔΫͷબఆί ετ͕௿͍ 

࣮ߦ࣌҆શ ! ෭࡞༻Λ͢΂ͯTEA͕ड͚΋ͭ͜ͱͰΞϓϦ಺ͷग़དྷࣄΛ΄ͱΜͲܕϨϕϧ ʹམͱ͢͜ͱ͕Ͱ͖ΔͨΊɺίϯύΠϧ͑͞௨Ε͹࣮ߦ࣌Τϥʔ͕΄ͱΜͲ ͳ͍ 

ϖʔδͷදࣔ΍ΞΫγϣϯ΋ܕ҆શ ! ϖʔδ΍ϝοηʔδͷܕΛఆٛ ͠ɺ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 

DOMґଘແ͠Ͱviewͷςετ͕Ͱ͖Δ ! view΋HtmlΛग़ྗ͢Δ୯ͳΔؔ਺ Ͱ͋ΔͨΊɺܕϨϕϧͷ੍໿΍Ծ ૝DOMϨϕϧͰؔ਺ͷςετ͕Ͱ ͖Δ ! jest + enzymeͱ͔΍ΔΑΓ؆୯ ࢀߟ: https://package.elm-lang.org/packages/eeue56/elm-html-test/latest/ 

ίϛϡχςΟ͕׆ൃ ! Πϕϯτ΍Discord͕׆ൃͰαϙʔτΛड͚΍͍͢ ○ https://discordapp.com/invite/4j2MxCg ○ https://elm-jp.connpass.com/ 

ElmͷͭΒ͍ͱ͜Ζ 

Ϟδϡʔϧ෼ׂ͕ͭΒ͍ ! ػೳ͝ͱͷϞδϡʔϧ෼ׂͳͲͰϘΠϥʔϓϨʔτίʔυ͕૿͑΍͍͢ ○ ԼҐϞδϡʔϧͰൃੜͨ͠Msg΍ModelͷऔΓճ͠౳ ○ جૅ͔ΒΘ͔ΔElmͷஶऀͷ@jinjor͞ΜͷϦϙδτϦʹ͋ΔReturnͰWrap͢Δ΍Γํ͕ྑ͞ ͦ͏ ■ https://github.com/jinjor/elm-teapp/blob/master/src3/Return.elm 

ܕΫϥε͕ͳ͍ ! Show΍OrdΫϥεʹ͋ΔΑ͏ͳૢ࡞΋ඞཁʹԠͯࣗ͡લͰ࣮૷͢Δඞཁ͕͋ ΔͨΊɺ͜͜Ͱ΋ϘΠϥʔϓϨʔτίʔυ͕૿͑Δ type FooBar = Foo | Bar show : FooBar -> String show foobar = case foobar of Foo -> “Foo” Bar -> “Bar” deriving ShowΈ͍ͨͳ͜ͱ͸Ͱ͖ͳ͍ 

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ͷΑ͏ͳ͍͍ײ͡ͷ࢓૊Έ͕ࠓͷͱ͜Ζͳ͍ ○ ͍ۙ΋ͷ͸͋Δ͕ख͕͔͔ؒΔ 

·ͱΊ ! TEA͸Reduxͷݩωλʹͳͬͨ୯Ұํ޲ΞʔΩςΫνϟ ! Elm͸७ਮؔ਺ܕ͕ͩݴޠ࢓༷͸ඇৗʹγϯϓϧ ○ γϯϓϧ͞ͱͷτϨʔυΦϑͰɺ۪௚ʹϘΠϥʔϓϨʔτίʔυΛॻ͔ͳ͍ͱ͍͚ͳ͍͜ͱ΋ ଟ͍ ○ ݴޠ࢓༷͕୯७ͰϘΠϥʔϓϨʔτ͕ଟ͍ͱ͍͏఺Ͱ͸Goʹ͍ۙҹ৅΋͋Δ ! TEAͷԸܙʹΑΓߴ͍࣮ߦ࣌҆શੑ͕͋Δ ڵຯ͕͋Δਓ͸ੋඇElmͰ༡ΜͰΈ·͠ΐ͏ʂ