Stimulusのすすめ/Introduction to Stimulus

Sendai.rb #43 での発表資料です。
https://sendairb.connpass.com/event/358845/

Transcript

1. Stimulusのすすめ Railsエンジニアのサイドスキルとしてのフロントエンド開発 2025.07.25 Sendai.rb #43 #sendairb あのぶる 𝕏: @thatblue_plus : @thatblue.bsky.social
2. JS、どのくらい書いてますか？
3. 「RubyとRails(+SQL)だけ分かってればOK」みたいな 現場は実はあんまり多くない気がする(個人の感想です) • 例1・Webアプリケーション開発の現場: チームにフロントエンドがメインの エンジニアも居るが、そこそこフロントも触らないといけない ◦ もしくは、フロントエンドと完全に二足のわらじ • 例2・スマホアプリ開発の現場: サービス側のフロントはネイティブアプリな ので完全にノータッチだが、バックオフィスツールの開発がバックエンド (Rails)チームの業務になっている • 例3・社内システム開発の現場など: あんまりフロントをリッチに作る要件が なく、フロント専任のメンバーをアサインする程の必要性がない
4. 「RubyとRails(+SQL)だけ分かってればOK」みたいな 現場は実はあんまり多くない気がする(個人の感想です) • 例1・Webアプリケーション開発の現場: チームにフロントエンドがメインの エンジニアも居るが、そこそこフロントも触らないといけない ◦ もしくは、フロントエンドと完全に二足のわらじ • 例2・スマホアプリ開発の現場: サービス側のフロントはネイティブアプリな ので完全にノータッチだが、バックオフィスツールの開発がバックエンド (Rails)チームの業務になっている • 例3・社内システム開発の現場など: あんまりフロントをリッチに作る要件が なく、フロント専任のメンバーをアサインする程の必要性がない 今回のターゲットは主にここ
5. 必要になったとして、いまどきのJSフレームワークを がっつり使うほどではないことが多い
6. そこで「控えめなJavaScriptフレームワーク」であるStimulusのすすめ ※the 上司の受け売り Railsがなくても使えます
7. Rails7からデフォルトになった、Hotwireのコンポーネントのひとつ • Turbo ◦ Turbo Native • Stimulus • (Strada?) Stimulusとは？
8. 「Stimulus=刺激」の名のとおり、何かしらの画面操作を起点とした処理(だいた いイベント処理に相当)を宣言的に記述するためのJSフレームワーク ⇒「猫でもわかるHotwire入門 Turbo編」によると、「カオスになりがちな JavaScriptのコードにレールを敷く役割を担っている」とのこと Stimulusとは？
9. ドキュメントトップページのJSを再現
10. HTML部分 <div data-controller="hello"> <input data-hello-target="name" type="text" placeholder="your name"> <button data-action="click->hello#greet">Greet</button> <div data-hello-target="output" id="hello-target"></div> </div>
11. Stimulusのコード import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js" window.Stimulus = Application.start() Stimulus.register("hello", class extends Controller { static targets = ["name", "output"] greet() { this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!` } }) targetの中身は普通に HTMLElement
12. いや、これでよくね？🤔 const greetButton = document.getElementById("greet") greetButton.addEventListener("click", () => { const name = document.getElementById("name") const outputTarget = document.getElementById("hello-target") outputTarget.textContent = `Hello, ${name.value}!` })
13. それはそう…ではあるんだけど • HTML(≒ビューファイル)側が主導権を持っている ◦ viewファイルを見ればどこにJSの処理が組み込まれているかが分かるのはRails主体のアプリ ケーションとしては便利 ◦ 「8割がたの機能はサーバサイドで完結するが、ちょっとした便利な操作をJSで実装したい」 というケースに向いている(都道府県選択⇒市町村のプルダウン生成、など) ◦ 例えば「2010年代にjQueryベースで書かれたコードをいい加減モダンにしたいんだけど」と いう需要には実際ピッタリだと思う • がっつりビルドプロセスを組まなくてもCDNで読み込めば動く • 「控えめ」であるがゆえにTurboとも組み合わせやすい ◦ ついでにRequest.JS for Railsと組み合わせると画面操作をトリガーにして非同期で検索結果 を画面に反映させる、なんて処理もわりと簡単に実装できます Rails側でビューを管理できて便利
14. ライフサイクルコールバックもある
15. ついでに 「カルーセルメニュー」「アコーディオン」「ダイアログ」「ドラッグ&ドロッ プによる並べ替え」など、よくある機能がパッケージとして用意されている https://www.stimulus-components.com/
16. TypeScriptとはちょっと相性が悪い(らしい)かも…？ export default class MyController extends Controller { static values = { code: String // ここの型定義はTSは認識しない } declare codeValue: string // 二重に定義する手間がある declare readonly hasCodeValue: boolean }
17. 参考資料 • Stimulus 公式ドキュメント ◦ https://stimulus.hotwired.dev/ • 猫でもわかるHotwire入門 Turbo編 ◦ https://zenn.dev/shita1112/books/cat-hotwire-turbo