【Ruby on Rails】簡単なメモアプリの作成|バリデーションとエラーメッセージの実装

作成日: 更新日:

開発環境

  • Ruby:version 3.1.2
  • Ruby on Rails:version 7.0.4
  • Visual Studio Code:version 1.73.0
  • OS:Windows10

Ruby on Railsでバリデーションの実装手順

Ruby on Railsのバリデーションは基本的にモデルに記載されることが多いです。 今回はメモアプリの作成で使用したコードを用いて解説していきます。

モデルにバリデーションを記載する

1# memo_app\app\models\memo.rb
2class Memo < ApplicationRecord
3+     validates :title, presence: true, length: { minimum: 2, maximum: 32 }
4+     validates :description, presence: true, length: { minimum: 2, maximum: 140 }
5end

「validates」の後にカラム名を指定し、その後にバリデーションを設定していきます。 「presence: true」は空白を許可しないという意味になり、「length: { minimum: 2, maximum: 32 }」は属性の値の長さを2以上32以下にするという意味になります。 その他にも様々な制約を設定することができますので、詳しくはRuby on Rails ガイドを参考にすることをおすすめします。 Ruby on Rails ガイド:https://railsguides.jp/active_record_validations.html

ビューにエラーメッセージを記載する

1<!-- memo_app\app\views\memos\index.html.erb -->
2
3        <div class="col-box-1">
4            <h2>メモ一覧</h2>
5        </div>
6
7+         <% if @memo_new.errors.any? %>
8+             <div class="col-box-1">
9+                 <h3><%= @memo_new.errors.count %>件のエラーが発生しました。</h3>
10+                 <ul>
11+                     <% @memo_new.errors.full_messages.each do |message| %>
12+                     <li><%= message %></li>
13+                     <% end %>
14+                 </ul>
15+             </div>
16+         <% end %>
17
18        <div class="col-box-3">
19            <%= form_with model: @memo_new, url: memos_path, local: true, method: :post do |f| %>
20                <div class="memo-header">
21                    <%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>
22                </div>
23                <div class="memo-center">
24                    <%= f.text_area :description, placeholder: "メモ", class: "form-box" %>
25                </div>
26                <div class="memo-footer">
27                    <%= f.submit "作成", class: "btn" %>
28                </div>
29            <% end %>
30        </div>

バリデーションが行われた後でerrorsインスタンスメソッドを使うと、発生したエラーにアクセスできます。 「オブジェクト.errors.any?」とすることでエラーが発生していれば「true」、エラーが発生していなければ「false」となります。 また、「オブジェクト.errors.full_message」とすることで属性名の冒頭を大文字にした読みやすいメッセージを生成、それをeachメソッドで一つずつ取り出し表示するという流れになります。

コントローラーにエラーが出た場合の処理を記載する

1# memo_app\app\controllers\memos_controller.rb
2
3class MemosController < ApplicationController
4  def index
5    @memo_new = Memo.new
6    @memos = Memo.all
7  end
8
9  def create
10    @memo_new = Memo.new(memos_params)
11    @memos = Memo.all
12+     if @memo_new.save
13+       redirect_to root_path
14+     else
15+       render action: "index"
16+     end
17  end

バリデーションが行われた後にエラーが発生した場合、createアクション内で再びrenderメソッドでviewファイルを読み込む設定をします。 上記のようにすることにより、入力されたデータを残したままオブジェクトに格納されたエラー内容も渡すことができます。

CSSにバリデーションによるレイアウトが崩れるのを防ぐ記載する

1# memo_app\app\assets\stylesheets\application.css
2
3 * {
4    padding: 0;
5    margin: 0;
6    box-sizing: border-box;
7    color: #696969;
8    font-size: 16px;
9    font-family: sans-serif;
10+     list-style-position: inside;
11}
12

「list-style-position」で箇条書きのリストを表示するタグの点をインラインに設定しておきます。

1# memo_app\app\assets\stylesheets\application.css
2
3.btn {
4    border: 1px solid #d3d3d3;
5    border-radius: 6px;
6    padding: 3px 12px;
7}
8
9+ .field_with_errors {
10+     display: contents;
11+ }

また、Ruby on Railsはバリデーションによりエラーが出た箇所に自動的に「field_with_errors」というクラスを持つdivタグが、labelタグやinputタグを囲む仕様になっています。 Railsガイド:https://railsguides.jp/active_record_validations.html#%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A8%E3%83%A9%E3%83%BC%E3%82%92%E3%83%93%E3%83%A5%E3%83%BC%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B そのため、「display: contents;」で指定した要素のコンテンツ領域以外は描画されなくすれば解消できます。

おわりに

Ruby on Railsでバリデーションとエラーメッセージについて解説してきましたが、いかがだったでしょうか。 データベースに正しいデータを保存するためにバリデーションは必須とされているため、是非、様々な制限をかけられるように挑戦してみてください。

【Ruby on Rails】簡単なメモアプリの作成|バリデーションとエラーメッセージの実装 | いっしー@Webエンジニア