標準alertのダサさに我慢できず、SweetAlert2で綺麗にした話

はじめに

alert('保存しました') や confirm('本当に削除しますか？') は手軽ですが、見た目をカスタマイズできず、ブラウザやOSによってデザインがバラバラになってしまいます。ボタンの文言も「OK」「キャンセル」から変えられず、アイコンも付けられません。プロダクトのUIに合わせたいのに、標準ダイアログだけがどうしても浮いてしまう——そんな経験をした方は多いはずです。

SweetAlert2は、この標準ダイアログをまるごと置き換えてくれるライブラリです。アイコン・ボタン・入力フォーム・トースト通知まで、1つのAPIでまかなえます。

まずは触った方が早いと思うので、動くサンプルを先に置いておきます。

＞＞＞ まずはサンプルを確認 ＜＜＜

SweetAlert2とは

SweetAlert2は、JavaScriptのalert()・confirm()・prompt()を置き換えるための、レスポンシブでアクセシブル（WAI-ARIA対応）なポップアップライブラリです。フレームワークに依存せず、素のJavaScriptからでもReact・Vue・Angularからでも同じように使えます。

主な特徴

• ゼロ依存 - 外部ライブラリを一切必要とせず、単体で動作します
• Promiseベースの結果取得 - Swal.fire()はPromiseを返すため、then()で確認・キャンセル・入力値をまとめて扱えます
• 豊富な組み込みUI - 成功・エラー・警告・質問アイコン、入力フォーム、トースト通知、プログレスバー付きタイマーなどを標準サポート
• アクセシビリティ対応 - WAI-ARIA属性が自動で付与され、キーボード操作にも対応します
• 高いカスタマイズ性 - CSSクラスの差し替えやテーマ、アニメーションまで細かく調整できます

インストール

npm・yarn・pnpmのいずれからも導入できます。

npm install sweetalert2

yarn add sweetalert2

CDNから直接読み込む場合はscriptタグでも利用できます。

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

SweetAlert2のサンプルを動かす

下のサンプルでは、名前とアイコンの種類を選んでボタンを押すと、Swal.fire()でその内容に応じたポップアップが表示されます。iconオプションを'success'から'error'や'question'に変えると、アイコンとアクセントカラーがまるごと切り替わるのが体感できます。

要点となる部分だけを抜き出すと、次のようになります。

import Swal from 'sweetalert2'

Swal.fire({
  title: '本当に削除しますか？',
  text: 'この操作は取り消せません',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: '削除する',
  cancelButtonText: 'キャンセル',
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('削除しました', '', 'success')
  }
})

実際に動かせるのが下のサンプルです。名前を空にしたまま「表示する」を押すと、SweetAlert2のicon: 'error'表示に切り替わる様子も確認できます。

Swal.fire()は表示するだけでなく、ユーザーの操作結果をPromiseで返します。上のサンプルでもコンソールにisConfirmedが出力されているとおり、確認・キャンセル・裏側のクリックなど、どう閉じられたかをそのままthen()で受け取れます。

基本的な使い方

もっともシンプルな呼び出し方は、タイトル・本文・アイコンを3つの引数として渡す形です。

import Swal from 'sweetalert2'

Swal.fire('保存しました', '変更内容を反映しました', 'success')

細かく設定したい場合はオブジェクトで渡します。title・text・iconのほか、confirmButtonTextでボタン文言も自由に変更できます。

import Swal from 'sweetalert2'

Swal.fire({
  title: 'エラーが発生しました',
  text: 'ネットワーク接続を確認してください',
  icon: 'error',
  confirmButtonText: '閉じる',
})

実践的なユースケース

削除確認ダイアログ

「本当に削除しますか？」のような取り消し不可な操作の前に、showCancelButtonで確認を挟むのはSweetAlert2の定番の使い方です。result.isConfirmedで分岐すれば、削除の実行と、成功メッセージの表示を1つのフローにまとめられます。

入力フォームとバリデーション

inputオプションを指定すると、Swal.fire()のポップアップ自体が入力フォームになります。inputValidatorでその場でバリデーションを行い、条件を満たすまでポップアップを閉じさせない、といった制御も可能です。

import Swal from 'sweetalert2'

Swal.fire({
  title: 'メールアドレスを入力',
  input: 'email',
  inputPlaceholder: 'you@example.com',
  inputValidator: (value) => {
    if (!value) return 'メールアドレスは必須です'
  },
}).then((result) => {
  if (result.isConfirmed) {
    console.log('入力値:', result.value)
  }
})

実際に空欄のまま送信してみると、inputValidatorが返した文言がポップアップ内にそのまま表示され、閉じずに再入力を促す様子が分かります。

トースト通知

ページ右上などに軽く通知を出したいだけなら、toast: trueを使います。position・timer・timerProgressBarを組み合わせると、確認ボタンを押させることなく数秒後に自動で消える通知が作れます。

import Swal from 'sweetalert2'

Swal.fire({
  toast: true,
  position: 'top-end',
  icon: 'success',
  title: '保存しました',
  showConfirmButton: false,
  timer: 2500,
  timerProgressBar: true,
})

timerの値を長く・短くすると、表示され続ける時間がそのまま変わります。通常のポップアップと違い、toast: trueの場合は画面全体を暗くするオーバーレイも出ません。

3択ダイアログ（保存・破棄・キャンセル）

「変更を保存しますか？」のように、単純なOK/キャンセルでは表現しきれない場面もあります。SweetAlert2ではshowDenyButtonを使うと、確認・拒否・キャンセルの3択ボタンを1つのポップアップに配置でき、result.isConfirmed・result.isDenied・result.isDismissedで分岐できます。

import Swal from 'sweetalert2'

Swal.fire({
  title: '変更を保存しますか？',
  showDenyButton: true,
  showCancelButton: true,
  confirmButtonText: '保存する',
  denyButtonText: '保存しない',
  cancelButtonText: 'キャンセル',
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('保存しました', '', 'success')
  } else if (result.isDenied) {
    Swal.fire('変更は破棄されました', '', 'info')
  }
})

3つのボタンのうちどれが押されたかによって、isConfirmed・isDenied・isDismissedのいずれかがtrueになります。下のサンプルで実際にそれぞれのボタンを押し、結果表示がどう変わるか確認してみてください。

まとめ

SweetAlert2を使えば、ブラウザ標準のalert()・confirm()・prompt()では実現できなかったアイコン付きダイアログ、入力フォーム、トースト通知、3択ボタンまで、1つのシンプルなAPIで扱えます。結果はPromiseで返ってくるため、then()内で分岐を書くだけで確認・入力・キャンセルのハンドリングが完結するのも魅力です。

標準ダイアログの見た目に妥協していたら、まずは削除確認やトースト通知など、小さな箇所から置き換えてみてはいかがでしょうか。

参考リンク

• SweetAlert2公式ドキュメント
• SweetAlert2 GitHub
• sweetalert2 - npm