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
38
stimulusの感触
masaru-tech
February 25, 2018
Tweet
Share
More Decks by masaru-tech
See All by masaru-tech
Sidekiqでクラスターモードは使えるのか? / kawasakirb_060
masarutech
0
650
kawasakirb053
masarutech
0
5.4k
kawasakirb051
masarutech
0
410
「はやい、やすい、うまい?」React Native
masarutech
1
570
Other Decks in Programming
See All in Programming
Learning PHP and Static Analysis with PHP Parser
inouehi
1
250
PHP で読む楽しいコアダンプ
sji
0
240
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
490
OpenTelemetry のサービスという概念について
azukiazusa1
1
380
Honoとhtmx
yusukebe
6
1.2k
document.write再考
brn
5
2.5k
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
370
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
160
20240301_cocone_EMゆるミートアップvol6_LT資料
cocone
0
310
上手な探索的テストとその上達方法について
matsu802
4
650
Why 1 + 1 = 2 in Swift?
1plus4
1
240
Featured
See All Featured
Optimizing for Happiness
mojombo
369
69k
Product Roadmaps are Hard
iamctodd
43
9.6k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Music & Morning Musume
bryan
39
5.5k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
We Have a Design System, Now What?
morganepeng
42
6.7k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Practical Orchestrator
shlominoach
180
9.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
BBQ
matthewcrist
78
8.7k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
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Ҡߦ͢Δ࣌ͷ͓ڙʹ