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のすすめ/Introduction to Stimulus
Search
thatblue
July 25, 2025
Programming
0
11
Stimulusのすすめ/Introduction to Stimulus
Sendai.rb #43 での発表資料です。
https://sendairb.connpass.com/event/358845/
thatblue
July 25, 2025
Tweet
Share
More Decks by thatblue
See All by thatblue
Kaigi on Rails 2025 お土産話 / Trip Stories of Kaigi on Rails 2025
thatblue
0
19
RubyKaigi 2025 お土産話 / Trip Stories of RubyKaigi 2025
thatblue
0
5
発表資料テンプレート / My slide template
thatblue
0
410
GitHub Pagesで構築したブログをスマホ対応させてみた / make mobile-compatible with lightweight css framework
thatblue
0
260
Sendai.rbコミュニティ紹介 2022 / Introduction of Sendai.rb 2022
thatblue
0
84
Rails Girls Sendaiコミュニティ紹介2022 / Introduction of Rails Girls Sendai 2022
thatblue
0
100
競技プログラミングへのお誘い~私と競プロ友達になってください / Invitation to Competition Programming
thatblue
1
770
好みのコーヒー探し / find my favorite coffee
thatblue
0
530
Rails Girls Sendai 2ndの後日談としてのSendai.rb / Sendai.rb, As a After Story of Rails Girls Sendai 2nd
thatblue
0
74
Other Decks in Programming
See All in Programming
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
Software Architecture
hschwentner
6
2.3k
モテるデスク環境
mozumasu
3
1.3k
Devoxx BE - Local Development in the AI Era
kdubois
0
140
Pythonに漸進的に型をつける
nealle
1
130
オンデバイスAIとXcode
ryodeveloper
0
130
Cursorハンズオン実践!
eltociear
2
1.2k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
510
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
三者三様 宣言的UI
kkagurazaka
0
230
Go言語はstack overflowの夢を見るか?
logica0419
0
610
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Agile that works and the tools we love
rasmusluckow
331
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Side Projects
sachag
455
43k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Balancing Empowerment & Direction
lara
5
700
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Site-Speed That Sticks
csswizardry
13
930
Unsuck your backbone
ammeep
671
58k
Transcript
Stimulusのすすめ Railsエンジニアのサイドスキルとしてのフロントエンド開発 2025.07.25 Sendai.rb #43 #sendairb あのぶる 𝕏: @thatblue_plus :
@thatblue.bsky.social
JS、どのくらい書いてますか?
「RubyとRails(+SQL)だけ分かってればOK」みたいな 現場は実はあんまり多くない気がする(個人の感想です) • 例1・Webアプリケーション開発の現場: チームにフロントエンドがメインの エンジニアも居るが、そこそこフロントも触らないといけない ◦ もしくは、フロントエンドと完全に二足のわらじ • 例2・スマホアプリ開発の現場:
サービス側のフロントはネイティブアプリな ので完全にノータッチだが、バックオフィスツールの開発がバックエンド (Rails)チームの業務になっている • 例3・社内システム開発の現場など: あんまりフロントをリッチに作る要件が なく、フロント専任のメンバーをアサインする程の必要性がない
「RubyとRails(+SQL)だけ分かってればOK」みたいな 現場は実はあんまり多くない気がする(個人の感想です) • 例1・Webアプリケーション開発の現場: チームにフロントエンドがメインの エンジニアも居るが、そこそこフロントも触らないといけない ◦ もしくは、フロントエンドと完全に二足のわらじ • 例2・スマホアプリ開発の現場:
サービス側のフロントはネイティブアプリな ので完全にノータッチだが、バックオフィスツールの開発がバックエンド (Rails)チームの業務になっている • 例3・社内システム開発の現場など: あんまりフロントをリッチに作る要件が なく、フロント専任のメンバーをアサインする程の必要性がない 今回のターゲットは主にここ
必要になったとして、いまどきのJSフレームワークを がっつり使うほどではないことが多い
そこで「控えめなJavaScriptフレームワーク」であるStimulusのすすめ ※the 上司の受け売り Railsがなくても使えます
Rails7からデフォルトになった、Hotwireのコンポーネントのひとつ • Turbo ◦ Turbo Native • Stimulus • (Strada?)
Stimulusとは?
「Stimulus=刺激」の名のとおり、何かしらの画面操作を起点とした処理(だいた いイベント処理に相当)を宣言的に記述するためのJSフレームワーク ⇒「猫でもわかるHotwire入門 Turbo編」によると、「カオスになりがちな JavaScriptのコードにレールを敷く役割を担っている」とのこと Stimulusとは?
ドキュメントトップページのJSを再現
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>
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
いや、これでよくね?🤔 const greetButton = document.getElementById("greet") greetButton.addEventListener("click", () => { const
name = document.getElementById("name") const outputTarget = document.getElementById("hello-target") outputTarget.textContent = `Hello, ${name.value}!` })
それはそう…ではあるんだけど • HTML(≒ビューファイル)側が主導権を持っている ◦ viewファイルを見ればどこにJSの処理が組み込まれているかが分かるのはRails主体のアプリ ケーションとしては便利 ◦ 「8割がたの機能はサーバサイドで完結するが、ちょっとした便利な操作をJSで実装したい」 というケースに向いている(都道府県選択⇒市町村のプルダウン生成、など) ◦
例えば「2010年代にjQueryベースで書かれたコードをいい加減モダンにしたいんだけど」と いう需要には実際ピッタリだと思う • がっつりビルドプロセスを組まなくてもCDNで読み込めば動く • 「控えめ」であるがゆえにTurboとも組み合わせやすい ◦ ついでにRequest.JS for Railsと組み合わせると画面操作をトリガーにして非同期で検索結果 を画面に反映させる、なんて処理もわりと簡単に実装できます Rails側でビューを管理できて便利
ライフサイクルコールバックもある
ついでに 「カルーセルメニュー」「アコーディオン」「ダイアログ」「ドラッグ&ドロッ プによる並べ替え」など、よくある機能がパッケージとして用意されている https://www.stimulus-components.com/
TypeScriptとはちょっと相性が悪い(らしい)かも…? export default class MyController extends Controller { static values
= { code: String // ここの型定義はTSは認識しない } declare codeValue: string // 二重に定義する手間がある declare readonly hasCodeValue: boolean }
参考資料 • Stimulus 公式ドキュメント ◦ https://stimulus.hotwired.dev/ • 猫でもわかるHotwire入門 Turbo編 ◦
https://zenn.dev/shita1112/books/cat-hotwire-turbo