Railsガイドのハンズオンを進めている際の削除ボタンの実装で詰まった時のお話です。
概要
Railsガイドに言われるまま削除ボタンを実装しました。
<h1><%= @article.title %></h1>
<p><%= @article.body %></p>
<ul>
<li><%= link_to "Edit", edit_article_path(@article) %></li>
<li><%= link_to "Destroy", article_path(@article), data: {
turbo_method: :delete,
turbo_confirm: "Are you sure?"
} %></li>
</ul>しかし、削除ボタンをクリックしても確認ダイアログも表示されず、記事の削除もできませんでした。
解決方法
以下のコマンドを実行してimportmap、turbo、stimulusを有効にする。
rails importmap:install
rails turbo:install stimulus:install※gemがインストールされていない場合は下記コマンドでgemをインストールしてから実行してください。
gem "importmap-rails" #ESMとimportmapを使用して、トランスパイルやバンドルなしでRailsのモダンなJavaScriptを管理
gem "turbo-rails" #JavaScriptを一切記述することなく、シングルページのWebアプリケーションのようなスピードを実現
gem "stimulus-rails" #あなたがすでに持っているHTMLのための控えめなJavaScriptフレームワーク原因
原因としてRuby on Rails 7.0では、rails-ujsが標準構成から外れ、Turboが標準構成に入ったことが挙げられます。
それに伴い、Deleteが機能せず、確認メッセージも表示されなくなりました。
Turbo Framesとは
Turbo Framesは、Webアプリケーションの一部分を非同期的に更新するための技術であり、Turboフレームワークの一部です。
Turboを利用することでページの全体を再読み込みすることなく、特定の一部分だけを更新できます。
これにより、ユーザーエクスペリエンスが向上し、ページ遷移の待ち時間が少なくなります。
Turbo Framesは、リンクのクリック時やフォームのサブミット時にサーバーから部分的なページを取得し、現在のページに追加または置換します。
これにより、必要な情報を素早く取得できます。
Turbo FramesはTurboフレームワークの一部であり、Railsで使用する場合はturbo-railsというgemが提供されており、TurboとRailsの統合を簡単に行うことができます。
Gemをインストールすることで、Turbo Framesの機能を利用し、Railsアプリケーション内で非同期通信を実装できます。
rails-ujsとは
rails-ujsは、Rails6以前に組み込まれているJavaScriptライブラリで、Webアプリケーションのインタラクティブな機能を強化します。
主な役割は非同期通信（Ajax）のサポート、リモートフォームの処理、リンクの処理、JavaScriptのリモート実行になります。
rails-ujsはRailsアプリケーションで簡単に使え、初心者の方でも理解しやすいのが特徴です。
