フラッシュメッセージの実装 - 大ちゃんの駆け出し技術ブログ

フラッシュメッセージとは

こんにちは！大ちゃんの駆け出し技術ブログです。

ユーザー側の入力に基づいて処理が行われた際に、その処理の結果をユーザー側にわかるように表示されるメッセージのことです。例えば、アカウント登録、アカウント情報の更新の処理などに使用されています。

実装はさほど難しいものではありませんので、仕組みをしっかり理解しておきましょう。

実装方法

本記事ではアクションコントローラーでユーザ登録機能を実装することにします。登録フォームは下の画像のようなシンプルなフォームです。

登録ボタンを押すことで新規登録のアクションであるcreateアクションが実行されます。 (フラッシュメッセージ記述済み)

class UsersController < ApplicationController
 
  def create
    @user = User.new(user_params)

    if @user.save
      flash[:success] = 'ユーザー登録が完了しました'
      redirect_to login_path 
    else
      flash.now[:danger] = 'ユーザー登録に失敗しました'
      render :new 
    end
  end

  private

  def user_params
    params.require(:user).permit(:last_name, :first_name, :email, :password, :password_confirmation)
  end
end

createアクションの最初の行でインスタンス変数@userに入力した内容が渡されます。

@user = User.new(user_params)

補足で説明すると、user_paramsはprivateメソッドとして下の行に定義されています。

private

def user_params
  params.require(:user).permit(:last_name, :first_name, :email, :password, :password_confirmation)
end

これはストロングパラメーターというもので、簡単に説明すると、permitの()内で括られた値以外は取得することを何人たりとも許可しないという意味になります。これは悪意のあるユーザーがユーザーが入力した以外の情報を取得することを防ぐセキュリティ対策で、Railsでは必須の知識です。

インスタンス変数@userは条件分岐でsaveメソッドにかけられます。

if @user.save

このsaveメソッドでユーザ登録に必要な情報が正しく入力されているかを判断し、情報に問題がなければtrueを返します。逆に、入力欄が空白であったり、確認用パスワードが入力したパスワードと違っていたりするとfalseを返します。

いよいよ本記事のトピックであるflashメッセージとのご対面です。情報が正しく入力されていれば登録完了の分岐となります。

flash[:success] = 'ユーザー登録が完了しました'
redirect_to login_path

flash[:success]に文字が格納され、リダイレクト先であるlogin_pathに「ユーザー登録が完了しました」、というメッセージが表示されます。本当にたったこれだけです！

ちなみに上記の文章は一文で記述することもできます。コードはプログラマーがコードを理解する速さが重視されるのでこちらの記述が好まれるでしょう。 (しかし、本記事の最後の節に記載するadd_flash_typesを実装しないとできませんのでご注意ください、、、。)

redirect_to login_path, flash: 'ユーザー登録が完了しました'

反対に、情報が正しく入力されていなかった場合、else以降が実行されます。

flash.now[:danger] = 'ユーザー登録に失敗しました'
render :new

こちらはレンダー先である新規登録ページでメッセージが表示されます。

flash.nowとflashの使い分け

結論から先に行ってしまうと、

成功時(リダイレクト)にはflash 失敗時(レンダー)にはflash.now

詳しく説明すると、基本的に新規登録や編集機能などではif文を使って、trueの場合はredirect_to、falseの場合はrenderが使われます。

redirect_toとrenderには大きな違いがあります。

redirect_to・・・アクションを経由して画面遷移 render・・・アクションを経由しないで画面遷移

そしてflashとflash.nowにも違いがあります。

flash・・・1回目のアクションの経由では消えず、次のアクションまで表示させる。 flash.now・・・次のアクションに移行した時点で消える。

renderはアクションを経由せずページだけを表示させるため、もしflashを使ってしまうと表示が消えるまでに2回のアクションが必要となります。つまり、今回の例で言えば、正しい情報が入力されログインページにて、「ユーザー登録が完了しました」、というメッセージが次に遷移するログイン後のページにも元気よく、「ユーザー登録が完了しました」と表示されてしまうのです。

逆に、redireict_toは次のアクションを経由するのでFlash.nowでは表示すらされずに、結果そのメッセージを見ることは一生ないでしょう、、、。

少しややこしかったかもしれませんが、まとめると redirect_toにはflash、renderにはflash.nowを使用する！

add_flash_typesでメッセージの色を変える

最後に補足でadd_flash_typesに触れておきます。これはBootstrapに定義されているスタイルを読み込むことが可能になります。

実装方法は簡単でrailsにデフォルトで用意されているapplication_contrller.rbに設定を追加するだけです。

class ApplicationController < ActionController::Base
  add_flash_types :success, :info, :warning, :danger
end

これにより、メッセージの種類に合わせてメッセージの色を変えることができます。 (successは成功した感じの柔らかい色、dangerは失敗した時の感じの刺々しい色(笑))

また、後述したように、成功時のフラッシュメッセージを表示するためのredirect_toが１行で記述できるようになります。

redirect_to login_path, flash: 'ユーザー登録が完了しました'

以上、大ちゃんの駆け出し技術ブログでした！