本記事は、🔽「Turbo Rails Tutorial」の学習を進めていく際の個人メモです！
🔽 前章の記事はこちら
7章 Flash messages with Hotwire
この章では6章までにHotwireを使用して作成した「見積もり」作成アプリに「フラッシュメッセージ」をつける方法を学びました。Hotwireを使用しない通常の方法より設定することは多いですが、それでも実現していることの複雑さから考えれば実装は簡単だと思いました。
やりたいこと
現状機能していないフラッシュメッセージを表示させたい。
やったこと
app/controllers/quotes_controller.rb内のcreate、update、destroyメソッド内でformat.turbo_streamの部分にflash.nowを設定する。（Turbo Streamのレスポンスではリダイレクトが発生しないため、flash.nowにします。）
respond_to do |format|
format.html { redirect_to quotes_path, notice: "見積もりを作成しました" }
format.turbo_stream { flash.now[:notice] = "見積もりを作成しました" }
end
それぞれのアクションで呼び出されるTurbo Stream用のビューに、フラッシュを追加する。
app/views/quotes/create.turbo_stream.erb
<%= turbo_stream.prepend "quotes", @quote %>
<%= turbo_stream.update Quote.new, "" %>
<%= turbo_stream.prepend "flash", partial: "layouts/flash" %>
app/views/quotes/update.turbo_stream.erb
<%= turbo_stream.replace @quote %>
<%= turbo_stream.prepend "flash", partial: "layouts/flash" %>
app/views/quotes/destroy.turbo_stream.erb
<%= turbo_stream.remove @quote %>
<%= turbo_stream.prepend "flash", partial: "layouts/flash" %>
その他やったこと
- 上記で重複しているコードをHelper化してリファクタリング
- フラッシュメッセージは一定時間で消えるようアニメーションを追加
- フラッシュメッセージは消えてもDOMが残ってしまいカーソルを当てると変化してしまうので、アニメーション終了時にDOM自体が消えるJavaScriptを追加（Stimulus Controllerを作成）
できたもの
まとめ
この章ではHotwireを使ったフラッシュメッセージの実装以外にも、Stimulus Controllerを使ったJavaScriptの追加方法についても学ぶことができました。今後、Hotwireを使って何か実装するとき、何度も見直すことになりそうな章でした！
次の章ではHotwireで空の状態を処理する方法について学びます。