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
4
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
3
発表資料テンプレート / 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
59
Other Decks in Programming
See All in Programming
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.5k
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
310
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
950
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
110
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
900
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
Model Pollution
hschwentner
1
180
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
120
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
230
CSC509 Lecture 03
javiergs
PRO
0
320
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
210
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
950
Making Projects Easy
brettharned
118
6.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Navigating Team Friction
lara
189
15k
A Tale of Four Properties
chriscoyier
160
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Side Projects
sachag
455
43k
Speed Design
sergeychernyshev
32
1.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Bash Introduction
62gerente
615
210k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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