【rails6】フラッシュメッセージの実装

こんにちは！
今日は”フラッシュメッセージ”の実装方法についてご説明します

まずはフラッシュメッセージは何なのか、完成系をご覧ください
青いバーに白い文字のやつがフラッシュメッセージです

では、実装していきましょう！

環境

• Ruby on Rails 6.0
• （使用したい人だけ、jQueryも必要です）
• ローカルでもHerokuでもEC2でも、なんでも大丈夫です

手順① flashメッセージの「key」 と 「value」を決める

フラッシュメッセージで大切なことです。予め考えておきましょう！
下記、一例を載せておきます

【成功】　key: notice や success など
【失敗】　key: alert や error など 

【成功】　value: ”投稿に成功しました” や "ログインに成功しました"
【失敗】　value: "削除に失敗しました" や "ログインに失敗しました"

手順② ビューファイルのどこに配置するか決める

以下、私の記述をコピペしてしまってください。

app/views/articles/index.html.erb

<%= render "shared/post-bar" %>

# ↓ 以下がflashメッセージの記述です。 ↓
<div class="flash-notifications">
  <% flash.each do |key, value| %>
   <%= content_tag(:div, value, class: key) %>
  <% end %>
</div>
# ↑ コピペ以上 ↑

<div class='main'>
  # 省略
</div>

配置できたら、次にいきましょう！

手順③ コントローラーの編集

それでは、**「何かの処理をした後にメッセージを表示させる」**という指示を書いていきます

articles_controller.rb

def create
  @article = current_user.articles.build(article_params)
  if @article.valid?
    @article.save
    return redirect_to root_path, notice: '記事を投稿しました' # ←ここがflashメッセージ
  else
    render :new
  end
end

簡単に解説しますと、
@articleに問題がなかったら（valid? => true）、保存（save）して、
root_pathに戻ってね、「notice: '記事を投稿しました'」を渡してね
というものです。

「 valid? => false 」の場合も書くべきだと思いますが、
私は別の方法でエラーメッセージを表示させているので、フラッシュメッセージは省略しました。

ここまでやれば表示はできるようになります！
この先は必要な方だけご覧ください

cssも編集していきましょう！

手順④ cssを編集する

application.scss

.flash-notifications {
  font-weight: bold;
  color: white;
  text-align: center;  

  .notice {
    background-color: #ADD8E6;
  }

  .alert {
    background-color: #FF4500;
  }

  }

私はどこのページでも共通する物と思ったので、「 application.scss 」の中に記述しました
※皆様にお任せします

これで動画のように
水色ベース、白太文字で表示をする事ができました
ただし、表示できるだけです　消えません
※ページをリロードすると消えるようになります

使い勝手の観点から、下記を追加実装しました

手順⑤ フラッシュメッセージをフェードアウトさせたい

さて、以下はまた必要な方向けです
下記の記述を 「 application.js 」に記述してください

※jQuery未導入の方は、先にjQueryを導入してください！

↓ 以下をコピペ、ファイルの一番下で構いません ↓

app/javascript/packs/application.js

$(function(){
  setTimeout("$('.notice').fadeOut('slow')", 2000);
});
$(function(){
  setTimeout("$('.alert').fadeOut('slow')", 2000);
});

classの名前は間違えないようにしてくださいね
では、簡単に解説します

setTimeout(hogehoge, 2000);

これは、2.0秒後にhogehogeを実行させるという記述です
msecの単位になってるので、2秒後は2000となりますね

fadeOut('slow')

こちらの記述ですが、読んで字のごとく、スローにフェードアウトさせます
このslowですが、600msecで処理してくれるそうです

• slow : 600 msec
• normal : 400 msec
• fast : 200 msec

の３つがあるそうです
下記の文献も参考として見ておいてくださいね！

この参考文献

フロント側の設定は以上でOKですね
基本はこれでコンプリートです

さて、次が最後です！頑張りましょう！！

Devise関連のフラッシュメッセージの表示

ここでの必要項目

• 日本語化完了済み（gem 'rails-i18n'導入済み）
• config/locales/devise.ja.ymlのベースは記述済み

さて、deviseを実装している場合、devise関連のフラッシュメッセージは標準装備されています。
言葉を書き換えればすぐにできるんです！

上記の「 config/locales/devise.ja.yml 」を編集していきます

config/locales/devise.ja.yml

ja:
  activerecord:
    devise:
      sessions:
        signed_in: "ログインに成功しました" # ここを書き換えます

他の箇所は省略しますが、この順番で探してみてください。
githubからコピペした場合は「 signed_in: "" 」 となっているはずです
ここを上記のように好きな言葉に書き換えてください。

もちろん、その下の「 signed_out: "" 」も書き換えて良いと思います！

今日の解説は以上です！
引き続き頑張っていきましょう！