この記事は「RUNTEQ Advent Calendar 2023」の22日目に参加しています
はじめに
こんにちは、あっぴー(@super-appy)と申します。
プログラミングスクールに通ってRuby on Railsを学習しています。
初学者のため、内容に誤りや不足がある場合はコメント等いただけますと幸いです。
宜しくお願い致します。
記事の概要
現在、ポートフォリオとなるアプリを開発しています。
カリキュラムではBootstrapを使っていましたが、今回はTailwindCSSを使用しています。
TaillwindCSSでのフラッシュメッセージの実装についてまとめてみました。
完成イメージ
（Googleのアラートが入っていますが、ご容赦ください...）
環境
- Rails 7.0.8
- TailwindCSS 3.3.5
実装
1. ヘルパーメソッドとして背景の色を指定する関数を定義
module ApplicationHelper
def flash_background_color(type)
case type.to_sym
when :notice then "bg-green-500"
when :alert then "bg-red-500"
when :error then "bg-yellow-500"
else "bg-gray-500"
end
end
end
to_sym：文字列で受け取ったtypeをシンボルの形に変換して条件分岐をしています。
お知らせは緑、警告は赤、エラーは黄色、そのほかはグレーを指定しました。
他のパターンが増えても簡単に追加できるのはTailwindCSSのメリットですね！
２. フラッシュメッセージのパーシャルファイルを用意する
<% flash.each do |message_type, message| %>
<div class="<%= flash_background_color(message_type) %> px-4 py-2 rounded-md text-white mb-4">
<%= message %>
</div>
<% end %>
複数のフラッシュメッセージが出現することを想定し、パーシャルファイル内でフラッシュメッセージをループ処理します。
<%= flash_background_color(message_type) %> この部分にヘルパーメソッドの関数で指定したbg-green-500などが入ります。
3. メインのレイアウトファイルでパーシャルファイルを呼び出す
<!DOCTYPE html>
<html>
<head>
<!-- 中略 -->
</head>
<body>
<%= render 'layouts/flash_messages' %>
<%= yield %>
</body>
</html>
4. コントローラでの記述方法
class UserSessionsController < ApplicationController
def create
@user = login(params[:email], params[:password])
if @user
redirect_to root_path, success: 'Login successful'
else
flash.now[:alert] = 'Login failed'
render :new
end
end
end
記述方法はBootstrapと同じです！
ログイン機能の実装にはsorceryのgemを使っています。
完成！
今回は背景色を変えるだけのシンプルな実装でしたが、他にもいろいろなパターンがあるので気になる方はぜひそちらも試してみてください。
ちなみに
フラッシュメッセージだけを実装するのであれば、Bootstrapの方が圧倒的に簡単です。
処理が成功したことのアラートは以下の通り。
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
参考
最後に
TailwindCSSを上手く使ってユーザーが快適に使えるアプリを作りたいです！
ご参考になれば幸いです。