☕
「ダイアログ」「ポップアップ」などUIの違いまとめ【React実装付き】
Web アプリケーションを開発していると、「ダイアログ」「ポップアップ」「モーダル」「トースト」など、見た目や振る舞いが似ている UI が数多く登場します。
しかし、プロジェクトや現場によっては、同じ UI を指していても異なる呼び方をしていたり、逆に同じ名称で異なる UI を指していたりすることがあり、混乱や認識のズレを感じる場面が少なくありません。
そこで本記事では、そうした違和感を解消するために、各 UI の意味や用途、そして React による実装例を交えながら、それぞれの違いや使い分けのポイントを整理してみたいと思います。
1. ダイアログ(Dialog)
特徴
- ユーザーに何らかの確認・入力・選択を求める UI。
- 通常は**モーダル(背面操作をブロック)**として表示される。
-
alert()
,confirm()
,prompt()
などのブラウザ API や、ライブラリによる提供も多い。
主な用途
- 削除の確認
- 設定変更
- フォーム入力
実装例(React のみ)
import React from "react";
export const Dialog = ({ isOpen, onClose, onConfirm }) => {
return (
<div style={styles.backdrop}>
<div style={styles.dialog}>
<h2>確認</h2>
<p>本当に削除しますか?</p>
<div style={{ display: "flex", gap: "1rem" }}>
<button onClick={onClose}>キャンセル</button>
<button onClick={onConfirm}>削除</button>
</div>
</div>
</div>
);
};
const styles = {
backdrop: {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "black",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
dialog: {
background: "white",
padding: "2px",
borderRadius: "8px",
minWidth: "300px",
},
};
2. ポップアップ(Popup)
特徴
- 画面の上に浮かぶ補助的な UI の総称。
- モーダルとは限らず、ユーザーの操作を妨げない非モーダル。
- トリガー要素の周辺に表示され、補足情報やアクションを提供。
主な用途
- カレンダー選択(Date Picker)
- カスタムツールチップ
- 詳細設定・オプションの表示
実装例(React のみ)
import React, { useState } from "react";
export const Popup = () => {
const [show, setShow] = useState(false);
return (
<div style={{ position: "relative" }}>
<button onClick={() => setShow(!show)}>情報を表示</button>
{show && (
<div
style={{
position: "absolute",
top: "100%",
left: 0,
background: "white",
border: "1px solid gray",
padding: "0.5rem",
marginTop: "0.25rem",
}}
>
ここに情報を表示
</div>
)}
</div>
);
};
3. モーダル(Modal)
特徴
- 背面の UI とのやり取りをブロックする UI。
- ユーザーはモーダル内の操作を完了または閉じるまで他の操作ができない。
- UI の形式であり、ダイアログやポップアップにもモーダル形式がある。
ダイアログとの違い
- ダイアログ:何かを尋ねる内容・意図がある
- モーダル:背面をブロックする性質を持つ UI 形式
※ 実装は「1. ダイアログ」のコードと同じ構造で可
4. トースト(Toast)
特徴
- 画面の隅に一時的に表示される通知型 UI。
- 操作を妨げず、自動で消える。
- 非モーダルで、複数同時表示も可能。
主な用途
- フォーム送信成功・失敗の通知
- 非同期処理の結果通知
実装例(React のみ)
import React, { useEffect, useState } from "react";
type ToastProps = {
message: string;
duration?: number;
export const Toast = ({ message, duration = 3000 }: ToastProps) => {
const [visible, setVisible] = useState(true);
useEffect(() => {
const timer = setTimeout(() => setVisible(false), duration);
return () => clearTimeout(timer);
}, [duration]);
if (!visible) return null;
return (
<div style={toastStyle}>
{message}
</div>
);
};
const toastStyle: React.CSSProperties = {
position: "fixed",
bottom: "30px",
right: "30px",
backgroundColor: "black",
color: "#white",
padding: "10px",
borderRadius: "20px",
};
最後に
これらの UI コンポーネントは見た目が似ていても、目的や使い方に違いがあります。React 単体でも十分な UI を実装できますが、UI ライブラリを使うことでアクセシビリティやアニメーションなどを簡単に扱えるメリットもあります。
用途に応じて適切な UI を選択し、ユーザーにとって使いやすいアプリケーションを設計していきましょう。
本記事の内容に誤り等ございましたら、ご指摘いただけますと幸いです。
Discussion