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
StimulusJSでカウンタをアニメーション化する（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Create a Animated Counter in Stimulus | Rails Designer 原文公開日: 2025/02/27 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 以下のような目的に使える汎用のカウンタ用Stimulusコントローラを常時使えるようにしておくと、何かと便利です。 値下げをアニメーション表示することでユーザーの注目を集める（例: $99がたったの$49ドルに！） タイマーで時間経過を表示する Stimulusでこうした機能を作る方法を見ていくことにしましょう。 Stimulusコントローラを書くときの定番作業として、まずHTMLを書いてみましょう
Rails: Stimulusのカスタムアクションオプションは同時に複数指定できる｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Advanced Stimulus: Custom Action Options | Rails Designer 原文公開日: 2024/12/05 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 Stimulusでは、data-actionのアクションに独自のオプションを登録できます。以下の記事でも示したように、Stimulusのアクションにはkeypress->input#validate:preventのようなさまざまなオプションを追加できます。 Stimulusで知っておきたい10の機能（翻訳） :preventの部分がアクションのオプ
Rails: Hotwire流のモーダルをStimulusやTurbo FramesやTurbo Streamsで作る（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Binary Solo | Hotwire Modals in Ruby on Rails with Stimulus and Turbo Frames 原文公開日: 2024/02/21 原著者: Ayush Newatia 参考: アクセシビリティ - Wikipedia 日本語タイトルは内容に即したものにしました。 モーダルは Webで広く使われていますが、アクセシビリティに配慮して構築されていることはめったにありません。モーダルを表示すると背景が不活性（inert）になっても、スクリーンリーダーとキーボードだけを使っているユーザーには引き続き背景が表示されたりします。 しかし、まずはモーダルのアクセシビリティを高めるために何をする必要があるかを見ていきましょう。 🔗 モーダルのアクセシビリティを改善するにはどうすればよい
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つの振る舞いを追加し（例: クリップボードにコピーするためのコントローラや、アップロード状況を表示するコントローラ
Stimulusコントローラでdisconnectを書く理由（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Why Disconnect in Stimulus Controllers | Rails Designer 原文公開日: 2024/12/02 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています Stimulusのdisconnectメソッドは、initializeとconnectに続く第3のライフサイクルメソッドです。 disconnectが呼び出されるタイミングは、DOMからコントローラが削除されるときです。StimulusはDOM要素をトラッキングするためにMutationObserverを使っています。 disconnectメソッド内では、ティアダウン（teardown: 終了処理
Rails: モデルのdivタグをTurbo StreamとStimulusで動的に差し替える（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Recipe: Swapping out a model div with Turbo Streams and Stimulus | justin․searls․co 原文公開日: 2024/07/12 原著者: Justin Searls -- Test Doubleの共同創業者です 日本語タイトルは内容に即したものにしました。 RailsとHotwireの組合せは、動的な振る舞い（例: ユーザー操作へのレスポンスをHTMLとしてネットワーク経由で送信することでDOMを置き換える）について実に優れていますが、その処理内では半ダースものファイルを操作する必要があるため、、全体の印象として面倒に感じられます。 そもそもRails自身が常にそうなっています（1つ機能を足すためにルーティング/モデル/コントローラ/ビューなどの更新が必
Rails: content_forをハックしてdata-*属性をDOMにプッシュする（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Abusing Rails' content_for to push data attributes up the DOM | justin․searls․co 原文公開日: 2024/07/01 原著者: Justin Searls -- Test Doubleの共同創業者です 日本語タイトルは内容に即したものにしました。 なお、特定のページでのみ<body>にdata-controller="filterable"属性を設定したい場合は、コントローラかアクションで、それが必要なページでのみ臨時にレイアウトを切り替える方がシンプルなのかなと思いました↓が、著者に問い合わせると「レイアウトがかなり複雑なので、属性以外同じレイアウトが重複するリスクは避けたい」とのことでした。 参考: 2.2.14.1 コントローラ用のレイアウトを
Rails: Tailwind + Stimulusで2FA/OTP/SMS認証用の6桁フィールドを作る（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Making a nice 2FA / OTP / SMS field with Tailwind & Stimulus | justin․searls․co 原文公開日: 2024/08/08 原著者: Justin Searls 日本語タイトルは内容に即したものにしました。 というわけで、今日はBeckyの新アプリでメールベースの認証フローの一部となるささやかなUIを構築しました。 （まだリリースしておらず、スクリーンキャストを録画するのもおっくうなので、ひとまずこのフィールドが完璧に動いているものとお考えください、どうぞよろしく） 何らかのサイトにログインすると、認証アプリからTOTP（タイムベースのワンタイムパスワード）1を自動入力したり、SMSやメールで送信されたコードをコピーして貼り付けたりするときに、（私のように）
Railsフロントエンド: ホットキーをStimulusで追加する（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: How to add Hotkeys to your Rails App with Stimulus | Rails Designer 原文公開日: 2024/02/22 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています アプリが育ってくると画面数も増えてきます。今のうちに、ユーザーがアプリ内を移動する別の方法も追加しておくことを検討しましょう。今回はキーボードショートカット（ホットキー）を導入します。 ホットキー（hotkey）による移動とは、ユーザーがマウスクリックしなくても（Web）アプリの画面上を素早く移動して操作する、キーボードショートカットの実装を指します。 幸い、ホットキーをR
Railsの技: TailwindスタイルのCSSトランジションをStimulusJSで行う（翻訳）｜TechRacho by BPS株式会社
2022.10.17 Railsの技: TailwindスタイルのCSSトランジションをStimulusJSで行う（翻訳） StimulusJSでUI要素をビルドしたことがあるなら、きっとページ上の要素の表示・非表示を切り替えるコードを書いたことがあるでしょう。これまでの私たちは、モーダルダイアログを表示するときやパネルをスライドさせるときに以下のようなコントローラコードをひとつ覚えで書いていたものです。 this.modalTarget.classList.remove("hidden") UIデザインをレベルアップさせる目的で、トランジション（transition）1で画面上の要素の表示・非表示を滑らかに切り替える方法が使えます。トランジションを使うと、不透明な要素をじわじわ透明にしたり、要素を表示位置にスライドインしたりできるようになります。 CSSのtransitionプロパティで
Railsの技: StimulusJSで使えるキーボードショートカットのライブラリ（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Adding keyboard shortcuts and hotkeys to StimulusJS | Boring Rails: Skip the bullshit and ship fast 原文公開日: 2022/07/11 原著者: Matt Swanson サイト: Boring Rails 日本語タイトルは内容に即したものにしました。 キーボードショートカットは、Webアプリケーションのユーザーエクスペリエンスを高めて使い勝手を改善する優れた方法のひとつです。ホットキーの使いこなし方を知らない人にとっても、たとえばescキーを押すとモーダルダイアログを閉じられるといった小さな心配りひとつが、アプリケーションの印象に大きく影響することもあります。 Stimulusにはデフォルトのホットキー機能が組み込まれていません。
Railsの技: StimulusJSのコントローラを"self-destructing"にする（翻訳）｜TechRacho by BPS株式会社
UXを改善するためにJavaScriptをほんのちょっぴり加える必要に迫られることがたまにあります。昔のフルスタック開発者は、そういうときにjQueryを以下のようにページに直接追加することがよくありました。 <script type="application/javascript"> $(".flash-container").delay(5000).fadeOut() $(".items").last().highlight() </script> もちろんこれでも動きますが、ベストとは言えません。 Hotwireアプリでは、"self-destructing"なStimulusコントローラを使えば同じことができます。 self-destructingとは？ "self-destructing"なStimulusコントローラは、何かコードを少し実行してからthis.element.re
Better Stimulusガイド 09: Turbolinks（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Global Teardown - Better StimulusJS 原文更新日: 2020/10/28 原著者: leastbad、Adrien Poly サイト: Home - Better StimulusJS グローバルにteardownする こんなときに使いたい Turbolinksは、ページから離れる前にページの情報をキャッシュします。同じページを再度開くと、最初にキャッシュされたバージョンがプレビューに表示されて、続いてコンテンツがリフレッシュされます。 このため、キャッシュする前の状態に過渡的な変更を加えると、そのコンテンツは消えてしまいます。 この状況を修正するには、DOMを操作するコントローラすべてにteardownメソッドを追加して、変更をロールバックする必要があります。以下のスニペットをたとえばapp/
Railsの技: StimulusJSコントローラからRailsの環境変数にアクセスする（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Accessing Rails environment variables from a StimulusJS Controller | Boring Rails: Skip the bullshit and ship fast 原文公開日: 2022/01/20 原著者: Matt Swanson サイト: Boring Rails 環境変数はRailsアプリを設定するのによい手段です。Rails.env変数を用いれば、development環境やtest環境やproduction環境に応じて振る舞いを変更できますし、アプリケーションに独自の環境変数を追加してAPIトークンやグローバル設定に使うことも可能です。 StimulusにはHTMLのdata-*属性を読み出すvalues APIがありますが、コントローラを作成するたびに
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
