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
2
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
RubyKaigi 2025 お土産話 / Trip Stories of RubyKaigi 2025
thatblue
0
2
発表資料テンプレート / My slide template
thatblue
0
400
GitHub Pagesで構築したブログをスマホ対応させてみた / make mobile-compatible with lightweight css framework
thatblue
0
250
Sendai.rbコミュニティ紹介 2022 / Introduction of Sendai.rb 2022
thatblue
0
82
Rails Girls Sendaiコミュニティ紹介2022 / Introduction of Rails Girls Sendai 2022
thatblue
0
100
競技プログラミングへのお誘い~私と競プロ友達になってください / Invitation to Competition Programming
thatblue
1
760
好みのコーヒー探し / find my favorite coffee
thatblue
0
520
Rails Girls Sendai 2ndの後日談としてのSendai.rb / Sendai.rb, As a After Story of Rails Girls Sendai 2nd
thatblue
0
72
Sendai.rbコミュニティ紹介2020 / Introduction of Sendai.rb 2020
thatblue
0
58
Other Decks in Programming
See All in Programming
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
230
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
2
510
AccessorySetupKitで実現するシームレスなペアリング体験 / Seamless pairing with AccessorySetupKit
nekowen
0
210
Learn CPU architecture with Assembly
akkeylab
1
1.3k
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
rockname
2
1.5k
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
120
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
380
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
2.5k
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
iOSDC.pdf
chronos2500
2
640
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
1
510
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
11k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1371
200k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Building Adaptive Systems
keathley
43
2.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
What's in a price? How to price your products and services
michaelherold
246
12k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
A better future with KSS
kneath
239
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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