Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stimulusのススメ

patorash
January 20, 2021

 Stimulusのススメ

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

patorash

January 20, 2021
Tweet

More Decks by patorash

Other Decks in Programming

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