Stimulusのはなし

Transcript

1. Stimulus のはなし
2. “ Rails 7 では、 Webpacker, Turoblinks, Rails-UJS が インストールされないようになりました
3. “ かわりに、 import-map, Trubo, Stimulus がインストールされます。
4. “ 今回は Stimulusの話です
5. Stimulusとは？ 1
6. “ Stimulusとは、 HTMLのAttributeを使用して JavaScript オブジェクトを ページ上の要素に接続する Javascript フレームワークです
7. “ コントローラーと呼ばれるJSオブジェクトを作成 し、HTMLとJSを分離し、再利用性を高めま す。
8. “ サンプル HTMLと、JSで ‘hello_controller’ というコントローラを作成
9. “ サンプル “data-controller” で定義した名前とコントローラの名前を 一致させることで div と コントローラが 紐付けられる
10. “ サンプル “data-[controller名]-target” が定義されると、定義された HTML Element をコントローラで利用できます。 コントローラで利用する場合、”static targets” で宣言し、 “<target名>Target” という名前でアクセスできます。
11. “ サンプル “data-action” が定義されると、イベントに応じてメソッド呼び出しがで きます。 “[イベント]->[controller名]#[method名]” を指定します。
12. “ ここまでが基本的な使い方です
13. StimulusとState 2
14. “ ここまでで、HTMLとJSが分離できることが わかったと思います。 Stimulusは、このほかにコントローラでス テートを管理することもできます。
15. “ サンプル 矢印ボタンがあり、矢印ボタンを押すごとに猿のアイコンが切り替わる サンプル slideshow_controller.js
16. “ サンプル “Data-[controller名]-[state変数名]-value” でステートとして扱う変 数を定義できます。 Controllerでは、 “static values” として、値を宣言します。 宣言すると、”[value名]Value” という名前でアクセスできます。 slideshow_controller.js
17. “ サンプル Stateの状態変更時に実行するメソッドも実装できます。 “[value名]ValueChanged” の命名でメソッドを定義すればOKです。 ちなみに、stateの値が変わると、HTML側のstate宣言したattribute の値も変わります。 slideshow_controller.js
18. まとめ
19. “ JSのフレームワークとしては、シンプルだけ ど最低限の機能は揃っている(気がする) Railsで作るサーバ側の管理画面などで、 ERBの中のJSを減らすのに一役買ってくれ そう。 脱jQueryしたい場合におすすめしたいと思 います。
20. “ ご清聴ありがとうございました。