TL;DR

この記事では、Next.js と TypeScript を用いてモーダルウィンドウのコンポーネントを作成する手法について解説します。あくまで一例として見ていただき、自身のプロジェクトに適応させていきましょう。

モーダルウィンドウの実装

それでは、早速モーダルウィンドウを実装してみましょう。まずは、全体のソースコードを見ていただきます。ここでは ModalComponent とその呼び出し方法を示します。

ファイル名：ModalComponent.tsx

import { useState } from 'react'
import { css } from '@emotion/react'

type ModalProps = {
  buttonLabel: string
}

const ModalComponent = ({ buttonLabel }: ModalProps) => {
  const [isOpen, setIsOpen] = useState(false)

  const toggleModal = () => {
    setIsOpen(!isOpen)
  }

  return (
    <>
      <button onClick={toggleModal} css={buttonStyle}>
        {buttonLabel}
      </button>
      {isOpen && (
        <div css={overlayStyle}>
          <div css={modalStyle}>
            <p>This is a modal window.</p>
            <button onClick={toggleModal}>Close</button>
          </div>
        </div>
      )}
    </>
  )
}

const buttonStyle = css`
  /* Button styling */
`

const overlayStyle = css`
  /* Overlay styling */
`

const modalStyle = css`
  /* Modal window styling */
`

export default ModalComponent

呼び出し

作成したモーダルウィンドウコンポーネントを実際に呼び出してみましょう。

ファイル名：home.tsx

import ModalComponent from './ModalComponent'

const Home = () => {
  return (
    <div>
      <h1>Hello, Next.js</h1>
      <ModalComponent buttonLabel="Open Modal" />
    </div>
  )
}

export default Home

この App コンポーネント内で ModalComponent を呼び出しています。ボタンのラベルとして buttonLabel プロパティに "Open Modal" を渡しています。これで、モーダルウィンドウが完成しました。ボタンをクリックするとモーダルウィンドウが表示され、再度クリックすると閉じます。

コード解説

上記のソースコードを分解しながら詳しく見ていきましょう。今回のコードでは、Emotion という CSS-in-JS ライブラリを用いています。

まず、useState を使ってモーダルウィンドウが開いているかどうかを管理する isOpen という state を作成します。初期値は false として、モーダルウィンドウを閉じた状態から始めます。

次に toggleModal 関数を定義します。この関数はボタンがクリックされるたびに isOpen の値を反転させ、モーダルウィンドウを開閉します。

そして、JSX 内でボタンとモーダルウィンドウをレンダリングします。モーダルウィンドウは isOpen の値が true のときだけ表示します。

最後に、それぞれの要素に対する CSS を定義します。この部分はお好みでデザインしてください。

モーダルウィンドウを理解する

ここまで読んで、「もっと詳しく学びたい！」という方は、以下のリンクを参考にしてみてください。

モーダルウィンドウの活用

このモーダルウィンドウのコンポーネントは、ユーザーにメッセージを伝えるため、フォームの入力を求めるためなど、さまざまな場面で活用できます。

モーダルウィンドウのポップアップスタイルは、ユーザーの注意を引くのに非常に有効です。ただし、頻繁に表示するとユーザー体験を阻害する可能性があるため、適度な使用が望まれます。

また、モーダルウィンドウの内容は明確で簡潔にすることが重要です。ユーザーは素早く情報を摂取し、続けてアクションを取ることが期待されます。これらを踏まえて、ユーザー体験を向上させるための効果的なモーダルウィンドウを設計しましょう。