stimulusの感触

Transcript

1. Stimulusͷײ৮
2. ͱ͋Δ೔
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΁Ҡߦ͢Δ࣌ͷ͓ڙʹ΋