Reactの「react-modal」でモーダルを手軽に作ろう！初心者向けにわかりやすく解説

2024-07-14

当サイトでは一部リンクに広告が含まれています

リッチな見た目のWebサイトを作ろうと思うと、モーダルを使いたくなる場面も多いかと思います。

しかし、ゼロから CSS や JavaScript を書いてモーダルを作るのは大変ですよね。

そこで、今回は react-modalというライブラリを使って簡単にモーダルを実装する方法を丁寧に解説します。

この記事を読んでいただければ、モーダルを用いたモダンなWebアプリをサクッと作れるようになります！

この記事を書いた人

現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
プログラミングスクールのカリキュラム執筆経験あり

react-modal とは何か？

react-modal とは、JavaScriptのライブラリであるReactを用いて、ウェブページにモーダルウィンドウを追加するためのツールです。

https://github.com/reactjs/react-modal

モーダルウィンドウとは、ウェブサイトのメインのコンテンツの上に新たに表示される小さいウィンドウのことで、よくお知らせや入力フォームなどに用いられます。

react-modal の基本的な使い方

React Modalの基本的な使い方は非常にシンプルです。

まず、react-modal をプロジェクトにインストールします。

npm install react-modal

インストールが完了したら、React Modalを使用したコンポーネントを作成しましょう。

import React from 'react';
import Modal from 'react-modal';

class ExampleApp extends React.Component {
  constructor() {
    super();

    this.state = {
      showModal: false
    };

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

  handleOpenModal () {
    this.setState({ showModal: true });
  }

  handleCloseModal () {
    this.setState({ showModal: false });
  }

  render () {
    return (
      <div>
        <button onClick={this.handleOpenModal}>モーダルを開く</button>
        <Modal
          isOpen={this.state.showModal}
          contentLabel="Example Modal"
        >
          <h2>ハロー、ワールド！</h2>
          <button onClick={this.handleCloseModal}>閉じる</button>
        </Modal>
      </div>
    );
  }
}

export default ExampleApp;

これは、モーダルウィンドウを開くボタンをクリックすると「ハロー、ワールド！」と表示される簡単な例です。

isOpenプロパティにステートのshowModalを渡してモーダルの開閉を制御
「モーダルを開く」ボタンクリックでhandleOpenModalを呼び出し
ステートのshowModalがtrueになりモーダルが表示
「閉じる」ボタンクリックでhandleCloseModalを呼び出し
ステートのshowModalがfalseになりモーダルが閉じる

このように、React Modalを用いて簡単にモーダルウィンドウを作成・制御することができます。

react-modal のコンポーネント化とは？

Reactの魅力の一つは、UIを再利用可能な部品（コンポーネント）に分割できる点です。

モーダルウィンドウ自体を一つのコンポーネントとして扱うことで、再利用性を高め、コードの見通しも良くなるのです。

では、具体的にどのようにコンポーネント化を行う例を見てみましょう。

import React from 'react';
import Modal from 'react-modal';

class ModalComponent extends React.Component {
  constructor(props) {
    super(props);

    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

  handleCloseModal () {
    this.props.onClose();
  }

  render () {
    return (
      <Modal
        isOpen={this.props.isOpen}
        contentLabel="Example Modal"
      >
        <h2>{this.props.title}</h2>
        <p>{this.props.content}</p>
        <button onClick={this.handleCloseModal}>閉じる</button>
      </Modal>
    );
  }
}

export default ModalComponent;

以上のModalComponentは、モーダルウィンドウ自体を一つのコンポーネントとして扱っています。

このコンポーネントは、isOpen、title、content、onCloseというプロップスを受け取ります。

もちろん、コンポーネント化していますので使い回しも自由自在です。

例えば、以下のように使用することができます。

import React from 'react';
import ModalComponent from './ModalComponent';

class ExampleApp extends React.Component {
  constructor() {
    super();

    this.state = {
      showModal: false
    };

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

  handleOpenModal () {
    this.setState({ showModal: true });
  }

  handleCloseModal () {
    this.setState({ showModal: false });
  }

  render () {
    return (
      <div>
        <button onClick={this.handleOpenModal}>モーダルを開く</button>
        <ModalComponent
          isOpen={this.state.showModal}
          title="ハロー、ワールド！"
          content="これはモーダルウィンドウのテストです。"
          onClose={this.handleCloseModal}
        />
      </div>
    );
  }
}

export default ExampleApp;

上記のコードでは、ModalComponentを再利用して、開閉や表示内容を自由に制御しています。

react-modal で複数のモーダルを制御する方法

Webサイトでモーダルウィンドウを扱うとなると、例えば会員登録を促すモーダルやログインを促すモーダルなど、複数のモーダルウィンドウを扱う必要があります。

そこで、react-modal では、state（状態管理）を活用することで、複数のモーダルウィンドウを個別に制御することができます。

では、具体的にどのように制御するのか見てみましょう。

import React from 'react';
import ModalComponent from './ModalComponent';

class ExampleApp extends React.Component {
  constructor() {
    super();

    this.state = {
      showModal1: false,
      showModal2: false
    };

    this.handleOpenModal1 = this.handleOpenModal1.bind(this);
    this.handleCloseModal1 = this.handleCloseModal1.bind(this);
    this.handleOpenModal2 = this.handleOpenModal2.bind(this);
    this.handleCloseModal2 = this.handleCloseModal2.bind(this);
  }

  handleOpenModal1 () {
    this.setState({ showModal1: true });
  }

  handleCloseModal1 () {
    this.setState({ showModal1: false });
  }

  handleOpenModal2 () {
    this.setState({ showModal2: true });
  }

  handleCloseModal2 () {
    this.setState({ showModal2: false });
  }

  render () {
    return (
      <div>
        <button onClick={this.handleOpenModal1}>モーダル1を開く</button>
        <ModalComponent
          isOpen={this.state.showModal1}
          title="ハロー、ワールド！"
          content="これはモーダルウィンドウ1のテストです。"
          onClose={this.handleCloseModal1}
        />

        <button onClick={this.handleOpenModal2}>モーダル2を開く</button>
        <ModalComponent
          isOpen={this.state.showModal2}
          title="こんにちは、ユニバース！"
          content="これはモーダルウィンドウ2のテストです。"
          onClose={this.handleCloseModal2}
        />
      </div>
    );
  }
}

export default ExampleApp;

上記のコードでは、showModal1とshowModal2という二つの state を用いて、それぞれ異なるモーダルウィンドウを制御しています。

このように、React Modalを活用すれば、一つのウェブページ上で複数のモーダルウィンドウを個別に制御することも可能です。

react-modal とZ-Index: スクロール順の制御

モーダルウィンドウが表示されている間に背後のページがスクロールされてしまうと、モーダルを閉じたときに違うページのような印象を受けるため、ユーザーエクスペリエンスが損なわれてしまいます。

そのため、モーダルウィンドウは、通常、他の全ての要素よりも前面に表示されるべきです。

これは、CSSのプロパティであるz-indexを用いて制御します。

react-modal では、モーダルウィンドウのz-indexをスタイルとして指定することができます。

import React from 'react';
import Modal from 'react-modal';

Modal.setAppElement('#root');

class ExampleApp extends React.Component {
  // 以前のコード...

  render () {
    return (
      <div>
        <button onClick={this.handleOpenModal1}>モーダル1を開く</button>
        <Modal
          isOpen={this.state.showModal1}
          onRequestClose={this.handleCloseModal1}
          style={{
            overlay: {
              zIndex: 1000
            }
          }}
        >
          <h2>ハロー、ワールド！</h2>
          <p>これはモーダルウィンドウ1のテストです。</p>
          <button onClick={this.handleCloseModal1}>閉じる</button>
        </Modal>

        // 以前のコード...
      </div>
    );
  }
}

export default ExampleApp;

上記のコードでは、style propを用いてモーダルウィンドウのz-indexを1000に指定しています。

これにより、他の要素がどのようなz-indexを持っていても、モーダルウィンドウがそれらの上に表示されることを保証することができます。

以上が、react-modal を用いたモーダルウィンドウの作成方法とその応用例です。

react-modal を活用することで、見た目にも機能にも優れたモーダルウィンドウを簡単に実装することができますので、リッチなWebサイトを作ってみましょう！