こんにちは、ヱビス（@evisu_phper）です。

システムの中で、ユーザーの行動に関して確認を行う「アラート」があります。

アラートは、役に立つのですが、デフォルトのアラートは無骨な上にユーザーに不安を与える姿をしています。

そんな、「アラート」を、分かりやすく、おしゃれにする方法をご紹介します。

「SweetAlert」でアラートをおしゃれに！

アラートは、JavaScriptで表示させることができます。

基本的な下記のコードを記述することで、ブラウザを開いた時に表示させることができます。

表示される内容はこちら。

Windows時代のトラウマなのか、こう言った無骨なアラートを目にすると、内容が特に悪いわけでもないのに、不安を掻き立てられてしまいます。
※街で、パトカーを見ると少しキョドってしまうのと同じでしょうかｗ

JavaScriptベースで作成された「SweetAlert」を実装すると下記のようになります。

同じアラートとは思えない安心感ですねｗ

「SweetAlert」の読み込み

「SweetAlert」の読み込みは、「npm」か「CDN」が選ぶことができます。

「npm」での読み込み
npm install sweetalert --save

「CDN」での読み込み
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

開発環境にもよりますが、個人的にはCDNでの読み込みが簡単に感じます。

また、「SweetAlert」はjQueryプラグインではないので、事前にjQueryを読み込む必要はありません。

また、「SweetAlert」のバージョン1の頃は、CSSの読み込みが必要でしたがバージョン2にアップデートされたことで、CSSの読み込みも不要になりました。

「SweetAlert」の基本的な構文

最も簡単な構文は下記のとおりです。

「SweetAlert」は、パラメータが充実しているので同じ記述でも、パラメータを指定して呼び出す記述の方が、汎用性は高いです。

先程のコードを、パラメータによる記述に書き換えてみます。

（1）titleパラメータ
アラートのタイトルとして、表示される内容です。
デフォルトでは、「font-weight:600」と「font-size:27px」が設定されている太文字になります。

（2）textパラメータ
アラートの説明文として、表示される内容です。
デフォルトでは、HTMLタグが利用できませんので、改行が必要な場合は「改行コード（\n）」を入れます。

（3）iconパラメータ
どういったアラートなのかを、アニメーションで表現してくれるアイコンを指定します。
種類は「success（成功）」「warning（注意）」「Error（警告）」「info（案内）」があります。

「SweetAlert」の優れた特徴

「SweetAlert」を利用することで、デフォルトの「alert関数」では表現できなかった操作を行うことができるようになります。

「Yes」or「No」による分岐

「SweetAlert」では、ユーザーが選択する内容によって、その後の実行内容を変化させることができます。

フォームを埋め込められる

アラート内に、HTMLを書かずに入力フォームを埋め込むことができます。

オリジナルのベーシック認証を作ることも可能かもしれませんね。

簡単なAjax処理を利用できる

「SweetAlert」には、自前のAjax処理を行う構造があります。

ただし、制約も多いため、自分自身で用意したAjax処理を入れるのが汎用性が高いと感じます。

まとめ

「SweetAlert」は、非常に高性能なアラートを作成することができます。

特に、ユーザーの行動に対して条件分岐を設けられることは、アラートを使った演出の可能性を大きく広げてくれます。

無骨なデフォルトのアラートに嫌気が差したら、「SweetAlert」の導入を検討してはどうでしょうか？