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

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

まずはフラッシュメッセージは何なのか、完成系をご覧ください
青いバーに白い文字のやつがフラッシュメッセージです
![c49006011d87cf414cbde8782e8975c1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1422262/d77c8208-c79d-234c-6be4-7fad65307f68.gif)

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

## 環境
- 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

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

### この参考文献
https://www.webdesignleaves.com/pr/jquery/jq_basic_05.html

https://www.sejuku.net/blog/62845


フロント側の設定は以上で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: "" 」も書き換えて良いと思います！

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