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
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
920
Practical Orchestrator
shlominoach
190
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
GitHub's CSS Performance
jonrohan
1032
470k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
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したい場合におすすめしたいと思 います。
“ ご清聴ありがとうございました。