SweetAlert2 | 高機能アラートで通知を実装 | 複数の実例で理解するJavaScriptライブラリ解説

INDEX

SweetAlert2についての解説

SweetAlert2についての解説

SweetAlert2は、スタイリッシュでモダンなアラートダイアログを提供するJavaScriptライブラリです。標準のJavaScriptの`alert()`や`confirm()`関数に比べ、UIのデザインやカスタマイズ性に優れています。SweetAlert2を使えば、ユーザー体験を向上させる高機能な通知を実装できます。

SweetAlert2の実装方法

SweetAlert2を利用するためには、以下のCSSとJavaScriptファイルを<head>内に記述します。

<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>

SweetAlert2の特徴

特徴	説明
カスタムデザイン	ボタン、タイトル、テキスト、アイコンなどを簡単にカスタマイズ可能。
非同期処理の対応	Promiseに対応し、非同期処理の結果を使ったアラート表示が可能。
タイマー機能	指定した時間で自動的に閉じるアラートを実装できる。
確認・キャンセルボタン	確認やキャンセルを選べるダイアログを作成可能。

プロパティとその値の一覧表

プロパティ名	説明	値の例
title	アラートダイアログのタイトルを指定。	“カスタムタイトル”
text	アラートダイアログのテキストメッセージを指定。	“カスタムメッセージ”
icon	アラートに表示するアイコンを指定。	“success”, “error”, “warning”, “info”
timer	アラートが自動的に閉じるまでの時間をミリ秒で指定。	3000（3秒）
showCancelButton	キャンセルボタンを表示するかどうか。	true, false

基本的なアラートを表示する例

実行例

HTMLとJavaScriptコード

<button id="basic-alert-btn">基本アラートを表示</button>

<script>
document.getElementById('basic-alert-btn').addEventListener('click', function () {
    Swal.fire('基本的なアラート');
});
</script>

解説

この例では、ボタンをクリックすることで基本的なSweetAlert2のアラートを表示します。

カスタムタイトルとテキストのアラートを表示する例

実行例

HTMLとJavaScriptコード

<button id="custom-alert-btn">カスタムアラートを表示</button>

<script>
document.getElementById('custom-alert-btn').addEventListener('click', function () {
    Swal.fire({
        title: 'カスタムタイトル',
        text: 'カスタムテキストを設定',
        icon: 'info',
        confirmButtonText: 'OK'
    });
});
</script>

解説

この例では、カスタムタイトルとテキストを設定したアラートを表示しています。アイコンやボタンのテキストもカスタマイズ可能です。

確認とキャンセルボタン付きのアラートを表示する例

実行例

HTMLとJavaScriptコード

<button id="confirm-alert-btn">確認アラートを表示</button>

<script>
document.getElementById('confirm-alert-btn').addEventListener('click', function () {
    Swal.fire({
        title: '本当に削除しますか？',
        text: 'この操作は元に戻せません！',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'はい、削除します',
        cancelButtonText: 'キャンセル'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire('削除しました！', '', 'success');
        }
    });
});
</script>

解説

確認アラートを表示し、ユーザーが「はい」と「キャンセル」を選択できるようにします。操作の結果によって次のアクションが変わります。

タイマー付きアラートを表示する例

実行例

HTMLとJavaScriptコード

<button id="timer-alert-btn">タイマー付きアラートを表示</button>

<script>
document.getElementById('timer-alert-btn').addEventListener('click', function () {
    Swal.fire({
        title: '自動的に閉じるアラート',
        text: '5秒後に自動で閉じます',
        timer: 5000,
        timerProgressBar: true,
        didOpen: () => {
            Swal.showLoading();
        },
        willClose: () => {
            clearInterval();
        }
    });
});
</script>