ポートフォリオの見た目をよくしよう！フラッシュメッセージの実装 #＃ポートフォリオ

ポートフォリオのフラッシュメッセージを実装しようと思い、方法を書いてみました！あくまで、私のポートフォリオのviewファイルの場合はこの方法だとうまくいきますよ！という記事なので、viewファイルの構図が違う方はこの方法では実装できないかもしれません。誠に申し訳御座いません、自分のポートフォリオでのアウトプットの為にこの記事は書きました。。。

私の場合、最初の入り口から投稿が出てくる仕様のアプリ（下記↓こんな感じの）

私はapplication.html.erb（アプリケーション全体のview)にフラッシュメッセージのコードを書きました

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>classic festival</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap" rel="stylesheet">
  </head>

  <body>
    <header class="header">
      <div class="inner">
        <div class="nav">

　　　　　　　　　　　　　　　　<%= flash[:success] %>
　　　　　　　　　　　　　　　　<%= flash[:danger] %>

          <div class="nav__right" >
            <%= link_to "クラシック音楽祭", root_path, method: :get, class: :nav__btn  %>
            <% if user_signed_in? %>
              <%= link_to "ログアウト", destroy_user_session_path, class: :nav__btn, method: :delete %>
              <%= link_to "新規投稿",  new_post_path, class: :nav__btn %>
              <%= link_to "マイページ", user_path(current_user), data: {"turbolinks" => false}, class: :nav__btn %>
            <% else %>
              <%= link_to "ログイン",  new_user_session_path, class: :nav__btn %> 
              <%= link_to "新規登録", new_user_registration_path, class: :nav__btn %>
              <%= link_to 'ゲストログイン', users_guest_sign_in_path, method: :post, class: :nav__btn %>
            <% end %>
          </div>
          <%= form_with(url: search_posts_path, local: true, method: :get, class: "search-form") do |form| %>
            <%= form.text_field :keyword, placeholder: "投稿を検索する", class: "search-input" %>
            <%= form.submit "検索", class: "search-btn" %>
          <% end %>
      </div>
      </div>
    </header>
   <%= yield %>
  </body>
</html>

上記のコードの中の下記↓をまずフラッシュメッセージを出したいviewのファイルの中に書かなければいけません。

　　　　　　　　　　　　　　　　<%= flash[:success] %>
　　　　　　　　　　　　　　　　<%= flash[:danger] %>

今回はナビゲーションバーをつけているので、ナビゲーションバーの記述の後に上記のコードを記載しなければいけません。

まとめるとこんな感じです↓

  <body>  ←ボディ要素（画面全体のデザインを括る必要があるので、最初はボディ要素で宣言してます）
    <header class="header"> ←ヘッダー（画面の上のclass要素）
      <div class="inner"> ←画面の中身のデザインのclass要素
        <div class="nav"> ←ヘッダー（画面の上）にあるナビゲーションバーをclass要素で括ります
　　　　　　　　　　　　　　　　<%= flash[:success] %> ←フラッシュメッセージの記述　　success: "表示させたいメッセージ"
　　　　　　　　　　　　　　　　<%= flash[:danger] %>  ←フラッシュメッセージの記述　　danger:  "表示させたいメッセージ"

      　　<div class="nav__right" >
      　　</div>
      </div>
    </header>
   <%= yield %>
  </body>

app/controllers/posts_controller.rb のcrud処理(投稿編集削除)の部分

  def create
    @post = Post.new(post_params)
    if @post.save
      flash[:success] = '投稿が完了しました'
      redirect_to root_path
    else
      flash.now[:danger] = "投稿に失敗しました"
    render :new
    end    
  end  

  def destroy
    @post = Post.find(params[:id])
    @post.destroy
    flash[:success] = '投稿を削除しました'
    redirect_to root_path
  end

  def edit
    @post = Post.find(params[:id])
  end

  def update
    @post = Post.find(params[:id])
    if @post.update(post_params)
      redirect_to post_path(@post)
      flash[:success] = '投稿を編集しました'
      else
    render :edit
    end
  end

例えば、投稿で"投稿が完了しました"等のメッセージを投稿が完了した際に表示させたい場合は、post（私は投稿はpostという名前をつけてpostのcontrollerファイルを作成しました）posts.controller.rbの投稿が保存された後に記述する。

  def create
    @post = Post.new(post_params)
    if @post.save
      flash[:success] = '投稿が完了しました'
      redirect_to root_path
    else

viewとcontrollerのやりとり、つまり、MVCのVCの部分での実装をしなければいけません。