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 つの props があります：

title：モーダルのタイトル、必須です。
body：モーダルの内容、任意の種類の React 要素をサポートしていますが、必須です。
onClose：モーダルを閉じる際のコールバック関数、必須です。

このコンポーネントの主な機能は、モーダルを表示することです。ユーザーが開くボタンをクリックすると、オーバーレイとモーダルダイアログが表示され、モーダルの内容は title と body によって決まります。

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

コンポーネントの再利用性：将来の要件変更を考慮してコンポーネントを設計する必要があります。
コンポーネントの使いやすさ：開発者が簡単に使用できるように、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 を使用して props を検証しています。これにより、コンポーネントに渡される props が期待される型と形式の要件を満たしていることを保証し、エラーの可能性を減らすことができます。

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