モーダル・ダイアログ（Modal / Dialog）
確認・フォーム・アラートなど、ユーザーの注意を引きつけるオーバーレイUIの実装を3つのアプローチで比較。 サイズ・アニメーション・フォーカス制御・Escape キー対応・確認ダイアログなど、実践的なパターンをインタラクティブに確認できます。
Mantine Modal
Mantine の Modal はサイズ（xs〜full）・centered・withCloseButton・overlayProps など豊富なプロパティを持つ。 closeOnClickOutside・closeOnEscape でUXを細かく制御でき、ネストモーダルもそのまま対応。 フォームモーダルは TextInput・Select・Textarea など Mantine のフォームコンポーネントと自然に組み合わせられる。
6サイズ（xs〜full）centeredネストモーダルoverlayPropsフォームモーダル
読み込み中...
tsx
'use client';
import { useState } from 'react';
import { MantineProvider, Modal, Button } from '@mantine/core';
import '@mantine/core/styles.css';
export function MantineModalDemo() {
const [opened, setOpened] = useState(false);
return (
<MantineProvider>
<Button onClick={() => setOpened(true)}>モーダルを開く</Button>
<Modal opened={opened} onClose={() => setOpened(false)} title="モーダルタイトル">
<p className="text-sm text-gray-600">モーダルの内容をここに記述します。</p>
<div className="flex justify-end gap-2 mt-4">
<Button variant="default" onClick={() => setOpened(false)}>キャンセル</Button>
<Button onClick={() => setOpened(false)}>確認</Button>
</div>
</Modal>
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使ったモーダル・ダイアログを実装してください。 - 使用ライブラリ: @mantine/core の Modal - size prop（xs / sm / md / lg / xl / full）でサイズを切り替えられること - closeOnClickOutside・closeOnEscape・withCloseButton で閉じる手段を制御すること - centered prop で画面中央に表示できること - overlayProps でオーバーレイの透明度・ぼかしを設定すること - TextInput・Select・Textarea など Mantine のフォームコンポーネントと組み合わせたフォームモーダルを実装し、バリデーションエラーを表示できること - ネストモーダルを実装すること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Mantine | Ant Design | CSS カスタム |
|---|---|---|---|
| サイズ指定 | ✅ xs / sm / md / lg / xl / full | ✅ px / % 指定 | ⚠️ maxWidth で自作 |
| 中央揃え | ✅ centered prop | ✅ centered prop | ✅ flexbox で実装 |
| Escape キー | ✅ closeOnEscape prop | ✅ keyboard prop | ✅ useEffect で実装 |
| 背景クリックで閉じる | ✅ closeOnClickOutside | ✅ maskClosable | ✅ backdrop onClick |
| 確認ダイアログ | ⚠️ useModals / 手動実装 | ✅ Modal.confirm 静的メソッド | ⚠️ ConfirmDialog コンポーネント自作 |
| フォーム統合 | ✅ Mantine フォームと自然に統合 | ✅ Form.useForm() で管理 | ⚠️ useState で手動管理 |
| アニメーション | ✅ 組み込み（transitionProps） | ✅ 組み込み | ⚠️ CSS animation で自作 |
| スクロール抑制 | ✅ 自動 | ✅ 自動 | ✅ body overflow hidden |
| バンドルサイズ | ⚠️ 中（全体で大） | ⚠️ 中（全体で大） | ✅ ゼロ追加 |
選択のポイント
- Mantine — xs〜full の6サイズプリセット・centered・overlayProps など設定が豊富。 Mantine のフォームコンポーネントと自然に組み合わせられるため、フォームモーダルを多用するプロジェクトに最適。 ネストモーダルも追加設定なしで動作する。
- Ant Design — Modal.confirm / Modal.warning / Modal.info の静的メソッドが優秀で、確認ダイアログを1行で呼び出せる。 footer prop で null を渡せばフッターを完全に非表示にでき、任意のJSXでカスタムフッターも作りやすい。 Form.useForm() との組み合わせでフォームバリデーションも簡単に統合できる。
- CSS カスタム — 依存ゼロで軽量。BaseModal + ConfirmDialog のようにコンポーネントを薄く分割しておくと再利用性が高い。 デザインシステムに完全準拠したスタイルが必要な場合や、ライブラリのオーバーライドが煩雑な場合に有効。 useEffect での Escape キー処理・スクロール抑制も数行で実装できる。