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

Cycle.jsを使ってみた話 / Introductory talk about Cycle.js

5f533aeab28ed4f70c26e336e71296f7?s=47 tipo159
October 02, 2017

Cycle.jsを使ってみた話 / Introductory talk about Cycle.js

Cycle.jsの概要紹介

5f533aeab28ed4f70c26e336e71296f7?s=128

tipo159

October 02, 2017
Tweet

More Decks by tipo159

Other Decks in Programming

Transcript

  1. Cycle.jsΛ࢖ͬͯΈͨ࿩ We Are JavaScripters! @12th 2017.10.2 tipo159

  2. Cycle.jsͱ͸ • ϦΞΫςΟϒϓϩάϥϛϯά(Observable)ͰԾ૝DOMΛૢ࡞͢Δϑ ϨʔϜϫʔΫ • xstreamͱ͍͏ϦΞΫςΟϒϓϩάϥϛϯάͷϥΠϒϥϦΛ࢖༻ • xstream͸RxJSͷܰྔ൛ • RxJSͱmost.js(Monadic

    Streams)΋࢖༻Մೳ 2
  3. Ծ૝DOM • SnabbdomΛ࢖༻ • HyperScript HelpersͰDOMੜ੒Λهड़ div('.myClass', {style: {color: 'red'}},

    []) 3
  4. Cycle.jsͷߟ͑ํ • Cycle.jsͷΞϓϦέʔγϣϯͰ͸ɼ७ਮؔ਺(෭࡞༻ͷͳ ͍)main()͕ɼ֎෦͔ΒͷೖྗΛSources͔ΒಡΈࠐΈɼ ֎෦΁ͷ࡞༻ΛSinks΁ॻ͖ग़͢ɽ 4 main() Sources Sinks DOM΍HTTP౳ͷ෭࡞༻

    ७ਮؔ਺
  5. σϞ 5

  6. ιʔείʔυ 6

  7. ϋϚͬͨϙΠϯτ • hyperscript helperͰͷselect()(<select>ͷ<option>)ͷ هड़ํ๏͕෼͔Βͳ͍ • html-to-hyperscript.paqmind.comͱ͍͏HTML͔Β hyperscriptʹม׵͢ΔαΠτͷग़ྗ௨Γʹهड़ͯ͠ ΋ಈ࡞͠ͳ͍ •

    ηϨΫλ༻ؔ਺(DOM.select())ͷݕࡧ݁Ռ͕ଟ͗͢ ͯɼ<select>ͷαϯϓϧΛݕࡧͰ͖ͳ͔ͬͨ 7
  8. ࠂ஌ We Are PureScripters #3 • ॳ৺ऀ׻ܴ ؔ਺ܕJavaScript LTେձ •

    PureScript΍ElmͳͲͷؔ਺ܕϓϩάϥϛϯάݴޠ͚ͩͰͳ ͘ɺImmutable.js΍LodashͳͲͷJavaScript༻ؔ਺ܕϥΠϒ ϥϦͳͲ΋ؚΊͨLTେձ • ೔࣌: 2017.10.20 19:30ʙ21:30 • ձ৔: ະఆ • LTొஃऀ ืूத 8