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
47
stimulusの感触
masaru-tech
February 25, 2018
Tweet
Share
More Decks by masaru-tech
See All by masaru-tech
Sidekiqでクラスターモードは使えるのか? / kawasakirb_060
masarutech
0
810
kawasakirb053
masarutech
0
5.5k
kawasakirb051
masarutech
0
510
「はやい、やすい、うまい?」React Native
masarutech
1
610
Other Decks in Programming
See All in Programming
LINEヤフー データグループ紹介
lycorp_recruit_jp
1
2.4k
Goで作る、開発・CI環境
sin392
0
220
Team operations that are not burdened by SRE
kazatohiei
1
310
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
730
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
150
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
120
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
350
Porting a visionOS App to Android XR
akkeylab
0
420
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
120
ニーリーにおけるプロダクトエンジニア
nealle
0
790
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Documentation Writing (for coders)
carmenintech
72
4.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
It's Worth the Effort
3n
185
28k
RailsConf 2023
tenderlove
30
1.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Writing Fast Ruby
sferik
628
62k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building Applications with DynamoDB
mza
95
6.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Typedesign – Prime Four
hannesfritz
42
2.7k
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Ҡߦ͢Δ࣌ͷ͓ڙʹ