【61日目】【1日20分のRailsチュートリアル】【第7章】ユーザー登録のエラーメッセージを表示する
今日は「7.3.3 ユーザー登録のエラーメッセージ」から。
7.3.3 ユーザー登録のエラーメッセージ
ユーザー登録に失敗した場合の最後の手順として、問題が生じたためにユーザー登録が行われなかったということをユーザーにわかりやすく伝えるエラーメッセージを追加しましょう。
Railsは、このようなメッセージをUserモデルの検証時に自動的に生成してくれます。
自動的に!便利~。
$ rails console >> user = User.new(name: "Foo Bar", email: "foo@invalid", ?> password: "dude", password_confirmation: "dude") >> user.save => false >> user.errors.full_messages => ["Email is invalid", "Password is too short (minimum is 6 characters)"]
英語しかないのかな。日本語あると日本向けサービス作るとき便利かも。
app/views/users/new.html.erb
<% provide(:title, 'Sign up') %> <h1>Sign up</h1> <div class="row"> <div class="col-md-6 col-md-offset-3"> <%= form_for(@user) do |f| %> <%= render 'shared/error_messages' %> <%= f.label :name %> <%= f.text_field :name, class: 'form-control' %> <%= f.label :email %> <%= f.email_field :email, class: 'form-control' %> <%= f.label :password %> <%= f.password_field :password, class: 'form-control' %> <%= f.label :password_confirmation, "Confirmation" %> <%= f.password_field :password_confirmation, class: 'form-control' %> <%= f.submit "Create my account", class: "btn btn-primary" %> <% end %> </div> </div>
formタグの最初に<%= render 'shared/error_messages' %>
それぞれのフィールドにform-control
というクラスを追加。
ここでは、’shared/error_messages’というパーシャルをrender (レンダリング) している点に注目してください。
これはRails全般の慣習で、パーシャルは複数のコントローラにわたるビューに対し、専用のshared/ディレクトリを使用するようにしています(これは9.1.1で実現します)。
へ~。
ただし、今はまだapp/views/sharedといったディレクトリは作っていないので、表1.1で紹介したmkdirコマンドを使い、新しくディレクトリを作成する必要があります。
ディレクトリ作りました。
$ mkdir app/views/shared
パーシャルを作成して、下記の内容で更新。
$ touch app/views/shared/_error_messages.html.erb
app/views/shared/_error_messages.html.erb
<% if @user.errors.any? %> <div id="error_explanation"> <div class="alert alert-danger"> The form contains <%= pluralize(@user.errors.count, "error") %>. </div> <ul> <% @user.errors.full_messages.each do |msg| %> <li><%= msg %></li> <% end %> </ul> </div> <% end %>
pluralizeの最初の引数に整数が与えられると、それに基づいて2番目の引数の英単語を複数形に変更したものを返します。
そんなメソッドあるの!すごい!英語ならではだなぁ。
リスト7.24には、エラーメッセージにスタイルを与えるためのCSS id error_explanationも含まれていることに注目してください。
(中略)
Railsは、無効な内容で送信がされて元のページに戻されると、divで囲まれたエラー用のCSSクラスfield_with_errorsを返します。
ほぅほぅ。そのクラスを活かしてCSS追加しましょう。
app/assets/stylesheets/custom.css.scss
: #error_explanation { color: red; ul { color: red; margin: 0 0 30px 0; } } .field_with_errors { @extend .has-error; .form-control { color: $state-danger-text; } }
リスト7.18とリスト7.19のコードと、SCSSのリスト7.20を組み合わせることで、無効なユーザー登録情報を送信したときのエラーメッセージが分かりやすくなります。
よし、エラーメッセージ見てみよう。
サーバーを起動して無効なユーザーを登録。
$ rails server -b $IP -p $PORT
エラーメッセージ表示されて、エラー元のフォームが赤枠で表示されました。
いい感じですね。
今日の作業時間は【26分】。
次は「7.3.4 失敗時のテスト」から。