Stimulusͷײ৮
View Slide
ͱ͋Δ
·ͨ৽ͨͳJavaScriptϑϨʔϜϫʔΫ͔ɻɻͱࢥ͍ͳ͕ΒɺDHH͕ݴ͍ͬͯΔͷͰͱΓ͋͑ͣݟͯΈͨΒ
ྑͦ͞͏ͩͬͨͷͰ͝հ✨
Stimulusͱ• BasecampൃͷJavaScriptϑϨʔϜϫʔΫ• React.jsVue.jsͷΑ͏ͳJavaScriptΞϓϦέʔγϣϯΛ࡞͢ΔϑϨʔϜϫʔΫͰͳ͍• খ͘͞߇͑ΊͳϑϨʔϜϫʔΫͰطଘͷHTMLΛ֦ு• TurbolinksͱͷௐΑΓৄ͘͠ https://stimulusjs.org/handbook/origin
Δ͖3ͭͷdataଐੑ࠷ݶ͜ͷ3ͭΛ͓͚ͬͯOK• data-controllerɿରͷίϯτϩʔϥ• data-actionɿΠϕϯτͷτϦΨʔํ๏ͱ࣮ߦ͢Δؔ• data-targetɿίϯτϩʔϥ͔ΒElementΛݟ͚ͭΔͨΊͷ໊લ
ͰίʔυΛݟͯΈ·͠ΐ͏※GithubͷREADME(https://github.com/stimulusjs/stimulus/blob/v1.0.1/README.md)ΑΓൈਮ
GreetView͔ΒԼهͷ͜ͱ͕͔Δ• data-controllerɿhelloͱ͍͏ίϯτϩʔϥʔΛར༻͢Δ• data-actionɿbuttonΛclick͢Δͱhelloͷgreet͕ؔݺΕΔ• data-targetɿhelloίϯτϩʔϥʔͰnameͱoutput͕ࢀর͞ΕΔ
[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}!`}}
γϯϓϧͳͷ͔͕ͬͨɺԿ͕͍͍ͷʁ
طଘͷCoffeescriptͰײ͡Δ՝• ରͷViewͰ͔͠ಈ࡞͠ͳ͍Α͏ʹ͢Δ• SprocketsʹΑΓ1ͭͷjsϑΝΠϧʹ·ͱΊΒΕΔ͔Βશͯͷjs͕ಈ͍ͯ͠·͏• දతͳʁbodyʹdata-controller,data-actionΛఆٛ͢Δͭ• Πϕϯτϋϯυϥ͕Ͳ͜Ͱઃఆ͞Ε͍ͯΔ͔• ܦݧ্ɺ΄ͱΜͲ͕onClickonChangeͳͲͷΠϕϯτఆٛʹͳΔ• ্هͷͰϑΝΠϧಛఆͰ͖Δ͕ɺView͔ΒԿ͕ઃఆ͞Ε͍ͯΔ͔͔Βͳ͍• common.coffeeͱ͔utils.coffeeΈ͍ͨͳͷ͕͋ͬͨΒɻɻɻ• ES201xͷைྲྀ• ׂΛऴ͑ͭͭ͋ΔCoffeescript
ͦ͜ͰɺStimulus (+webpacker)Stimulus (+webpacker)ʹΑͬͯCoffeescriptͷ՝͕ղܾ• ରͷViewͰ͔͠ಈ࡞͠ͳ͍Α͏ʹ͢Δ• Stimulus͕୲ͬͯ͘ΕΔ• Πϕϯτϋϯυϥ͕Ͳ͜Ͱઃఆ͞Ε͍ͯΔ͔• Stimulusͷdata-actionʹΑΓView͔Βର͕͔Δ• ES201xͷைྲྀ• webpackerͰ؆୯ʹಋೖ
·ͱΊStimulus• SPAΛߏங͢ΔJavascriptϑϨʔϜϫʔΫͰͳ͍͕• ViewͱJS͕ରʹͳΔͷͰՄಡੑ/อकੑ͕͕͋Γͦ͏• ͳͷͰɺඇSPAͰ͋Δఔಈ͖ͷ͋ΔΞϓϦ։ൃʹྑͦ͞͏• طଘCoffeescript→ES201xҠߦ͢Δ࣌ͷ͓ڙʹ