1. モーダルコンポーネントとは何か

モーダルとは、画面の上に重なって表示される小さなウィンドウのことです。確認メッセージや注意書きなどでよく使われます。

現実でたとえると、作業中に突然渡される確認用の紙のような存在です。内容を確認しないと、元の作業に戻れません。

2. なぜモーダルを再利用可能にするのか

モーダルは多くの場面で使われます。削除確認、注意表示、説明表示など、用途はさまざまです。

毎回新しく作ると、見た目や動きがバラバラになります。一つの共通モーダルを作っておくと、管理がとても楽になります。

3. 最もシンプルなモーダルコンポーネント

まずは、表示と非表示を切り替えられるだけのシンプルなモーダルを作ります。難しい処理は入れず、構造を理解することが目的です。


function Modal(props) {
  if (!props.isOpen) {
    return null;
  }

  return (
    <div>
      <div>
        {props.children}
        <button onClick={props.onClose}>閉じる</button>
      </div>
    </div>
  );
}

export default Modal;

モーダルが開いているときだけ、画面に内容が表示されます。

4. モーダルを開閉する仕組み

モーダルは、表示するかどうかを状態で管理します。状態とは、今の画面の状況を覚えておくための仕組みです。

スイッチのオンとオフを想像すると理解しやすいです。オンなら表示、オフなら非表示になります。


import React, { useState } from "react";
import Modal from "./Modal";

function App() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(true)}>モーダルを開く</button>
      <Modal isOpen={open} onClose={() => setOpen(false)}>
        <p>これはモーダルの中身です</p>
      </Modal>
    </div>
  );
}

export default App;

ボタンを押すとモーダルが表示され、閉じると消えます。

5. childrenを使って中身を自由に変える

childrenを使うことで、モーダルの中身を自由に差し替えられます。外枠は同じで、中の文章だけを変えられるのがポイントです。

これは、同じ封筒に違う手紙を入れるようなイメージです。


<Modal isOpen={open} onClose={() => setOpen(false)}>
  <h2>確認</h2>
  <p>本当に削除しますか？</p>
</Modal>

タイトルと文章が変わったモーダルが表示されます。

6. ボタン操作をモーダル内に追加する

モーダルの中には、複数のボタンを置くこともできます。確認やキャンセルなど、よくある操作を想定します。


<Modal isOpen={open} onClose={() => setOpen(false)}>
  <p>処理を実行しますか？</p>
  <button>はい</button>
  <button onClick={() => setOpen(false)}>いいえ</button>
</Modal>

モーダル内に複数の操作ボタンが表示されます。