Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
stimulusの感触
Search
masaru-tech
February 25, 2018
Programming
0
44
stimulusの感触
masaru-tech
February 25, 2018
Tweet
Share
More Decks by masaru-tech
See All by masaru-tech
Sidekiqでクラスターモードは使えるのか? / kawasakirb_060
masarutech
0
700
kawasakirb053
masarutech
0
5.4k
kawasakirb051
masarutech
0
440
「はやい、やすい、うまい?」React Native
masarutech
1
580
Other Decks in Programming
See All in Programming
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Temporalを取り巻く仕様を整理する
sajikix
0
110
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
CSC307 Lecture 08
javiergs
PRO
0
330
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
Rust.Nagoya #1
codemountains
0
170
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Speed Design
sergeychernyshev
9
270
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Design by the Numbers
sachag
277
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Building an army of robots
kneath
301
42k
GraphQLとの向き合い方2022年版
quramy
36
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
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Ҡߦ͢Δ࣌ͷ͓ڙʹ