Q&A
実現したいこと
- タグ削除時の確認ダイアログ実装
- 未使用タグの自動削除機能実装
発生している問題・分からないこと
問題概要:
問題: タグ削除時に確認ダイアログが表示されない
発生環境: Rails 8.0.1 + Stimulus + Turbo 環境
期待動作: タグ削除リンククリック時に確認ダイアログが表示され、ユーザーが確認できる
現状: クリック時に確認なしで削除処理が実行される
原因分析:
主要原因: Rails 7 以降でデフォルト設定が変更され、rails-ujs が自動読み込みされなくなった
エラーメッセージ
error
1ブラウザの検証のコンソール画面： 2 3GET http://127.0.0.1:4000/assets/controllers net::ERR_ABORTED 404 (Not Found)Understand this errorAI 4about:blank:1 Blocked aria-hidden on a <body> element because it would hide the entire accessibility tree from assistive technology users. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden. <body data-theme="default" aria-hidden="true" class="dark">…</body>
該当のソースコード
Ruby
1# https://prompty-cca7f3e23935.herokuapp.com/prompts 2# https://github.com/ttaarroo77/bookmarkly 3# https://uithub.com/ttaarroo77/bookmarkly?accept=text%2Fhtml&maxTokens=50000000 4 5 6
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
以下のレポートを cursor に入れて Claude 3.7-sonnet に聞いてみたが、挙動が変わらなかった。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
2.1. 問題と対策 (詳細)
問題概要:
問題: タグ削除時に確認ダイアログが表示されない
発生環境: Rails 8.0.1 + Stimulus + Turbo 環境
期待動作: タグ削除リンククリック時に確認ダイアログが表示され、ユーザーが確認できる
現状: クリック時に確認なしで削除処理が実行される
原因分析:
主要原因: Rails 7 以降でデフォルト設定が変更され、rails-ujs が自動読み込みされなくなった
関連問題:
- Turbo との競合 (Turbo がイベントを横取りしている可能性)
- Stimulus コントローラーの接続問題
- JavaScript アセットのロード問題
- パッケージバージョンの不一致
実施した対策と仮説検証:
Stimulusコントローラーの接続確認:
- 仮説: Stimulus コントローラーが正しく接続されていない
- 対策:
- ビューの data 属性 (data-controller, data-action) が正しく設定されているか確認。
- Stimulus のデバッグモードを有効化 (application.debug = true) し、コンソールログでコントローラーが読み込まれているか確認。
- tag_controller.js 内で console.log を使用して、confirmDelete メソッドが呼び出されているか確認。
Turboとの競合調査:
- 仮説: Turbo がクリックイベントを横取りし、確認ダイアログが表示される前にリクエストを送信している。
- 対策:
- 一時的に data: { turbo: false } をリンクに追加し、Turbo を無効化して動作確認。
- Turbo のイベント (turbo:before-visit) をフックし、data-confirm 属性を持つ要素に対して確認ダイアログを表示する処理を追加 (高度な対策)。
Rails UJS の設定確認:
- 仮説: Rails 7/8 では rails-ujs が自動読み込みされなくなったため、data-confirm 属性が機能していない。
- 対策:
-
application.jsで@rails/ujsをimportし、Rails.start()を実行
-
package.jsonを確認し、必要に応じて@rails/ujsのバージョンを更新
-
JavaScript アセットのロード問題:
- 仮説: アセットパイプラインの設定が不適切で、JavaScript ファイルが正しく読み込まれていない。
- 対策:
- 開発環境の設定 (config/environments/development.rb) で、アセットのデバッグモードとコンパイルを 有効化 (config.assets.debug = true, config.assets.compile = true)。
- bin/rails assets:clobber と bin/rails assets:precompile RAILS_ENV=development を実行し、アセットを再コンパイル。
ブラウザキャッシュの問題:
- 仮説: ブラウザに古いJavaScriptファイルがキャッシュされており、更新が反映されていない
- 対策:
- ブラウザのハードリロード (Ctrl+Shift+R / Cmd+Shift+R) を実行。
- 開発者ツールの「キャッシュの消去とハード再読み込み」を実行
- アセットのバージョニングを行い、強制的にキャッシュをクリア(config.assets.version)
現状と次のステップ:
- 現状: 一時的な対処としてインライン JavaScript による確認ダイアログを実装済み。
- 次のステップ: 上記の仮説検証を詳細に行い、根本的な原因を特定して恒久的な対策を実施する。特に Stimulus コントローラーの接続問題と Turbo との競合解決を優先的に行う。
- 未使用タグの自動削除機能実装
3.1 タグモデルの更新
コールバック機能と未使用タグ削除のクラスメソッドを追加します。
app/models/tag.rb
class Tag < ApplicationRecord
belongs_to :user
has_and_belongs_to_many :prompts
タグが使用されているプロンプト数を確認
def self.cleanup_unused_tags
Tag.left_joins(:prompts).group(:id).having('COUNT(prompts.id) = 0').destroy_all
end
プロンプトとタグの関連付けが削除された後に実行
after_commit :check_for_cleanup, on: :update
private
def check_for_cleanup
# タグに関連するプロンプトがなくなった場合、削除
self.destroy if self.prompts.count == 0
end
end
IGNORE_WHEN_COPYING_START
content_copy
download
Use code with caution.
Ruby
IGNORE_WHEN_COPYING_END
3.2 プロンプトコントローラーの更新
プロンプト更新後に未使用タグを削除する処理を追加します。
app/controllers/prompts_controller.rb
def update
@prompt = current_user.prompts.find(params[:id])
if @prompt.update(prompt_params)
# タグの更新後、未使用タグを削除
Tag.cleanup_unused_tags
flash[:success] = "プロンプトを更新しました"
redirect_to prompts_path
else
render :edit
end
end
IGNORE_WHEN_COPYING_START
content_copy
download
Use code with caution.
Ruby
IGNORE_WHEN_COPYING_END
補足
なし
回答1件
0
デフォルトでよければ、次のように、turbo_methodとturbo_confirmを利用すればダイアログが出ます。
<%= link_to user_path(user), data: { turbo_method: :delete, turbo_confirm: "削除しますか？" } %>
うろ覚えですが、Rails7から挙動が変更になったはずです。
投稿2025/04/21 08:24
総合スコア1683
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。