Stimulusのススメ

Railsと相性のいいJavaScriptライブラリStimulusの紹介。
サンプルコードはこちらに置いてます。
https://github.com/patorash/stimulus-sample

Transcript

1. Stimulusのススメ 2021-01-20 株式会社リゾーム 社内勉強会 尾古 豊明 @patorash
2. Stimulusとは︖ ­ Railsを開発したDHHのいる会社のBaseCampが開発したJavaScriptのライブラリ ­ Turbolinksとの親和性が⾼い ­ rails-ujsとの親和性も⾼い ­ RailsでReactやVueを使おうとすると、Viewのレンダリングの責務が分離できない。 ­ RailsをAPIモードにすれば話は別だが… ­ StimulusはViewのレンダリングは完全にRailsに任せる。 ­ 状態の保持はhtmlのdata属性を⽤いる。 ­ 2020年12⽉にバージョン2.0.0がリリース︕ ­ Value APIとClass APIの追加で、さらに扱いやすくなった
3. メリット ­ Viewのレンダリングに対する責務を完全にRailsに任せられる ­ ということは、Railsのヘルパーメソッドが使える ­ ページのキャッシュ等をTurbolinksに任せられる ­ Ajaxをするのにフォームヘルパーとrails-ujsを使ってのハンドリングが簡単 ­ ということは、RailsのCSRFトークンも⼀緒に扱える ­ Axiosなどのサードパーティのライブラリを使うとRailsのCSRFトークンの抽出処理が必要に… ­ 学習コストが低い ­ 複雑なことはできない ­ 少⼈数でバックエンド + フロントエンドをやる場合には、有利に働く
4. デメリット ­ 昨今のフロントエンド重視の開発体制からは逆⾏している（とも受け取れる） ­ 動的な要素追加などは苦⼿ ­ AjaxでRailsにhtmlをもらいに⾏ってくる形になる ­ バックエンドと密結合となる ­ Viewを返すのがバックエンドの仕事になるから ­ SPAの場合はデータ(JSON)を返すのがバックエンドの仕事 ­ Railsでは裁ききれない︕Go⾔語に移⾏したい︕となっても、密結合しているので移⾏が厳しい。 ­ フロントがSPAならば、バックエンドのAPIサーバを他の⾔語に置き換えやすい ­ しかし、本当にそんなことになることは、弊社であり得るのか︖
5. SPAのデメリット（私基準） ­ テストが遅い︕︕︕ ­ JavaScriptを有効にした状態でなければならないので、必ずヘッドレスChromeなどでテストすることになる ­ 分業のほうが効率がいい（⼀⼈や少数でやる場合はデメリット、と考える） ­ 学習コストが⾼め
6. SPAのメリット ­ バックエンドと疎結合になる ­ 密結合のところに⾊々書いたので省略 ­ 分業が可能になる ­ エキスパートに依頼できる
7. デモ ­ Stimulus 2.0.0で追加されたValue APIを使ったツイッターもどき
8. まとめ ­ Stimulusにフロント画⾯を任せるとRails Wayに乗ったまま開発がしやすい ­ handleEventメソッドを使って、Stimulusのコントローラー内でイベントを管理する⽅式がわかりやすい。 ­ イベントリスナの追加・削除の漏れが起きない ­ 2.0.0で追加されたValue APIのコールバックのおかげで動的な変更に対応しやすくなった ­ Class APIについては私のブログを読んでください https://patorash.hatenablog.com/entry/2020/12/10/040641