この記事では、React.jsでモーダルウィンドウを作る方法について解説します。モーダルウィンドウは、情報をポップアップ形式で表示したい場合に便利です。Reactの状態管理とCSSを使って、シンプルなモーダルを実装する方法を学びましょう。
モーダルウィンドウとは？基本的な説明
モーダルウィンドウは、ページ上にオーバーレイとして表示され、ユーザーの操作を一時的に制限することで重要な情報を伝える手法です。通常、ポップアップ通知やフォーム入力、詳細情報の表示などに使用されます。
React.jsでモーダルを作成する基本
React.jsでモーダルウィンドウを実装するには、まず状態管理（useState）を使ってモーダルの表示・非表示を切り替える仕組みを作ります。以下のコードは、基本的なモーダルの例です。
function Modal({ isVisible, onClose }) {
if (!isVisible) {
return null;
}
return (
×
This is a modal window!
);
}
function App() {
const [isModalVisible, setModalVisible] = useState(false);
return (
setModalVisible(false)} />
);
}
モーダルウィンドウのスタイリング
次に、モーダルウィンドウの外観をCSSでスタイリングします。以下のCSSコードを使用して、モーダルウィンドウのスタイルを適用しましょう。
.modal {
display: block;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
margin: 15% auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
width: 80%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.close {
color: #aaa;
float: right;
font-size: 28px;
cursor: pointer;
}
.close:hover, .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
React.jsでモーダルウィンドウを作る方法のまとめ
この記事では、React.jsでモーダルウィンドウを作成する方法について学びました。useStateを使った状態管理でモーダルの表示・非表示を切り替え、CSSでスタイリングを適用することで、シンプルかつ効果的なモーダルを実装できました。ぜひ、他のプロジェクトでも活用してみましょう。
