Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
stimulusの感触
masaru-tech
February 25, 2018
Programming
0
31
stimulusの感触
masaru-tech
February 25, 2018
Tweet
Share
More Decks by masaru-tech
See All by masaru-tech
masarutech
0
350
masarutech
0
4.2k
masarutech
0
280
masarutech
1
460
Other Decks in Programming
See All in Programming
hanakla
2
3k
e10dokup
0
450
zsmb
2
110
inoue2002
0
280
kubode
0
220
viteinfinite
0
210
xrdnk
0
130
kenmaz
1
100
rishitdagli
0
180
malvinstn
1
660
maito1201
0
100
standfm
0
260
Featured
See All Featured
brettharned
93
3k
eitanlees
111
9.9k
orderedlist
PRO
329
35k
garrettdimon
287
110k
edds
56
9.3k
maggiecrowley
8
430
zenorocha
297
40k
geeforr
332
29k
cromwellryan
101
5.9k
mthomps
39
2.3k
cassininazir
347
20k
rocio
155
11k
Transcript
Stimulusͷײ৮
ͱ͋Δ
None
·ͨ৽ͨͳ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)ΑΓൈਮ
<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͕ࢀর͞ΕΔ
[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Ҡߦ͢Δ࣌ͷ͓ڙʹ