🍞

Toastr、何それ美味しいの?

2025/01/20に公開

状況

  • 個人的に入社して最初の1週間目で出会った初めてのgem
  • 今回久しぶりにポップとしてtoastrを採用することになり導入から携わったために復習

学び

toastr(トースト)とは

「toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.」(原文ママ)

  • Toastrは、ウェブアプリケーションで使用される「通知メッセージ」を簡単に表示するためのライブラリ
  • 通知メッセージは、エラーメッセージ、成功メッセージ、警告メッセージなどをユーザーに伝えるために使われる
    例)「ログインに成功しました」や「データの保存に失敗しました」といったポップアップのようなもの

github
https://github.com/CodeSeven/toastr
gemガイド
https://rubygems.org/gems/toastr-rails
demo(サンプルが見れます)
https://codeseven.github.io/toastr/demo.html

導入方法(Railsの場合)

  1. Gemをインストール
    Gemfileに以下を追加(※):

    gem 'toastr-rails'
    

    その後、以下のコマンドを実行してGemをインストール:

    bundle install
    
  2. Assetファイルの設定
    ToastrのCSSとJavaScriptを使えるように

    • CSSの読み込み: app/assets/stylesheets/application.css または .scss に以下を追加:

      @import "toastr";
      
    • JavaScriptの読み込み: app/javascript/packs/application.js に以下を追加:

      import toastr from 'toastr';
      
  3. JQueryの導入
    ToastrはJQueryに依存している。Rails 6以上ではJQueryがデフォルトで含まれていないため、手動で設定が必要(別途記事にしたい)


Toastrの基本的な使い方

  • Toastrを使って通知を表示するには、コントローラーでフラッシュメッセージを設定し、それをJavaScriptで表示する必要がある

1. コントローラーでフラッシュメッセージを設定

flash[:notice] = "ログインに成功しました!"
flash[:alert] = "エラーが発生しました。"

2. ビューでToastrを表示

app/views/layouts/application.html.erb に以下を追加:

<script>
  <% if flash[:notice] %>
    toastr.success("<%= j flash[:notice] %>");
  <% end %>
  <% if flash[:alert] %>
    toastr.error("<%= j flash[:alert] %>");
  <% end %>
</script>

Toastrの便利な機能

  • メッセージの種類

    • toastr.success("成功メッセージ") : 成功通知
    • toastr.error("エラーメッセージ") : エラー通知
    • toastr.info("情報メッセージ") : 情報通知
    • toastr.warning("警告メッセージ") : 警告通知
  • カスタマイズ
    Toastrは見た目や動作をカスタマイズできる。例えば、表示時間や位置が変更可能

    toastr.options = {
      "closeButton": true,
      "progressBar": true,
      "positionClass": "toast-top-right",
      "timeOut": "3000"
    }
    

注意点

  1. JQueryが必要
    • RailsプロジェクトではJQueryがデフォルトで含まれていないため、手動で導入が必要
  2. セキュリティ
    • フラッシュメッセージをJavaScriptで表示するときには、必ず <%= j flash[:message] %> のようにHTMLエスケープを行う必要がある
  3. アセットのプリコンパイル
    • 導入時にCSSやJavaScriptを忘れずにプリコンパイルすること

他にも、deviseと一緒に使う場合に使用が変更する点があるが、今回は省略


まとめ

  • Toastrは、Railsアプリケーションに簡単に通知機能を追加できる便利なライブラリ
  • Toastr-Railsを使うとさらに簡単に導入できる。ただし、JQueryが必要

所見

  • やはり調べてみると理解が深まる。
  • チャットGPTに聞いてみると

「トースト」という名前は、通知が画面上にポップアップして表示され、しばらくして消えるという動作が、ちょうど「パンがトースターからポンっと飛び出す」ように見えることから付けられたと言われています。

  • 案外遊び心のあるgemなんだと思った

Discussion