Reactに基づいたポップアップコンポーネント

コードの例#

import React, { useState } from 'react';
import PropTypes from 'prop-types';

const Modal = ({ title, body, onClose }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => {
    setIsModalOpen(false);
    onClose();
  };

  return (
    <>
      <button onClick={handleOpenModal}>モーダルを開く</button>

      {/* モーダルダイアログ */}
      {isModalOpen && (
        <div className="modal">
          <div className="modal__overlay" onClick={handleCloseModal} />
          <div className="modal__dialog">
            <div className="modal__header">{title}</div>
            <div className="modal__body">{body}</div>
            <button className="modal__close-btn" onClick={handleCloseModal}>
              X
            </button>
          </div>
        </div>
      )}
    </>
  );
};

Modal.propTypes = {
  title: PropTypes.string.isRequired,
  body: PropTypes.node.isRequired,
  onClose: PropTypes.func.isRequired,
};

export default Modal;

この例では、Modal という名前のモーダルコンポーネントを作成しました。このコンポーネントには 3 つのプロップがあります：

title：モーダルのタイトル、必須です。
body：モーダルの内容、任意の React 要素をサポートしていますが、必須です。
onClose：モーダルを閉じるときのコールバック関数、必須です。
このコンポーネントの主な機能は、モーダルを表示することです。ユーザーが開くボタンをクリックすると、モーダルが表示され、タイトルとボディによってモーダルの内容が決まります。

共通のコンポーネントを作成する際に考慮すべき内容は、具体的な機能以外にも以下のようなものです：

コンポーネントの再利用性：将来の要件変更を考慮してコンポーネントを設計する必要があります。
コンポーネントの使いやすさ：開発者が簡単に使用できるように、API はできるだけシンプルで明確にし、十分なドキュメントと例を提供する必要があります。
コンポーネントのメンテナンス性：コードは理解しやすく、変更しやすく、構造が明確であり、余分な結合や重複したコードがないようにする必要があります。
コンポーネントのパフォーマンス：コンポーネントはパフォーマンス要件を満たし、さまざまなシナリオで正常に動作する必要があります。
コンポーネントのテスト：コンポーネントは十分にテストされ、さまざまな状況で正常に動作することを確認する必要があります。

コンポーネントの解説#

次に、このモーダルコンポーネントの具体的な実装について説明します：

コンポーネントの状態管理#

このコンポーネントでは、React の Hook である useState を使用してモーダルのオープンとクローズの状態を管理しています。具体的には、isModalOpen という名前の state を定義し、初期値を false に設定しています。これはモーダルが閉じている状態を表します。

次に、handleOpenModal と handleCloseModal 関数を使用して isModalOpen の値を制御します。ユーザーが開くボタンをクリックした場合、handleOpenModal 関数を呼び出して isModalOpen を true に設定し、モーダルを表示します。ユーザーがモーダル内部の閉じるボタンまたは遮蔽層をクリックした場合、handleCloseModal 関数を呼び出して isModalOpen を false に設定し、モーダルを閉じます。

コンポーネントのスタイル#

このコンポーネントでは、CSS を使用してモーダルのスタイルを定義しています。具体的には、モーダルの外側に modal という名前の div を作成し、この div 内に 3 つの子要素を定義しています：

modal__overlay：遮蔽層で、ユーザーが他のコンテンツを操作できないようにします。
modal__dialog：モーダルのダイアログで、モーダルの内容を表示します。
modal__close-btn：閉じるボタンで、モーダルを閉じます。
CSS では、疑似要素::before と::after を使用して、矢印やボタンなどの一般的な UI 要素を作成することができます。

コンポーネントのプロパティの検証#

このコンポーネントでは、prop-types ライブラリを使用してプロパティの検証を行っています。具体的には、コンポーネントの定義時に PropTypes をインポートし、Modal.propTypes を使用してプロパティを検証しています。これにより、コンポーネントに渡されるプロパティが期待される型と形式の要件を満たしていることを確認し、エラーの可能性を減らすことができます。

以上のように、共通のコンポーネントを作成する際には、再利用性、使いやすさ、メンテナンス性、パフォーマンス、テストなどの側面を考慮する必要があります。また、状態管理、スタイル設計、プロパティの検証などの詳細な問題にも注意する必要があります。