モーダルを開け閉めしてみよう！
下のボタンをクリックすると、練習用のモーダルウィンドウが開くよ。
ここに操作のフィードバックが表示されるよ。（例：「モーダルが開きました」）
第5章-2節: 実践！モーダル操作練習アプリ
前のページでは、ツールチップ作りの練習をしたね！設定を変えながら、見た目やコードがどう変わるか体験できたかな？
今回は、第3章で学んだ「モーダルウィンドウ」の番だ！モーダルを開いたり、色々な方法で閉じたりする、その基本的な操作を実際に試せる練習アプリを用意したよ。
ボタンをクリックしてモーダルを開き、どうすれば閉じられるか、色々な方法を試しながら、モーダルの動きとその裏側にあるJavaScriptの仕組みを体感してみよう！
練習のポイント
- まずは「練習用モーダルを開く」ボタンをクリック（またはEnterキー）して、モーダルが表示されることを確認しよう。
- 次に、モーダルを閉じるための4つの方法（「×」ボタン、フッターの「閉じる」ボタン、背景クリック、Escキー）をそれぞれ試してみよう。ちゃんと全部の方法で閉じられるかな？
- モーダルを閉じたときに、フィードバック表示エリアにどんなメッセージが出るか見てみよう。（例：「Escキーで閉じました」）
- なぜ、閉じる方法が複数用意されているとユーザーにとって親切なんだろう？ 考えてみよう。
- 第3章で学んだJavaScriptのコード（
addEventListener、displayの変更、classList.add/remove、event.targetのチェック、event.key === 'Escape'など）が、このアプリの裏側でどう動いているか想像してみよう。
実際に操作してみることで、モーダルウィンドウの基本的なユーザーインターフェース（どのように操作するか）とその実装のイメージが掴めるはずだよ。
英語の豆知識コーナー
ユーザー操作や期待に関する言葉を見てみよう！
-
Simulation
意味：シミュレーション、模擬実験
Original: This application provides a simulation of the modal closing mechanisms.
意訳：このアプリケーションは、モーダルを閉じるメカニズムのシミュレーションを提供します。
-
User Interaction
意味：ユーザーインタラクション、利用者との相互作用
Original: Understanding common user interaction patterns is key to good UI design.
意訳：一般的なユーザーインタラクションのパターンを理解することは、優れたUIデザインの鍵です。
-
Event Flow
意味：イベントフロー（イベントが発生してから処理されるまでの流れ）
Original: Debugging requires tracing the event flow through the application.
意訳：デバッグには、アプリケーションを通るイベントフローを追跡する必要があります。
-
Close Mechanism
意味：閉じる仕組み、閉鎖機構
Original: Providing multiple close mechanisms improves modal usability.
意訳：複数の閉じる仕組みを提供することは、モーダルの使いやすさを向上させます。
-
User Expectation
意味：ユーザーの期待、利用者が期待すること
Original: Pressing the Escape key to close a modal meets common user expectations.
意訳：Escapeキーを押してモーダルを閉じることは、一般的なユーザーの期待に応えます。
まとめ
今回は、モーダルウィンドウの基本的な開閉操作を練習するアプリを使ってみたね！
- ボタンクリックでモーダルを開く、という基本的なトリガーを体験できた。
- 閉じるボタン、背景クリック、Escキーといった、複数の方法でモーダルを閉じられること、そしてそれがなぜ便利なのかを実感できた。
- 操作に応じてフィードバックが表示されることで、どんなイベントが発生しているかのヒントが得られた。
この練習を通して、モーダルウィンドウの動きの裏側にあるJavaScriptの役割を、より具体的にイメージできるようになったかな？
次のページでは、さらに一歩進んで、マウスでドラッグして動かせるモーダルの操作を練習するアプリに挑戦するよ！