JavaScriptのアラートをデザインするsweetalert.jsの使い方

JavaScriptのalert機能は、ユーザーに確実に伝えたい情報を強制的に見せることが出来るため便利です。

しかし、

など、既存のアラートのUIでは使いづらい点もあります。

今回紹介するJavaScriptプラグインの「sweetalert.js」では、上記の気になる点をすべて解消でき、導入及び実装が極めて簡単なので、オススメなプラグインです。

参考 https://sweetalert.js.org/

デフォルトアラートとsweetalert.jsのアラートのデモ

ブラウザで動くデフォルトのアラートと、sweetalert.jsで実装したアラートの比較を用意しました。

下記のボタンをクリックして、両者の比較をしてみてください。

sweetalert.jsのアラートは、デザインもポップな形で見やすく目立ち、ボタンも押しやすいです。
スマホで比較してみるとその差は顕著に感じると思います。

sweetalert.jsを導入する

sweetalert.jsは、CDNで用意されたスクリプトタグを書くだけで実装が出来ます。

この手のプラグインには珍しく、jsファイルのみでアラートを機能を実装できるので、極めてお手軽です。

javaScriptでアラート機能を実装する前の箇所にコピペしてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

sweetalert.jsの実行方法

sweetalert.jsのプラグインの設定が終わったら、実際に実装をしてみましょう。

シンプルなアラートを実行

デフォルトのアラートを機能をsweetalert.jsに置き換えたい場合は、swal();と書き、括弧の中に表示させる文字を入れるだけで実行できます。

<input type="button" id="alert-demo" value="アラートボタン">
<script>
document.getElementById("alert-demo").onclick = function(){
    swal('アラートが実行されました！');
};
</script>

確認アラート（confirm）を実行

アラートに対して、「はい／いいえ」等の選択肢を付けて処理を分岐させたい場合もsweetalert.jsで実行できます。
JavaScriptで言う「confirm」と呼ばれている機能です。

重要な処理を行う前にこのアラートをかませることで、誤クリックによる処理を防ぐことが出来ます。

<input type="button" id="confirm-demo" value="確認アラートボタン">
<script>
document.getElementById("confirm-demo").onclick = function(){
    var options = {
        text: '確認ウインドウです。\nアラートを表示しますか？', //\nでテキストの改行が出来ます
        buttons: {
            cancel: 'キャンセル',
            ok: '表示する'
        }
    };
    swal(options).then(function(value){
        if(value){
            //表示するを選んだ場合の処理
            swal('アラートを表示！');
        }
    });
};
</script>

---

alert機能を使用する機会が多い方には、導入が簡単なsweetalert.jsはオススメです。

筆者もよく使用していますが、スマホで目立ちやすい＆押しやすいUIはかなり気に入っています。

是非導入を検討してみてください。

以上、JavaScriptのアラートをデザインするsweetalert.jsの使い方、でした。