画像のボタンがクリックできない？target プロパティについての初歩的な勘違い｜TechRacho by BPS株式会社
2025.08.18 画像のボタンがクリックできない？target プロパティについての初歩的な勘違い TL; DR click イベントでボタンの要素を参照したい場合は target プロパティではなく currentTarget プロパティを使う。 顛末 事の発端 あるプロジェクトで、SVG画像を埋め込んだボタンのクリックイベントが作動しないというので、img 要素に pointer-events: none を設定しているコードをレビューしました。試してみると、確かに pointer-events: none を設定しないとボタンが作動しません。再現コードは以下のようなものですが、JavaScript はレビュー範囲外の既存箇所に属していました。当時は私も原因が分からなかったので、そういうものかと思って Approve してしまいました。 再現コード HTML <a href="#"
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-*属性を読み書きできるようにするものです
JavaScriptのif/else地獄をリファクタリングで解消する（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Refactoring an if/else hell in JavaScript | Rails Designer 原文公開日: 2025/06/06 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 利便性のため、コードのdiffも追加しています。 JavaScript: if/else地獄をリファクタリングで解消する（翻訳） 本記事は、私の近著『JavaScript for Rails Developers』から抜粋してWeb用に手を加えたものです。ぜひお買い求めください✌️。 コードを書くという作業は、直線的には進みません。真っ白なキャンバスをにらみつけていれば何を書けばよいかがわか
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つの振る舞いを追加し（例: クリップボードにコピーするためのコントローラや、アップロード状況を表示するコントローラ
WebフォームをMacのコマンド+Returnキーで送信可能にするスクリプト（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Make Command-Return submit your web form | justin․searls․co 原文公開日: 2024/07/09 原著者: Justin Searls -- Test Doubleの共同創業者です 日本語タイトルは内容に即したものにしました。 どうもこんにちは。Macユーザーがフォーム内の任意の場所でコマンド+Returnキーを押して送信可能にするのは、Webアプリを手軽にクールでモダンにする方法の1つです。 Webサイトによっては、Mac以外のプラットフォームでControl+Enterキーに割り当てていることがありますが、私は気にしません（実を言うと気にしていた時期もありました: 数年前にいくつかのWebアプリでControl+Enterキーによる送信を追加したところ、複数のWind
npxを使って一時的に特定バージョンのnodeとnpmで「npm install」する｜TechRacho by BPS株式会社
小ネタです、タイトルにはnpm installと書きましたがもちろんnpm startなどにも使えます。 TL;DR npx --package=node@16.20.2 --package=npm@8.19.4 -- npm install 説明 最近はNodeインストール時にデフォルトで一緒にインストールされるnpx、これは例えば npx create-next-app@latest （https://nextjs.org/docs/app/api-reference/create-next-appより など、その場で手軽にnodeパッケージを実行する時に使われたりします。 ところでこのnpxは実行したいコマンドのパッケージのバージョンを指定するオプションがありますが、さらに 実行したいコマンドと別にパッケージのバージョンを指定できる、しかも--packageの書式なら複数OK という
GAS: Slackからフォーム入力でDocBaseのメモを生成したい｜TechRacho by BPS株式会社
皆様こんにちは、BPSの協力会社として横浜を拠点に活動しております、株式会社ECNのFuseです。 突然ですが、みなさんはDocBase、使ってますか？ ECNではDocBaseを議事録の記録だけでなく、TechRachoの記事の下書きを保存するスペースとしても使っています。 ですが… 解決したい問題 現状、新しい記事を書こうと思った時には記事の執筆状況を管理するためのスプレッドシートに手作業で行を追加し、手作業でテンプレートから新しいメモを生成し…と手作業だらけです。 現状に特に不満はなかったのですが事故が怖いのと新しい技術を身につけたかったので ワークフローで便利にしていきましょう。 目次 まえがき 解決したい問題 目次 使う技術やサービス Slackから表にデータを追加したい 下準備 ワークフロー作成 データの追加に反応してGASを走らせる プロジェクト作成 GASが自動で走るように
supabase + Next.jsでトランザクションを実装する方法を探った｜TechRacho by BPS株式会社
BPSの協力会社として横浜を拠点に活動しております、株式会社ECNのすぎもです。 今回はsupabaseでトランザクションを行うのにかなり悩んだのでメモがてら記事にしてみました。 余談 supabaseについて軽く 本題に入る前にsupabaseについてです。 参考: The Open Source Firebase Alternative | Supabase FirebaseやAmplifyなどさまざまある中supabaseは他と違う特徴がいろいろあって一番今後も使っていきたいBaaSの一つです。 ほかのBaaSとの大きな違いはデータベースがRDBでPostgreSQLをデータベースとしていて既存の知識が活かしやすかったりsupabaseクライアントの機能も充実している印象があります。 データベースからTypeScriptの型を自動生成できることもとてもつよつよポイントかなという感じで
Rails: Webpackをesbuildに移行してJSのビルドを縮小・高速化（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: How I migrated a Rails app from Webpack to esbuild and got smaller and faster JS builds | Arkency Blog 原文公開日: 2022/08/29 原著者: Jakub Kosiński サイト: Arkency 原文の章立ての一部を訳文で変更しています。 先週、私はJavaScriptコードが30万行を超えるかなり大規模なプロジェクトで、Webpack 4をesbuildに移行する作業を担当しました。私たちのRailsプロジェクトではJavaScriptスタックをメインアプリケーションに統合するのにWebpackerを使っていました。ここ数か月はもっぱら長時間のビルドと格闘し続け、さらにWebpackerが推奨ライブラリでなくなったこ
週刊Railsウォッチ: 中高生国際Rubyプログラミングコンテスト2022、W3Cの分散型識別子仕様が勧告にほか（20220726後編）｜TechRacho by BPS株式会社
こんにちは、hachi8833です。 ／ 夏場に注意！「電気火災」 熱や衝撃に弱いリチウムイオン電池が突然発火 ＼https://t.co/4U8adxnRo3 夏場に注意が必要なのが「#電気火災」です。特に気を付けなければいけないのが、スマートフォンなど電子機器に搭載されている「リチウムイオン電池」です。 #newsdig #BSN — TBS NEWS DIG Powered by JNN (@tbsnewsdig) July 20, 2022 つっつきボイス:「熱と衝撃が両方加わるとヤバそう」「そういえば自動車にノートPC置きっぱなしにしてた😅」「それヤバいですやん」 週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたと
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が行うからです。 この方法が使えない場合 コントローラのコー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
