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
8
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
15
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
520
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
Leading Effective Engineering Teams in the AI Era
addyosmani
7
570
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
780
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
440
CSC509 Lecture 07
javiergs
PRO
0
240
CSC305 Lecture 10
javiergs
PRO
0
220
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
12k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
180
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
180
Pythonに漸進的に型をつける
nealle
1
110
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
360
Webサーバーサイド言語としてのRustについて
kouyuume
1
4k
AkarengaLT vol.38
hashimoto_kei
1
110
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
KATA
mclloyd
PRO
32
15k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Invisible Side of Design
smashingmag
302
51k
A better future with KSS
kneath
239
18k
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