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
Hirofumi Horiuchi
August 25, 2022
0
33
Stimulusのはなし
Hirofumi Horiuchi
August 25, 2022
Tweet
Share
More Decks by Hirofumi Horiuchi
See All by Hirofumi Horiuchi
同じってなんだ?
h_reader
0
33
OSSを読んでみた?
h_reader
0
52
vue_js_composition_api
h_reader
0
66
秒速でリリースするWebアプリ.pdf
h_reader
0
41
はじめよう async/await
h_reader
0
47
Node.jsではじめるオレオレツールの世界
h_reader
0
480
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
55
9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing for humans not robots
tammielis
254
26k
Unsuck your backbone
ammeep
671
58k
Facilitating Awesome Meetings
lara
56
6.6k
Thoughts on Productivity
jonyablonski
70
4.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
4 Signs Your Business is Dying
shpigford
185
22k
Writing Fast Ruby
sferik
629
62k
Transcript
Stimulus のはなし
“ Rails 7 では、 Webpacker, Turoblinks, Rails-UJS が インストールされないようになりました
“ かわりに、 import-map, Trubo, Stimulus がインストールされます。
“ 今回は Stimulusの話です
Stimulusとは? 1
“ Stimulusとは、 HTMLのAttributeを使用して JavaScript オブジェクトを ページ上の要素に接続する Javascript フレームワークです
“ コントローラーと呼ばれるJSオブジェクトを作成 し、HTMLとJSを分離し、再利用性を高めま す。
“ サンプル HTMLと、JSで ‘hello_controller’ というコントローラを作成
“ サンプル “data-controller” で定義した名前とコントローラの名前を 一致させることで div と コントローラが 紐付けられる
“ サンプル “data-[controller名]-target” が定義されると、定義された HTML Element をコントローラで利用できます。 コントローラで利用する場合、”static targets” で宣言し、
“<target名>Target” という名前でアクセスできます。
“ サンプル “data-action” が定義されると、イベントに応じてメソッド呼び出しがで きます。 “[イベント]->[controller名]#[method名]” を指定します。
“ ここまでが基本的な使い方です
StimulusとState 2
“ ここまでで、HTMLとJSが分離できることが わかったと思います。 Stimulusは、このほかにコントローラでス テートを管理することもできます。
“ サンプル 矢印ボタンがあり、矢印ボタンを押すごとに猿のアイコンが切り替わる サンプル slideshow_controller.js
“ サンプル “Data-[controller名]-[state変数名]-value” でステートとして扱う変 数を定義できます。 Controllerでは、 “static values” として、値を宣言します。 宣言すると、”[value名]Value”
という名前でアクセスできます。 slideshow_controller.js
“ サンプル Stateの状態変更時に実行するメソッドも実装できます。 “[value名]ValueChanged” の命名でメソッドを定義すればOKです。 ちなみに、stateの値が変わると、HTML側のstate宣言したattribute の値も変わります。 slideshow_controller.js
まとめ
“ JSのフレームワークとしては、シンプルだけ ど最低限の機能は揃っている(気がする) Railsで作るサーバ側の管理画面などで、 ERBの中のJSを減らすのに一役買ってくれ そう。 脱jQueryしたい場合におすすめしたいと思 います。
“ ご清聴ありがとうございました。