flashとは

とある動作を行った時、成功したのか、もしくは失敗したのか、相手に知らせ機能があると便利ですよね。

Railsでは、ログイン時に「ログインしました」と表示するなど、Viewで一時的なメッセージを表示するためにflashというハッシュ形式のオブジェクトが設定されています。

このflashを利用することで、次の画像上部に表示された「メッセージを投稿しました」のようにフラッシュメッセージを表示させることができます。

それでは、より詳しい使い方を見ていきましょう。
※Viewはhaml記法での説明となります
※deviseの準備が完了した後の手順となります

具体的な使用例

views/layouts/_flash.html.haml

- flash.each do |key, value|
  = content_tag(:div, value, class: "flash flash__#{key}")

deviseを導入した状態でflashオブジェクトを使用すると、deviseに関する通知（ログイン・ログアウトなど）が発生した時のみ、keyとvalueのハッシュを生成してくれます。

flashには標準で　notice（動作成功時）とalert（動作失敗時）の2つのキーを生成してくれるため、両方に適用できるようにeachメソッドを使ってkeyとvalueを取り出しています。

また、content_tagはHTMLタグを生成することができ、第一引数にタグ、第二引数に内容、第三引数にオプション（ classなど）を設定します。

今回、表示したいのはvalueなので、第２引数にvalueを設定しています。

また、classにflashとflash__#{key}の2つを設定することで、keyがnoticeの時とalertの時でscssの表示を変えることができます。

SCSSの見本例

app/assets/stylesheets/modules/_flash.scss

.flash {
  color: $white;
  text-align: center;
  &__alert{
    background-color: red;
  }
  &__notice {
    background-color: $blue;
  }
}

注意点としては、classがflash_#{key}のみだとflashクラスに記述した内容（この場合はcolorとtext-align）が反映されません。よって、class: "flash flash_#{key}"と2つのクラスを設定しましょう。

フラッシュメッセージの設置場所

views/layouts/application.haml

!!!
%html
  %head
   省略
  %body
  = render 'layouts/flash'
  = yield

最初の見本の画像のように、全ての要素の上に表示させるにはlayouts/application.hamlに記述すると良さそうです。

ただし、ここに記述すると修正時にややこしいので、私は部分テンプレート _flash.haml に切り出して、renderメソッドで呼び出すようにしました。

deviseの日本語化

devise.ja.ymlをconfig/localesに設置します。いくつか見本があるようなので、その一つを紹介します。
devise.ja.yml

さらに、これを読み込む設定をする必要があります。

config/application.rb

module ChatSpace
  class Application < Rails::Application
    config.i18n.default_locale = :ja
  end
end

以上でdeviseをフラッシュメッセージを表示することできます。

flashメッセージの編集

コントローラーでflashを設定することで、任意の動作の後にフラッシュメッセージを表示させることができます。

例えば、グループを作成成功時と失敗時にフラッシュメッセージを表示します。

groups_controller.rb

  def create
    @group = Group.new(group_params)
    if @group.save
      redirect_to root_path, notice: "グループを作成しました"
    else
      flash.now[:alert] = "グループ名を入力してください"
      render :new
    end
  end

前提として、groupモデルで validates :name, presence: true のようにバリデーションを記述しているため、nameがない場合は保存できないようになっています。

よって、@groupが「保存できた場合」と「保存できなかった場合」で条件分岐し、flashメッセージを表示するようにしました。

flash[:notice] = "表示したい内容" のように記述することで、flashオブジェクトのnoticeキーのバリューを設定できます。

flashとflash.nowの違いは下記をご確認ください。基本的にはflash.nowを使えば良さそうです。

［rails］flashとflash.nowの違いの件

最後に

筆者の知識不足による間違いがありましたら、ご指摘をいただけると助かります。

【Rails】deviseを利用したflashメッセージの表示方法