【Laravel × toastr.js】メッセージをふわっと表示させる

今回はメッセージをふわっと表示させる方法についてお話しします。

ふわっとメッセージを表示させるために色々探していて、見つけたのがtoastr.jsというものです。

公式のデモはこちら

Laravelでtoastr.jsを使用する

toastr.jsをインストールする

• npmを使っている人はこちら

npm install toastr

• yarnを使っている人はこちら

yarn add toastr

JSファイルを作成する

名前は何でもいいんですけど、僕はresources/js/toast.jsというJSファイルを作成したいと思います。

中身はこんな感じ。

window.toastr = require('toastr');

// エラーの場合
if($('.validate-error').length){
    toastr.warning('エラーが発生しました');
}

ビューの方ではバリデーションエラーが発生したら、その要素にvalidate-errorというクラスをつけるようにしています。

なので、バリデーションでエラーが発生する → validate-errorというクラスがつけられる → JavaScriptが反応してエラーメッセージがふわっと表示される。

という流れにしています。

たったこれだけでふわっとメッセージが完成です！

終わりに

検索キーワードが難しくて「Laravel ふわっと　メッセージ　ライブラリ」とか「Laravel エラー　ふわっと jQuery ライブラリ」とか調べていて、なかなか見つからなかったので、メモとして記事を公開することにしました。

めちゃくちゃ万能で簡単なので皆さんもぜひ使ってみてください！