【rails】Flashの表示について

※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。

目次 表示

目次へ

Flashとは

画面に出てくる以下のメッセージたちのこと

  • 「ログインできました」
  • 「ログインに失敗しました」
  • 「保存できました」
  • 「保存に失敗しました」

↓　の記事の内容を使って進めていく

【rails】「CREATE」createアクション

保存された場合にFlash表示する

notice: ‘◯◯’ でメッセージを決める

app/controller/article_controller.rbに以下のコードを書く

    def create
        @article = Article.new(article_params)
        if @article.save
            redirect_to article_path(@article),
            notice: '保存できました'
        else
            render :new
        end
    end

notice: ‘保存できました’

→　記事の保存ができたとき、「保存できました」というメッセージを表示させる

どこに表示するか決める

app/views/layouts/application.html.erbのheader下に以下のコードを書く

    </header>
    <% if flash.present? %>
      <div class="flash">
        <% flash.each do |key, value| %>
          <div class="<%= key %>"><%= value %></div>
        <% end %>
      </div>
    <% end %>
    <%= yield %>

共通レイアウトのheaderの下に表示されるようになる

Flashの表示方法は

if flash.present?

ruby
<% if flash.present? %>

if flash.present?　→　「もしflashが存在するなら」

.present?　→nilじゃなければtureになる（実行される）

flash.each do |key, value|

ruby
      <% flash.each do |key, value| %>
      　　　　<div class="<%= key %>"><%= value %></div>
      <% end %>

flash.each do |key, value|
  • flashは配列(Hash)
  • 配列を.each doするとき、key, valueを取得できる

  • flashは「notice:」と「error:」の2種類のkeyがある
  • article_controller.rbで「notice:」を指定しているので、keyにはnoticeが入る
  • valueには「保存しました」のメッセージが入る

key(notice:)とvalue(メッセージ)

ruby
<div class="<%= key %>"><%= value %></div>

↑のrubyは、↓のhtmlに書き換えられる

HTML
<div class="notice">保存できました</div>

保存されなかった場合もFlash表示する

flash.now[:error]

保存された場合とは別で、保存されなかった場合のFlashも設定する

app/controller/article_controller.rbのelse以降に、追記する

    def create
        @article = Article.new(article_params)
        if @article.save
            redirect_to article_path(@article),
            notice: '保存できました'
        else
            flash.now[:error] = '保存に失敗しました'
            render :new
        end
    end

Flashの表示方法が異なる

  • 保存できたとき redirect_to
    →　ページの遷移先で表示させる
    →　遷移先のhtmlにflashを表示する記載が必要
  • 保存できなかったとき render :new
    →　今のviewに表示させる

#DAY12

前の記事

【rails】render :newについて

次の記事

【rails】エラーメッセージ・日本語化