JavaScriptのアラートをリッチにするSweetAlertを使ってみた

目次

概要

JavaScriptでユーザに情報を表示する方法のひとつに、alert関数があります。

しかし、alert関数での情報の表示では、デザインが貧相であまり使いたくありません。

そこで、SweetAlertというJavaScriptのライブラリを使って、情報の表示の際のデザインをより良いものにしたので、その方法を書いておきます。

SweetAlertとSweetAlert2

SweetAlertを使おうとした際に、「SweetAlert」と「SweetAlert2」の2種類があることを確認しました。

違いとして、本家SweetAlertの開発が止まっていた際に、SweetAlertを元に改良を加えていったものがSweetAlert2のようです。

ちなみに、本家SweetAlertは、「SweetAlert」の方で、私が確認した時点では開発が止まってはおらず、開発されているようです。

最近のダウンロード数などを比べてみるとどちらも同じくらいであるので、使うのはどちらでもいいと思いますが、SweetAlert2の方が開発が活発なようなので、SweetAlert2を使う方がいい様な気がします。

そのため、この記事ではSweetAlert2を使った説明をします。

使い方

SweetAlert2を使うには、ファイルをダウンロードをしてそれを読み込むか、CDNのファイルを読み込むかの2種類の方法があります。

ダウンロードの方法は、公式サイトに掲載されています。

sweetalert2.github.io

これをみると、npmとbowerのパッケージが用意されており、CDNのURLも記述されています。

npmやbowerの場合は、次のコマンドでインストールできます。

npm install sweetalert2
bower install sweetalert2

CDNの場合は、次のURLです。

https://unpkg.com/sweetalert2

使い方は、パッケージやCDNなどでsweetalert2を読み込んだら、次のようにJavaScriptでalert関数を置き換えるように記述します。

swal('Good job!', 'You clicked the button!', 'success');

こうすると、次のように表示されます。

normal_202a5f81-75d3-4dbb-b276-2aefe25329b0.png

手軽な割には、かなりいいものになっていると思います。

これは、ただ情報を表示しただけですが、アラート内のボタンを複数個配置して押したボタンによって処理を分岐させたりなど、機能としては申し分ないです。

詳細な使い方は、ダウンロードの時に紹介した公式サイトに、実際に動作するサンプルが掲載されているので、それを参考にして使い方を覚えることができます。

まとめ

ユーザに情報をさせるには、他にも自前で実装するモーダルウィンドウや、簡単なものではHTMLの書き換えがありますが、モーダルウィンドウは自前で実装するのは面倒で、HTMLの書き換えは残念なデザインになりやすいです。

SweetAlertを使えば、手軽にそれなりのアラートを作ることができるので、時間を短縮したいのであれば積極的にSweetAlertを使っていくべきだと思います。