tagを使ってフラッシュメッセージを実装する

こんちには、たわらです。

久しぶりに個人開発をしていて、フラッシュメッセージを実装したのでそのメモです。

こんな感じでtagメソッドを利用します。html をいい感じに生成してくれます。

tag ヘルパーの使い方

例を見ればだいたい理解できます。railsから拝借。

   tag("br")
   # => <br />

   tag("br", nil, true)
   # => <br>

   tag("input", type: 'text', disabled: true)
   # => <input type="text" disabled="disabled" />

   tag("input", type: 'text', class: ["strong", "highlight"])
   # => <input class="strong highlight" type="text" />

   tag("img", src: "open & shut.png")
   # => <img src="open &amp; shut.png" />

   tag("img", { src: "open &amp; shut.png" }, false, false)
   # => <img src="open &amp; shut.png" />

   tag("div", data: { name: 'Stephen', city_state: %w(Chicago IL) })
   # => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />

   tag("div", class: { highlight: current_user.admin? })
   # => <div class="highlight" />

フラッシュメッセージを実装する

tagヘルパーを利用して、フラッシュメッセージを実装するとこんな感じです。 css には TailwindCSS のコンポーネントライブラリであるdaisyUIを使ってます。適宜無視してください。

app/views/shared/_flash_message.html.slim

- flash.each do |message_type, message|
  = tag.div(class: "alert alert-#{ message_type } shadow-lg")
    = tag.p(message)

そして上記のパーシャルを view に読み込ませます。

application.html.slim

  body
    # 省略
    = render  'shared/flash_message'

controllerはこんなかんじ。

  def hoge
    if @hoge.save
      redirect_to works_path, success: '小説を投稿しました'
    else
      flash.now[:error] = '小説投稿に失敗しました'
      render :new, status: :unprocessable_entity
    end
  end

参考文献