Stimulus: Connected・Disconnectedコールバックでtargetsの更新をトラッキングする（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Connected and Disconnected Target Callbacks with Stimulus | Rails Designer 原文公開日: 2024/09/17 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 前回の記事では、Values APIの変更コールバックについて解説しました。今回は、targetsを対象とするConnectedコールバックとDisconnectedコールバックについて解説します。 参考: Connected and Disconnected Callbacks -- Stimulus Refer
Stimulus.JS: 値の変更時にトリガーされるコールバックをコントローラで利用する（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Refactor Stimulus.js Controllers to Use Change Callbacks | Rails Designer 原文公開日: 2024/09/02 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 Stimulusのvalues APIには、「変更時に発火するコールバック」という便利な機能があります。これによって、値が変更されたときに常に応答できるようになります。🦉 values APIについて簡単におさらいしておくと、Stimulusのコントローラ要素にあるdata-*属性を読み書きできるようにするものです
Stimulusを強化するStimulus-FXにデバッグ機能を追加しました（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Enhanced debugging for Stimulus | Rails Designer 原文公開日: 2025/04/28 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 Stimulusには基本的なデバッグモードが備わっていて、これを用いればStimulusが動いているかどうかや、どのコントローラが初期化・接続されているかを表示できます。 しかしStimulusコントローラでの処理が増えてくると、もっと詳しい情報が必要になりますが、そのときにDOMとコントローラのロジックをいちいち手動で比較せずに済ませたいものです。 そこで、新しい
Stimulusで複数のCSSクラスをオンオフする方法（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: How to Toggle Multiple CSS Classes with Stimulus | Rails Designer 原文公開日: 2024/10/02 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています CSSクラスの動的な追加や削除（切り替え）は、Webアプリでよく行われる操作です。 例: hidden要素（display: none）をblock（display: block）に変更することで表示する 例: DOMの下の方にカスケードするクラスを追加する（つまりbody要素にdarkクラスを追加する） 1個の要素に複数のクラスを追加したい場合があります。私のRails De
Stimulusで知っておきたい10の機能（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Stimulus Features You (Didn’t) Know | Rails Designer 原文公開日: 2024/11/28 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 また、APIドキュメントへのリンクも追加しています。 Stimulusは、今あるHTMLで使える控えめなJavaScriptフレームワークとして喧伝されていますが、Stimulusにはおなじみの機能の他にも、あなたの知らない機能や忘れてしまった機能がいくつも詰まっています。 🔗 1: 存在確認用のプロパティ StimulusのAPI（ターゲット、CSSクラ
Stimulus.jsコントローラ間の癒着を防ぎながらイベントを中継する方法（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: A decoupled approach to relaying events between Stimulus controllers | justin․searls․co 原文公開日: 2024/08/18 原著者: Justin Searls -- Test Doubleの共同創業者です 日本語タイトルは内容に即したものにしました。 Stimulusできらめきを放つ魅力の1つは、ブラウザに長時間居座り続けるステートフルなアプリケーションを構築「しなくても」、DOMにリッチな動的振る舞いを追加できることです。 Stimulusコントローラの1つ1つは、孤島のように独立していて互いに干渉せず、1個のコントローラが1つの振る舞いを追加し（例: クリップボードにコピーするためのコントローラや、アップロード状況を表示するコントローラ
Better Stimulusガイド 08: Rails-ujs（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Submit a Form Programmatically - Better StimulusJS 原文更新日: 2022/01/29 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS フォームをプログラムで送信する <div data-controller="remote-form"> <%= form_with(model: @article, html: { data: { action: "ajax:success->remote-form#onPostSuccess" } }) do |f| %> <%= select_tag "author", options_from_collection_for_select
Better Stimulusガイド 07: SOLID原則（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Single Responsibility Principle - Better StimulusJS 原文更新日: 2020/04/13 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 単一責任の原則 特に、StimulusJSを初めて自分のアプリケーションに適用するときは、コントローラを「ページコントローラ」スタイルで書きたくなる誘惑に負けて、1個のコントローラ内に無関係な機能が散らばる結果になりがちです。誘惑に打ち勝って、コントローラを再利用可能な形で書くよう心がけましょう。 以下は両者を簡潔な形で並べたものです。 Bad <!-- page.html --> <div data-controller="page
Better Stimulusガイド 06: コントローラ間通信にコールバックを使う（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Use Callbacks to Communicate Between Controllers - Better StimulusJS 原文更新日: 2020/07/04 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 コントローラ間通信にコールバックを使う（翻訳） 単一のStimulusJSコンポーネントで複数のロジックを管理したい場合 機能を実行するために他のコントローラの値が必要な場合 あらゆるケースに対応するためにイベントをたくさん作りたくない場合 話を簡単にするために、以下の例ではカスタムイベントのコンストラクタが不要なjQueryを使っていますが、素のJavaScriptも使えます。 Bad // fir
Better Stimulusガイド 06: コントローラとDOMのマッパー（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Controller DOM Mapper - Better StimulusJS 原文更新日: 2020/03/09 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 コントローラとDOMのマッパー こんなときに使いたい あるコントローラの内部ステートに外部からアクセスしようとする場合 コントローラから別のコントローラのメソッドを呼び出す必要がある場合 たとえば、コントローラが処理を行うために、今どのページにいるのかという情報を別のコントローラから得る必要があるとします。 <!-- index.html --> <div data-controller="pagination test" data-pagination
Better Stimulusガイド 05: ライフサイクルイベントによるセットアップ・終了（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Use Lifecycle Events for Setup and Teardown - Better StimulusJS 原文更新日: 2020/07/04 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS セットアップや終了にはライフサイクルイベントを使う 🔗 1. ライブサイクルイベントを使えば、サードパーティJSライブラリとTurbolinksの互換性を完璧に保てる Bad import EasyMDE from "easymde" let editors = []; document.addEventListener("turbolinks:load", function() { document.queryS
Better Stimulusガイド 04: イベントリスナーの追加・削除はStimulusで行う（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Events - Better StimulusJS 原文更新日: 2021/07/16 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 1. マークアップにグローバルなイベントを登録する Bad connect() { document.addEventListener(...); } Good <div data-controller="gallery" data-action="resize@window->gallery#layout">...</div> layout(e) { ... } そうする理由 イベントリスナーの追加や削除はStimulusが行うからです。 この方法が使えない場合 コントローラのコー
Better Stimulusガイド 03: エラーハンドリング（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Global Error Handler - Better StimulusJS 原文更新日: 2022/02/17 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 グローバルなエラーハンドラ こんなときに使いたい Stimulusに関連するエラー（connectエラー、targetsにアクセスできないなど）やアプリケーションエラーをコントローラ内でキャッチして、SentryやHoneybadgerなどのエラートラッキングサービスに送信したい場合。 ソリューション 最初に、自分のStimulusコントローラが継承するグローバルなApplicationControllerを作成します。 このApplicationCont
Better Stimulusガイド 02: DOMステートを元に戻す（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Use <template> to Restore DOM State - Better StimulusJS 原文更新日: 2020/10/08 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 DOMステートを<template>でリストアする こんなときに使いたい 使っている外部ライブラリがHTMLの一部を削除したときに復元する必要がある場合 Turbolinksのキャッシュに備えて、ページ遷移の前に既知のステートにリストアしたい場合 Good <!-- index.html --> <div data-controller="modal"> <template data-target="modal.templat
Better Stimulusガイド:アーキテクチャ4: 名前空間化された属性（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Namespaced Attributes - Better StimulusJS 原文更新日: 2020/07/04 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 名前空間化された属性 Good <!-- index.html --> <input data-controller="filter" data-filter-param-category="cats" data-filter-param-rating="5" data-filter-param-color="black" type="text" data-action="input->filter#update"> // filter_controll
Better Stimulusガイド:アーキテクチャ3: ミックスイン（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Mixins - Better StimulusJS 原文更新日: 2020/10/08 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 3. ミックスイン Bad // overlay_controller.js import { Controller } from "stimulus"; export default class extends Controller { showOverlay(e) { // ... } hideOverlay(e) { // ... } } // dropdown_controller.js import OverlayController from "./overlay_con
Better Stimulusガイド:アーキテクチャ2: コントローラはコンフィグ可能にしよう（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Configurable Controllers - Better StimulusJS 原文更新日: 2020/07/04 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 2.コントローラはコンフィグ可能にしよう Bad <!-- index.html --> <a href="#" data-controller="toggle" data-action="click->toggle#toggle"> Toggle </a> // toggle_controller.js import { Controller } from "stimulus"; export default class extends Cont
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
