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

stimulusの感触

 stimulusの感触

227427c9146ca16f86f78a6a021105ec?s=128

masaru-tech

February 25, 2018
Tweet

Transcript

  1. Stimulusͷײ৮

  2. ͱ͋Δ೔

  3. None
  4. ·ͨ৽ͨͳJavaScriptϑϨʔϜ ϫʔΫ͔ɻɻ ͱࢥ͍ͳ͕ΒɺDHH͕ݴͬͯ ͍ΔͷͰͱΓ͋͑ͣݟͯΈͨΒ

  5. ྑͦ͞͏ͩͬͨͷͰ͝঺հ✨

  6. Stimulusͱ͸ • BasecampൃͷJavaScriptϑϨʔϜϫʔΫ • React.js΍Vue.jsͷΑ͏ͳJavaScriptΞϓϦέʔγϣϯΛ࡞ ੒͢ΔϑϨʔϜϫʔΫͰ͸ͳ͍ • খ͘͞߇͑ΊͳϑϨʔϜϫʔΫͰطଘͷHTMLΛ֦ு • Turbolinksͱͷௐ࿨

    ΑΓৄ͘͠͸ https://stimulusjs.org/handbook/origin
  7. ஌Δ΂͖3ͭͷdataଐੑ ࠷௿ݶ͜ͷ3ͭΛ஌͓͚ͬͯ͹OK • data-controllerɿର৅ͷίϯτϩʔϥ • data-actionɿΠϕϯτͷτϦΨʔํ๏ͱ࣮ߦ͢Δؔ਺ • data-targetɿίϯτϩʔϥ಺͔ΒElementΛݟ͚ͭΔ ͨΊͷ໊લ

  8. Ͱ͸ίʔυΛݟͯΈ·͠ΐ͏ ※GithubͷREADME(https://github.com/stimulusjs/ stimulus/blob/v1.0.1/README.md)ΑΓൈਮ

  9. <div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet">Greet</button> <span data-target="hello.output"></span> </div>

    View͔ΒԼهͷ͜ͱ͕෼͔Δ • data-controllerɿhelloͱ͍͏ίϯτϩʔϥʔΛར༻͢Δ • data-actionɿbuttonΛclick͢Δͱhelloͷgreetؔ਺͕ݺ͹ΕΔ • data-targetɿhelloίϯτϩʔϥʔͰnameͱoutput͕ࢀর͞ΕΔ
  10. [src/controllers/hello_controller.js] import { Controller } from "stimulus" export default class

    extends Controller { static targets = [ "name", "output" ] greet() { this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!` } }
  11. γϯϓϧͳͷ͸෼͔͕ͬͨɺ Կ͕͍͍ͷʁ

  12. طଘͷCoffeescriptͰײ͡Δ՝୊ • ର৅ͷViewͰ͔͠ಈ࡞͠ͳ͍Α͏ʹ͢Δ޻෉ • SprocketsʹΑΓ1ͭͷjsϑΝΠϧʹ·ͱΊΒΕΔ͔Βશͯͷjs͕ಈ͍ͯ͠·͏ • ୅දతͳʁbodyʹdata-controller,data-actionΛఆٛ͢Δ΍ͭ • Πϕϯτϋϯυϥ͕Ͳ͜Ͱઃఆ͞Ε͍ͯΔ͔ •

    ܦݧ্ɺ΄ͱΜͲ͕onClick΍onChangeͳͲͷΠϕϯτఆٛʹͳΔ • ্هͷ޻෉ͰϑΝΠϧ͸ಛఆͰ͖Δ͕ɺView͔ΒԿ͕ઃఆ͞Ε͍ͯΔ͔͸෼͔Βͳ͍ • common.coffeeͱ͔utils.coffeeΈ͍ͨͳͷ͕͋ͬͨΒɻɻɻ • ES201xͷைྲྀ • ໾ׂΛऴ͑ͭͭ͋ΔCoffeescript
  13. ͦ͜ͰɺStimulus (+webpacker) Stimulus (+webpacker)ʹΑͬͯCoffeescriptͷ՝୊͕ղܾ • ର৅ͷViewͰ͔͠ಈ࡞͠ͳ͍Α͏ʹ͢Δ޻෉ • Stimulus͕୲ͬͯ͘ΕΔ • Πϕϯτϋϯυϥ͕Ͳ͜Ͱઃఆ͞Ε͍ͯΔ͔

    • Stimulusͷdata-actionʹΑΓView͔Βର৅͕෼͔Δ • ES201xͷைྲྀ • webpackerͰ؆୯ʹಋೖ
  14. ·ͱΊ Stimulus͸ • SPAΛߏங͢ΔJavascriptϑϨʔϜϫʔΫͰ͸ͳ͍͕ • ViewͱJS͕ରʹͳΔͷͰՄಡੑ/อकੑ͕͕͋Γͦ͏ • ͳͷͰɺඇSPAͰ͋Δఔ౓ಈ͖ͷ͋ΔΞϓϦ։ൃʹྑͦ͞͏ • طଘCoffeescript→ES201x΁Ҡߦ͢Δ࣌ͷ͓ڙʹ΋