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

実践モテリング:ReduxからElmへ

 実践モテリング:ReduxからElmへ

We Are JavaScripters! @5th
https://wajs.connpass.com/event/51818/
用の資料です

F425aff2e1f934fc1e5fa95b1f933068?s=128

boiyama

March 27, 2017
Tweet

Transcript

  1. ࣮ફϞςϦϯά
 Redux͔ΒElm΁ Mar 27 2017 @boiyaa

  2. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ ͜ͷεϥΠυ͸ ࠓRedux΍VuexͳͲɺFluxΞʔΩςΫνϟΛ࠾༻͍ͯ͠Δํʹ
 ElmΛΦεεϝ͢ΔͨΊͷElmॳ৺ऀ޲͚εϥΠυͰ͢ɻ FluxܥFWΛ࢖ͬͨࣄ͕ͳ͍ํʹ΋ɺͳΔ΂͘ڵຯ࣋ͬͯ΋Β ͑ΔΑ͏ʹ৺͕͚ͯॻ͖·ͨ͠ɻ આ໌͢Δͱখ೉͘͠ͳͬͯ͠·͏෦෼ʹ͸ݴٴ͠ͳ͍Α͏ʹ͠ ͍ͯ·͢ɻʢࢲ͕ະख़Ͱ΋͋ΔͷͰʣ

  3. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ ϓϩϑΟʔϧ ▸ @boiyaa ▸ 34ࡀ ▸ ϑϧεέοϕΤϯδχΞ

  4. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ ͱ͜ΖͰօ͞Μ͸ɺ ϞςΔͨΊʹ ։ൃͯ͠·͔͢ʁ

  5. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ ࢲ͸ɺϞς͍ͨ ▸ ϑϧεέοϕΤϯδχΞͰ͋Δࢲ͸ɺٕज़ʹϞςΔ͔Ͳ͏͔ ʢϞςʔϥϏϦςΟʣͱ͍͏࣠Λ͍࣋ͬͯ·͢ɻ ▸ ϞςʔϥϏϦςΟΛओ࣠ͱ͢ΔɺϞςϧۦಈ։ൃΛ࣮ફ͠ɺ ೔ʑϞςϦϯά͍ͯ͠·͢ɻ ▸ ςετϑΝʔετΑΓϨσΟʔϑΝʔετΛॏࢹ͍ͯ͠·͢ɻ

  6. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ Motering Diagram for a Peaceful Developer Relationship MAN-DRIVEN TECH

    WOMAN-DRIVEN TECH MOTERU DRIVEN TECH A full-skebe man A full-skebe woman She is so cute. Let’s think for her.. How nice he is!! How nice she is!! He is good looking. Let’s think for him..
  7. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ ຊ୊ʹೖΓ·͢ ϑϩϯτΤϯυͷঢ়ଶ؅ཧΛ ϞςϦϯά͢Δ

  8. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ ϑϩϯτΤϯυͷݱࡏ ▸ 2016೥͸Redux͕ΊͪΌͪ͘ΌྲྀߦΓ·ͨ͠ɻ ▸ “React, Redux, Webpack, ECMAScript 2015

    (aka ES6), and Babel 
 gain massive adoption. 
 These solutions rise to the top of all the polls as the most used tech.”
 by Front-End Developer Handbook 2017
  9. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ Reduxͱ͸ ▸ ΞϓϦέʔγϣϯͷঢ়ଶ؅ཧΛड͚࣋ͭϥΠϒϥϦͰ͢ɻ ▸ ϑϩϯτΤϯυͰ͸React΍VueͷΑ͏ͳUIߏஙϥΠϒϥϦ͕Α͘࢖ΘΕͯ ͍·͕͢ɺ͜ΕΒΛ࢖༻͢Δࡍʹɺίϯϙʔωϯτ಺ʹঢ়ଶΛ࣋ͭͱෆ౎ ߹͕ग़ͯ͘Δ͜ͱ͔Βɺঢ়ଶΛ֎ଆͰ؅ཧͯ͠ίϯϙʔωϯτʹ஫ೖ͢Δ σʔλϑϩʔɺFlux͕ఏҊ͞Εɺͦͷঢ়ଶ؅ཧ෦෼Λ࣮૷ͨ͠ϥΠϒϥϦ Λ׆༻͢Δࣄྫ͕૿͑·ͨ͠ɻ

    ▸ Α͘Reactͱ૊߹Θͤ·͕͢ɺUIϥΠϒϥϦʹґଘ͠ͳ͍ͷͰɺ
 AngularɺVueɺBackboneͳͲͱ΋૊Έ߹ΘͤΒΕ·͢ɻ
  10. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ Redux͸ؾʹೖͬͯ·͢ɻͰ΋ɾɾ ▸ ࢲ͸Ϟς·ͤΜͰͨ͠ɻ ▸ ৭Μͳπʔϧ΍ઃఆ͕ඞཁͩͱΞϯϞςʔϥϒϧʹͳΓ·͢ ▸ Ϗϧυ৬ਓΛ΍Γ͕ͨΔͷ͸Φδαϯ͚ͩͳͷͰ͢ɻ

  11. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ ReduxΈ͍ͨͰ
 Moteru-Drivenͳͷ͕ཉ͍͠ʂ ELM

  12. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ Elmͱ͸ ▸ ߴ৴པੑWebΞϓϦέʔγϣϯͷͨΊͷָ͍͠ݴޠ ▸ ϋΠύϑΥʔϚϯεͰϥϯλΠϜΤϥʔͷແ͍JavaScriptΛ ੜ੒͢Δ ▸ ͱ͍͏৮ΕࠐΈͷݴޠͰ͋ΓϑϨʔϜϫʔΫͰɺঃʑʹ࠾༻ ࣄྫ͕૿͖͍͑ͯͯ·͢ɻ

    ▸ “A small but noticeable number of developers are starting to choose Elm over JavaScript.”
 by Front-End Developer Handbook 2017
  13. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ ReduxʹӨڹΛ༩͑ͨΞʔΩςΫνϟ ▸ ReduxͷReducer͸ɺStateͱActionΛ౉͠StateΛฦ͢७ਮ ؔ਺Ͱ͕͢ɺͦΕ͸ElmΞʔΩςΫνϟ͔Β͖͍ͯ·͢ɻ
 http://redux.js.org/docs/introduction/PriorArt.html#elm ▸ ͞ΒʹElm͸੩తܕ෇͚Ͱɺঢ়ଶΛ࣋ͭॲཧ͕ॻ͚ͳ͍࡞Γ ʹͳ͍ͬͯΔͱ͍͏ͷ͕ɺߴ৴པੑΛᨳ͏ॴҎͰ͢ɻ

  14. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ ReduxͱElmͷྨࣅ఺ React/Redux Elm ঢ়ଶ state model มߋࢦࣔ action Msg

    ঢ়ଶมߋ reducer update UI React view ঢ়ଶ؅ཧ createStore Html.program
  15. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ Elm͸Ϗϧυ৬ਓෆཁ React/Redux Elm ੩తܕ෇͚ Flow Elm ίʔυղੳ ESLint Elm

    ίϯύΠϧ Babel Elm όϯυϧ webpack Elm ։ൃαʔό webpack Dev Server Elm
  16. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ Elm؀ڥͷΠϯετʔϧ npm install -g elm

  17. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ Elm͔ΒHTML/JS/CSS΁ͷίϯύΠϧ elm-make Main.elm —output=main.html

  18. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ ։ൃαʔόىಈ elm-reactor

  19. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ Elmίʔυ͸ͱͯ΋ϛχϚϧ ▸ ReduxͱElmͷαϯϓϧ ʢCounterʣΛ༻ҙ͠·ͨ͠ɻ ‣ Redux൛͸ElmʹدͤΔͨΊʹɺඇಉظॲཧʹredux-sagaΛ࢖͍ɺ FlowͰ੩తܕ෇͚ͯ͠࡞Γ·ͨ͠ɻৄ͘͠͸ϦϙδτϦΛ֬͝ೝ͘ ͍ͩ͞ɻ ‣

    https://github.com/boiyaa/counter-js/tree/master/redux-saga- flow ‣ Elm൛͸ͪ͜ΒͰ͢ɻ ‣ https://github.com/boiyaa/counter-elm
  20. ‣ ΞϓϦΛ୹͘ॻ͚ͯ΋ɺςετॻ͖ਏ͍ͳΒݏͰ͢ΑͶɻ
 Elm͸ςετ΋ؚΊͯγϯϓϧʹॻ͚·͢ɻ ࣮ફϞςϦϯάɿRedux͔ΒElm΁ ίʔυߦ਺ൺֱ React/Redux Elm ΞϓϦίʔυ 95 58

    ςετίʔυ 117 50 ܭ 212 108
  21. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ ͋͞ElmΛ͸͡Ί·͠ΐ͏ ‣ ·ͣ͸ Elm Examples ΛݟͯΦϯϥΠϯͰίʔυʹ৮ΕͯΈ·͠ΐ͏ɻ
 ઌ΄ͲͷϦϙδτϦͷCounterίʔυΛషΓ෇͚ͯΈͨΓ͍ͯͩ͘͠͞ɻ ‣ Πϯετʔϧ͢Δؾ͕ى͖ͨΒ10෼͘Β͍ͰऴΘΔ

    Get Started ͍͖·͠ΐ͏ɻ ‣ ࣍ʹ Elm Tutorial ʢ೔ຊޠ൛͋Γ·͢ʣΛݟͯίʔυॻ͍ͯΈ·͠ΐ͏ɻ ‣ ࣮ࡍʹۀ຿Ͱ࢖༻͢Δࡍʹ͸ɺ೔ຊޠ৘ใͰ͸ɺElm։ൃऀ͕ॴଐ͢Δ NoRedInkͷํ͕ॻ͔Εͨهࣄ ElmΛຊ൪ӡ༻͢ΔͨΊͷπʔϧ͋Ε͜Ε ͕ࢀߟ ʹͳΔ͔ͱࢥ͍·͢ɻ ‣ ӳޠ͕େৎ෉Ͱ͋Ε͹ɺ༷ʑͳ Community Ͱ׆ൃʹ஌ݟ͕ڞ༗͞Ε͍ͯ·͢ɻ
  22. ࣮ફϞςϦϯάɿRedux͔ΒElm΁ ࠷ޙʹ ElmΛॻ͍ͯϞς͔ͨɺ͸ฉ͔ͳ͍Ͱ͍͋͛ͯͩ͘͞ɻ

  23. THAT'S IT. Thank you for your motering