HTMLでアラート表示を簡単に変える事ができる【sweetalert】

こんにちは、ハル@haru_elpisです。

HTMLをやっていると、「アラート表示が小さくて使いにくい」って思いますよね。そんな時に使える、アラート表示を変えることが出来る「sweetalert」を紹介です。

アラート画面の比較

通常アラート

alert('ここに表示したいメッセージを書く')

とてもシンプルです、chromeの場合は画面の上側に小さく表示されるので、シンプルすぎる感があります。

SweetAlertのアラート

SweetAlertを使うと、次のようなダイアログを表示させる事ができます。

Swal.fire(
'タイトル',
'ここに表示したいメッセージを書く（テスト）',
'success'
);

コードは少し多くなりますが、とても簡単にダイアログを表示させる事が出来ます。お洒落な感じもあって良いですね！

確認ダイアログの比較

通常のconfirm

通常のJavaScriptのconfirmでは、次のようなダイアログが表示されます。

confirm('確認メッセージ');

処理前に確認ダイアログを表示させてOK・キャンセルによって処理を分岐させる際に用いますが、こちらも味気ないです。

SweetAlertのconfirm

SweetAlertだと次のようになります。

Swal.fire({
  title: 'タイトル',
  text: "確認メッセージ",
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: 'OK',
  cancelButtonText: 'NG'  
}).then((result) => {
  if (result.value) {
    Swal.fire(
      '完了',
      '完了メッセージ',
      'success'
    )
  }
});

ダイアログが大きく表示されるため、重要な処理は本当に行ってよいのかの確認を視覚的に目出させる事ができます。