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

動画で解説を見る

1 開発環境
2 Ruby on Railsでバリデーションの実装手順
3 おわりに

開発環境

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のバリデーションは基本的にモデルに記載されることが多いです。

今回はメモアプリの作成で使用したコードを用いて解説していきます。

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

class Memo < ApplicationRecord
    validates :title, presence: true, length: { minimum: 2, maximum: 32 }
    validates :description, presence: true, length: { minimum: 2, maximum: 140 }
end

class Memo < ApplicationRecord

validates :title, presence: true, length: { minimum: 2, maximum: 32 }

validates :description, presence: true, length: { minimum: 2, maximum: 140 }

end

「validates」の後にカラム名を指定し、その後にバリデーションを設定していきます。

「presence: true」は空白を許可しないという意味になり、「length: { minimum: 2, maximum: 32 }」は属性の値の長さを2以上32以下にするという意味になります。

その他にも様々な制約を設定することができますので、詳しくはRuby on Rails ガイドを参考にすることをおすすめします。

Ruby on Rails ガイド：https://railsguides.jp/active_record_validations.html

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

<div class="wrapper">
    <div class="container flex-start">
        <div class="col-box-1">
            <h2>メモ一覧</h2>
        </div>

        <% if @memo_new.errors.any? %>
            <div class="col-box-1">
                <h3><%= @memo_new.errors.count %>件のエラーが発生しました。</h3>
                <ul>
                    <% @memo_new.errors.full_messages.each do |message| %>
                    <li><%= message %></li>
                    <% end %>
                </ul>
            </div>
        <% end %>

        <div class="col-box-3">
            <%= form_with model: @memo_new, url: memos_path, local: true, method: :post do |f| %>
                <div class="memo-header">
                    <%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>
                </div>
                <div class="memo-center">
                    <%= f.text_area :description, placeholder: "メモ", class: "form-box" %>
                </div>
                <div class="memo-footer">
                    <%= f.submit "作成", class: "btn" %>
                </div>
            <% end %>
        </div>

        <% @memos.reverse.each do |memo| %>
            <div class="col-box-3">
                <%= form_with model: memo, url: memo_path(memo.id), local: true, method: :patch do |f| %>
                    <div class="memo-header">
                        <%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>
                    </div>
                    <div class="memo-center">
                        <%= f.text_area :description, placeholder: "メモ", class: "form-box" %>
                    </div>
                    <div class="memo-footer">
                        <%= f.submit "更新", class: "btn" %>
                    </div>
                <% end %>
                <div class="memo-other">
                    <%= button_to "削除", memo_path(memo.id), method: :delete, class: "btn" %>
                </div>
            </div>
        <% end %>
    </div>
</div>

</div>

<% if @memo_new.errors.any? %>

<h3><%= @memo_new.errors.count %>件のエラーが発生しました。</h3>

<ul>

<% @memo_new.errors.full_messages.each do |message| %>

<% end %>

</ul>

</div>

<% end %>

<%= form_with model: @memo_new, url: memos_path, local: true, method: :post do |f| %>

<%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>

</div>

<%= f.text_area :description, placeholder: "メモ", class: "form-box" %>

</div>

<%= f.submit "作成", class: "btn" %>

</div>

<% end %>

</div>

バリデーションが行われた後でerrorsインスタンスメソッドを使うと、発生したエラーにアクセスできます。

「オブジェクト.errors.any?」とすることでエラーが発生していれば「true」、エラーが発生していなければ「false」となります。

また、「オブジェクト.errors.full_message」とすることで属性名の冒頭を大文字にした読みやすいメッセージを生成、それをeachメソッドで一つずつ取り出し表示するという流れになります。

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

class MemosController < ApplicationController
  def index
    @memo_new = Memo.new
    @memos = Memo.all
  end

  def create
    @memo_new = Memo.new(memos_params)
    @memos = Memo.all
    if @memo_new.save
      redirect_to root_path
    else
      render action: "index"
    end
  end

  def update
    @memo = Memo.find(params[:id])
    @memo.update(memos_params)
    redirect_to root_path
  end

  def destroy
    @memo = Memo.find(params[:id])
    @memo.destroy
    redirect_to root_path
  end

  private

  def memos_params
    params.require(:memo).permit(:title, :description)
  end
end

class MemosController < ApplicationController

def index

@memo_new = Memo.new

@memos = Memo.all

end

def create

@memo_new = Memo.new(memos_params)

@memos = Memo.all

if @memo_new.save

redirect_to root_path

else

render action: "index"

end

バリデーションが行われた後にエラーが発生した場合、createアクション内で再びrenderメソッドでviewファイルを読み込む設定をします。

上記のようにすることにより、入力されたデータを残したままオブジェクトに格納されたエラー内容も渡すことができます。

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

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #696969;
    font-size: 16px;
    font-family: sans-serif;
    list-style-position: inside;
}

.header-color {
    background-color: #4169e1;
}

h1 {
    font-size: 36px;
    color: #ffffff;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 24px;
}

.wrapper {
    width: 100%;
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 1170px;
}

.col-box-1{
    width: 100%;
    padding: 6px;
}

.col-box-2{
    width: 50%;
    padding: 6px;
}

.col-box-3{
    width: 33.3%;
    padding: 6px;
}

.col-box-4{
    width: 25%;
    padding: 6px;
}

.flex-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.memo-header {
    width: 100%;
    padding: 6px;
    min-height: 40px;
    background-color: #ffd700;
    border-radius: 6px 6px 0 0;
}

.memo-center {
    width: 100%;
    padding: 6px;
    min-height: 100px;
    background-color: #fffacd;
}

.memo-footer {
    width: 100%;
    padding: 6px;
    background-color: #ffd700;
    border-radius: 0 0 6px 6px;
    text-align: center;
}

.memo-other {
    width: 100%;
    padding: 6px;
    text-align: right;
}

.form-box {
    background-color: transparent;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 6px;
    width: 100%;
}

textarea {
    min-height: 80px;
}

.btn {
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 3px 12px;
}

.field_with_errors {
    display: contents;
}

* {

padding: 0;

margin: 0;

box-sizing: border-box;

color: #696969;

font-size: 16px;

font-family: sans-serif;

list-style-position: inside;

}

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

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #696969;
    font-size: 16px;
    font-family: sans-serif;
    list-style-position: inside;
}

.header-color {
    background-color: #4169e1;
}

h1 {
    font-size: 36px;
    color: #ffffff;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 24px;
}

.wrapper {
    width: 100%;
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 1170px;
}

.col-box-1{
    width: 100%;
    padding: 6px;
}

.col-box-2{
    width: 50%;
    padding: 6px;
}

.col-box-3{
    width: 33.3%;
    padding: 6px;
}

.col-box-4{
    width: 25%;
    padding: 6px;
}

.flex-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.memo-header {
    width: 100%;
    padding: 6px;
    min-height: 40px;
    background-color: #ffd700;
    border-radius: 6px 6px 0 0;
}

.memo-center {
    width: 100%;
    padding: 6px;
    min-height: 100px;
    background-color: #fffacd;
}

.memo-footer {
    width: 100%;
    padding: 6px;
    background-color: #ffd700;
    border-radius: 0 0 6px 6px;
    text-align: center;
}

.memo-other {
    width: 100%;
    padding: 6px;
    text-align: right;
}

.form-box {
    background-color: transparent;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 6px;
    width: 100%;
}

textarea {
    min-height: 80px;
}

.btn {
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 3px 12px;
}

.field_with_errors {
    display: contents;
}

127

128

129

.field_with_errors {

display: contents;

}

また、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でバリデーションとエラーメッセージについて解説してきましたが、いかがだったでしょうか。

データベースに正しいデータを保存するためにバリデーションは必須とされているため、是非、様々な制限をかけられるように挑戦してみてください。