【Rails7】StimulusとBootstrap 5トーストでフラッシュメッセージを表示

概要

このガイドでは、Bootstrap 5のトースト機能とStimulusを組み合わせてRailsアプリケーションにフラッシュメッセージを表示する方法を説明します。Bootstrapのトーストは、ユーザーに重要な情報を簡潔に提示するのに適しています。Bootstrapトーストの詳細はこちらで確認できます。

手順

Stimulusコントローラの作成

まず、以下のコマンドを使用してStimulusコントローラを生成します。

./bin/rails generate stimulus toast

コントローラの実装

app/javascript/controllers/toast_controller.js に以下のようにコードを記述します。

app/javascript/controllers/toast_controller.js

import { Controller } from "@hotwired/stimulus"
import { Toast } from "bootstrap"

// Connects to data-controller="toast"
export default class extends Controller {
  connect() {
    this.element.querySelectorAll('.toast').forEach(toastNode => {
      let toast = new Toast(toastNode);
      toast.show();
    });
  }
}

ビューの設定

フラッシュメッセージを表示するためのビューを設定します。app/views/shared/_flash_message.html.erb に以下を記述します。
fontawesomeが入っていますが、使って無ければ消しても問題ありません。

<div id="toast-container" data-controller="toast">
  <% flash.each do |message_type, message| %>
    <div class="mb-2 toast border-<%= message_type %>" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header text-<%= message_type %>">
        <% if message_type.to_s == "success" %>
          <i class="fas fa-check-circle me-1"></i>
        <% else %>
          <i class="fas fa-exclamation-circle me-1"></i>
        <% end %>
        <strong class="me-auto"><%= message_type.to_s.capitalize %></strong>
        <button class="btn-close" data-bs-dismiss="toast"></button>
      </div>
      <div class="toast-body"><%= message %></div>
    </div>
  <% end %>
</div>

このコードは、Bootstrapのトーストコンポーネントを利用して、フラッシュメッセージを動的に表示します。data-controller="toast" 属性によって、Stimulusコントローラがこのビュー要素と結びつきます。

トーストの動作

Bootstrapのトーストはデフォルトで一定時間表示された後、自動的に非表示になります。

実装例のスクリーンショット

以下は、成功と失敗のフラッシュメッセージがどのように表示されるかの例です。

• 成功時のフラッシュメッセージ：
  

• 失敗時のフラッシュメッセージ：