Chapter 18

3-8. エラーメッセージのデザイン

Masuyama
Masuyama
2022.10.15に更新

エラーメッセージのデザイン

今回は小さな変更ですが、バリデーションによるエラーメッセージの見た目を整えていきましょう。

現状の確認

開発用サーバを bin/dev で起動してから、何も入力せずにユーザー登録してみましょう。
バリデーションによるエラーメッセージが表示されますね。

image

これでもエラーメッセージとは機能しますが、もう少し目立つ形に変更します。

デザイン調整

devise でバリデーションのエラーメッセージを表示する部分テンプレートは app/views/devise/shared/_error_messages.html.erb です。

こちらの現状を確認します。

(変更前): app/views/devise/shared/_error_messages.html.erb

<% if resource.errors.any? %>
  <div id="error_explanation">
    <h2>
      <%= I18n.t("errors.messages.not_saved",
                 count: resource.errors.count,
                 resource: resource.class.model_name.human.downcase)
       %>
    </h2>
    <ul>
      <% resource.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

devise コマンドで自動生成されたものですが、特にスタイルは適用されていませんね。

このテンプレートを TailwindCSS で装飾し、以下のように変更します。

(変更後): app/views/devise/shared/_error_messages.html.erb

<% if resource.errors.any? %>
  <div id="error_explanation">
    <h2 class="text-lg mb-3 font-medium text-gray-700">
      <%= I18n.t("errors.messages.not_saved",
                 count: resource.errors.count,
                 resource: resource.class.model_name.human.downcase)
       %>
    </h2>
    <ul>
      <% resource.errors.full_messages.each do |message| %>
        <p class="leading-5 mb-2 text-red-500"><%= message %></p>
      <% end %>
    </ul>
  </div>
<% end %>

変更後の確認

では、再度エラーメッセージを表示させてみましょう。

分かりやすいところでいえば、エラーメッセージが赤くなっていることが分かるかと思います。

image

変更をコミット

今回の変更をコミットしておきましょう。

$ git add .
$ git commit -m "バリデーションエラーメッセージのデザイン調整"
$ git push