OSS探訪ページ内ナビ
概要
SweetAlert2はJavaScript標準のalert・confirm・promptを、レスポンシブでカスタマイズ可能なpopupへ置き換えるUIライブラリです。依存ライブラリを持たず、Swal.fire()へtitle・text・icon・button・input等のoptionを渡して表示し、利用者の操作結果をPromiseで受け取れます。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日：
主な特徴
Swal.fireへoptionを渡してalert・confirm・input popupを表示する
Swal.fire()はtitle、text/html、icon、button、timer、input等を受け取り、popupを表示します。簡単なtitle/html/iconの引数形式も用意されています。
Promise結果からconfirm・deny・dismissを分岐する
Swal.fire()はSweetAlertResultをPromiseで返します。利用者の操作後にresultを受け取り、confirmされた値やdismiss理由に応じてアプリケーション処理を続けられます。
出典：[2]
向いている用途
削除確認・form補助・処理完了通知を共通UIへまとめたい場合に向く
confirmation dialog、prompt、toast notificationなどを一つのUI体系へ統一し、結果を非同期flowへ接続したいWebアプリケーションに適します。
出典：[2]
導入前の確認
html optionへ利用者入力をそのまま渡さず、表示内容をapplication側で管理する
SweetAlert2はtextとhtmlの両方を受け取れます。HTMLを表示する場合は、信頼できない文字列をそのまま渡さず、application側で安全な内容として扱ってください。
出典：[2]
フレームワーク連携はReact・Angular等の別packageも確認する
repository READMEはReact、Angular、Laravel等の連携projectを別途案内しています。フレームワーク固有のライフサイクルやレンダリングへ統合する場合は対応wrapperのversionも確認してください。
出典：[1]
参考にした公式資料
- [1]SweetAlert2 v11.26.25 README(2026-10-05)
- [2]SweetAlert2 v11.26.25 TypeScript definitions(2026-10-05)
- [3]SweetAlert2 mixin implementation and examples(2026-10-05)
- [4]SweetAlert2 webpack usage test(2026-10-05)
- [5]SweetAlert2 v11.26.25 package metadata(2026-10-05)
- [6]SweetAlert2 MIT license(2026-10-05)
編集部からの補足
標準alert()より情報量の多いconfirm・input・toastを同じAPIで扱え、Promiseで結果を分岐できる点が実装しやすいライブラリです。共通optionが多い画面ではSwal.mixin()で既定値をまとめると、dialogごとの設定重複を減らせます。
3ステップで試す
- 1
SweetAlert2 11.26.25を導入する
確認対象の安定版を固定して導入します。
npm install --save-exact sweetalert2@11.26.25 - 2
Swalを読み込む
packageのdefault exportを読み込み、popup表示に使う
Swalを用意します。import Swal from 'sweetalert2'; - 3
confirm popupを表示して結果を受け取る
Swal.fire()が返すPromiseから利用者のconfirm結果を受け取り、後続処理へ分岐します。const result = await Swal.fire({ title: '削除しますか？', icon: 'question', showCancelButton: true, }); if (result.isConfirmed) console.log('confirmed');
成長
成長の推移 · 直近30日
18,098 Stars
推移データを蓄積中です。
開発アクティビティ
直近90日・週次
- Commit（直近30日）
- 2
- Open PR
- 0
開発アクティビティを蓄積中です。
Built with
カテゴリとタグ
カテゴリ
GitHubデータ
GitHubのデータGitHubの詳細データを見る
GitHub Topics
- sweetalert
- alert
- popup
- prompt
- dialog
- toast
- notifications
- wai-aria
- accessible
- confirm
- confirmation-dialog
- sweetalert2
- Stars
- 18,098
- Forks
- 1,620
- Watchers
- 215
- Open Issues
- 4
- Contributors
- 117
- 所有者種別
- Organization
- 主要言語
- JavaScript
- ライセンス
- MIT
- リポジトリ最終更新
- 2026/09/18
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- Storybook91,200 Stars
共通タグ 4件
UI状態をstoryとして保存し、Docs・interaction test・AI toolへ再利用するfrontend workshop
TypeScript - Expo52,566 Stars
共通タグ 4件
React NativeアプリをAndroid・iOS・Webへ一つのprojectから展開する
TypeScript - Uppy31,010 Stars
共通タグ 4件
ファイル選択UIと再開可能なアップロードをプラグインで組み合わせ、ローカル・リモートの取得元から送信する
TypeScript - Cropper.js13,902 Stars
共通タグ 4件
画像上の選択範囲を移動・拡縮し、ブラウザ内で切り抜き結果をCanvasとして取得する
TypeScript - React250,891 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
コンポーネントを組み合わせてWeb・ネイティブUIを構築するJavaScriptライブラリ
JavaScript - Svelte88,287 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
componentをcompile時に効率的なJavaScriptへ変換し、runesでreactive UIを記述する
JavaScript
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。