react-modal で簡単にモーダルを作ろう！初心者向けにわかりやすく解説

2024-03-12

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

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

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

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

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

react-modal とは何か？

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

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

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

そして react-modal はこのモーダルウィンドウを作成し、表示するための役割を果たします。

では、実際にどのように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を再利用可能な部品（コンポーネント）に分割できる点です。

react-modal もまた、コンポーネントを活用してモーダルウィンドウを表示します。

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

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

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サイトを作ってみましょう！