Ruby on RailsのflashでBootstrapのAlertsを使ってユーザーへのメッセージを実装する

Tweet

概要

BootstrapのAlertsは、様々なテキストメッセージを表示するのに適したコンポーネントです。

hobbycartでは以下のように使っています。

Ruby on Railsには、ユーザーへのメッセージを表示するflashという仕組みがあります。

本記事では、これらを組み合わせて、flashにメッセージを突っ込むと、BootstrapのAlertsで表示されるような仕組みを実装を考えます。

ControllerでFlashメッセージを挿入する処理

Alertのタイプは、Bootstrapでは

• primary
• secondary
• success
• danger
• warning
• info
• light
• dark

の8種類があります。

flashはHashのようにキーを指定して値を代入する扱い方ができるので、例えばsuccessメッセージを表示したいのであれば、

def create
  # ... なんらかの処理
  flash[:success] = '商品が追加されました'
end

このように書くことで実現できます。

View

Bootstrap alertsが指定するhtmlの形式は、以下の構造です。

<div class="alert alert-success" role="alert">
  内容
</div>

この構造になるようにテンプレートエンジンを記述します。

_flashes.html.erb

<% flash.each do |type,msg| %>
  
<div class="alert alert-<%=type %>" role="alert"><%= msg %></div>

<% end %>

erbで記述しましたが、slim・hamlをお使いの方は適宜読み替えてください。

flashが複数セットされている場合でも、この記述ですべて表示することができます。

このview templateを、メッセージを表示したい箇所でrenderすると完成です！

hobbycartでは、application.html.erbの共通部分にこのパーシャルを配置することで、個別ページではflashの存在を意識しなくてもよいような構造にしています。

参考

• Alerts・Bootstrap(https://getbootstrap.com/docs/4.1/components/alerts/)

Tweet