はじめに

この記事では、flashメッセージを表示したあと一定時間後にフェードアウトさせる方法を解説します。

flashメッセージ系の記事はたくさんあるのですが、
どれもbootstrapを使用してたり
何やら複雑な方法だったり（Hamlハムル？？とかrenderとかややこしい！）。。

もっと簡単な記事はないのか！とモヤモヤしたので、自分まとめます。
自分と同じような人の為に！！（自分用のメモですすみませんｗ）

flashメッセージの表示方法

それではレッツ実装！！

まずはコントローラーから。

コントローラー


def destroy
   @review = Review.find(params[:id])
   @review.destroy
   if review.destroy
      redirect_to root_path, notice: "︎レビューを削除しました！"
   end
end

メッセージを表示させる記述は4行目のif文からです。

レビューが削除された後、root_path(ホーム画面)に戻って
「レビューを削除しました」というメッセージが表示される。という流れです。

続いてビュー画面へ！

ビュー


<% if flash[:notice] %>
   <div class="flash"><%= flash[:notice] %></div>
<% end %>

<%= yield %>

flashメッセージはいろんな場面で共通で使う事が多いので、
views/layouts/application.html.erb
の<%= yield %>より上の部分に記述します。

コントローラーとビューはひとまず完成！！

JavaScriptの下準備

まずはGemfile以下のコードを記述します。

gem 'jquery-rails'

からのターミナルで$ bundle install

続いて
app/assets/javascripts/application.js
に以下のコードを加えましょう。

//= require jquery

これでjQueryの下準備完了。

flashメッセージをフェードアウトさせる方法

いよいよ実装していきます。

①jsファイルに記述する場合(推奨)

以下のコードを
app/assets/javascripts/application.js(上と同じ場所)
に加えたら完成！！


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

②ビューファイルに直接記述する場合

以下のコードを
flashメッセージを表示させたいビューファイルに加えたら完成！！


<script>
  $(function() {
    setTimeout("$('.flash').fadeOut('slow')", 2000);
  });
</script>

※「.flash」はapplicaton.html.erbのdivに付けたクラス名です。各自自由に命名しましょう。
※数字部分は好みに合わせて変えましょう！ちなみに1000で1秒です。

さいごに

今回はレビューの削除destroy後の実装でしたが、もちろん編集editや
お気に入りfavoriteなんかも実装可能です。

あとはお好みでCSSをいじれば、
よく見るflashメッセージの完成です！！

＜参考＞
https://qiita.com/dir_sh0606/items/b2165459deda97ae8468

【Rails】flashメッセージをフェードアウトで消す方法【JavaScript】