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.6k
kawasakirb051
masarutech
0
510
「はやい、やすい、うまい?」React Native
masarutech
1
610
Other Decks in Programming
See All in Programming
型で語るカタ
irof
1
850
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
310
iOS開発スターターキットの作り方
akidon0000
0
210
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.5k
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
150
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
810
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
660
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
The Cult of Friendly URLs
andyhume
79
6.5k
Six Lessons from altMBA
skipperchong
28
3.9k
How GitHub (no longer) Works
holman
314
140k
Scaling GitHub
holman
461
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Raft: Consensus for Rubyists
vanstee
140
7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
For a Future-Friendly Web
brad_frost
179
9.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Product Roadmaps are Hard
iamctodd
PRO
54
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Ҡߦ͢Δ࣌ͷ͓ڙʹ