⚙️ JavaScriptでモーダルを動かす仕組み

JavaScriptでモーダルを制御する基本的な流れはこんな感じだよ。

1. 必要なHTML要素をJavaScriptで捕まえる:
   • モーダル全体を覆う「オーバーレイ」の要素。
   • モーダルの内容が表示される「コンテンツ」の要素。
   • モーダルを開くきっかけになる「トリガーボタン」。
   • モーダルを閉じるための「閉じるボタン」（×ボタンやキャンセルボタンなど）。
2. イベントに耳をすます (イベントリスナーの設定):
   • 「トリガーボタン」がクリックされたら、モーダルを開く処理をする。
   • 「閉じるボタン」がクリックされたら、モーダルを閉じる処理をする。
   • 「オーバーレイ」の部分（モーダルコンテンツの外側）がクリックされたら、モーダルを閉じる処理をする。
   • キーボードの「Escキー」が押されたら、モーダルを閉じる処理をする（これはユーザーにとってすごく便利！）。
3. モーダルを開く・閉じる関数を作る:
   • 開く関数 (例: openModal): モーダルオーバーレイのCSSのdisplayプロパティをnoneからblock（またはflexなど表示される状態）に変える。
   • 閉じる関数 (例: closeModal): モーダルオーバーレイのdisplayプロパティをnoneに戻す。

言葉で聞くとちょっと複雑に感じるかもしれないけど、一つ一つの部品はシンプルなんだ。実際にコードを見ながら理解していこう！

🔩 ステップ1: HTML要素を取得しよう

まずは、前回作ったHTMLの中から、JavaScriptで操作したい要素たちを捕まえるところから始めるよ。document.getElementById()やdocument.querySelector()といった命令を使うんだ。

// モーダル関連の要素を取得
const modalOverlay = document.getElementById('myModalOverlay'); // オーバーレイ全体
const modalContent = document.getElementById('myModalContent'); // モーダルの中身の箱
const openModalButton = document.getElementById('openModalBtn'); // モーダルを開くボタン
const closeModalButton = modalContent.querySelector('.modal-close-button'); // モーダル内の閉じる(X)ボタン
const cancelButton = modalContent.querySelector('.btn-secondary'); // モーダル内のキャンセルボタン (例)

こんな感じで、それぞれの要素を変数に入れておくと、後で使いやすいよ。HTML側には、対応するidやclassを付けておくのを忘れずにね！
（例として、モーダルを開くボタンには id="openModalBtn" を付けておこう。）

🪄 ステップ2: モーダルを開く関数・閉じる関数を作ろう

次に、モーダルを開いたり閉じたりするための専用の関数（命令のまとまり）を作るよ。

モーダルを開く関数: openModal()

この関数が呼ばれたら、隠れていたモーダルオーバーレイを表示するんだ。CSSでdisplay: none;にしていたのを、display: block;（またはCSSの設計に合わせてdisplay: flex;など）に変えるのが基本だよ。CSSクラスの付け外しで制御するのも良い方法だね。

function openModal() {
  if (modalOverlay) {
    modalOverlay.classList.add('is-visible'); // 'is-visible'クラスを付けて表示
    // (オプション) モーダルが開いた時にフォーカスを管理する処理などをここに追加できる
    // 例: closeModalButton.focus();
  }
}

ここでは、modalOverlayにis-visibleというCSSクラスを追加することで表示を制御しているよ。対応するCSSで.modal-overlay.is-visible { display: block; }のようにスタイルを定義しておくんだ。（アニメーションのためにopacityも変更しているよ。上の<style>タグ内を見てね！）

モーダルを閉じる関数: closeModal()

この関数が呼ばれたら、表示されているモーダルオーバーレイを再び隠すんだ。is-visibleクラスを取り除けばOKだね。

function closeModal() {
  if (modalOverlay) {
    modalOverlay.classList.remove('is-visible');
    // (オプション) モーダルが閉じた時にフォーカスを元に戻す処理などをここに追加できる
  }
}

👂 ステップ3: イベントをキャッチして関数を呼び出そう

関数ができたら、あとは「いつ」その関数を実行するかを決めてあげるだけ。これがイベントリスナーの役割だ。

• 開くボタンのクリック: openModalButtonがクリックされたらopenModal()を呼び出す。
• 閉じるボタン (×) のクリック: closeModalButtonがクリックされたらcloseModal()を呼び出す。
• キャンセルボタンのクリック: cancelButtonがクリックされたらcloseModal()を呼び出す。
• オーバーレイのクリック: modalOverlayがクリックされたらcloseModal()を呼び出す。
  ただし、この時ちょっと注意が必要！オーバーレイの中にあるモーダルコンテンツ部分をクリックした時には閉じてほしくないよね。そこで、クリックされたのが بالضبط modalOverlay 自体（つまり、コンテンツの外側の暗い部分）であるかを確認する工夫をするか、モーダルコンテンツでクリックイベントの伝播を止める（event.stopPropagation()）必要があるんだ。
• Escキーのプレス: ドキュメント全体でキーボードのキーが押されたイベントを監視し、それがEscキーだったらcloseModal()を呼び出す。

// 開くボタンのイベントリスナー
if (openModalButton) {
  openModalButton.addEventListener('click', openModal);
}

// 閉じる(X)ボタンのイベントリスナー
if (closeModalButton) {
  closeModalButton.addEventListener('click', closeModal);
}

// キャンセルボタンのイベントリスナー (もしあれば)
if (cancelButton) {
  cancelButton.addEventListener('click', closeModal);
}

// オーバーレイクリックで閉じる
if (modalOverlay) {
  modalOverlay.addEventListener('click', (event) => {
    // クリックされたのがオーバーレイ自体(コンテンツ部分以外)なら閉じる
    if (event.target === modalOverlay) {
      closeModal();
    }
  });
}

// Escキーで閉じる
document.addEventListener('keydown', (event) => {
  // モーダルが表示されていて、かつEscキーが押された場合
  if (modalOverlay && modalOverlay.classList.contains('is-visible') && event.key === 'Escape') {
    closeModal();
  }
});

event.target === modalOverlay のチェックは、イベントの発生源が正確にオーバーレイ要素自体であるかを確認する方法だよ。これで、モーダルの中身をクリックしても閉じてしまうのを防げるんだ。

✨ デモで実際に動かしてみよう！

さあ、これまでに説明したHTML、CSS、JavaScriptを全部組み合わせると、実際に動くモーダルウィンドウができるよ！下のボタンをクリックしてみてね。

（このデモを動かすには、上記のJavaScriptコードがこのページで実行されている必要があるよ。）

まとめ

今回は、JavaScriptを使ってモーダルウィンドウに「開く」「閉じる」という基本的な動きをつける方法を学んだね！

• HTML要素をJavaScriptで取得し、それらにイベントリスナーを設定する。
• openModal と closeModal という関数を作って、モーダルの表示状態を切り替える。
• クリックだけでなく、Escキーやオーバーレイのクリックでも閉じられるようにすると、ぐっと使いやすくなる。

これで、君もインタラクティブなモーダルウィンドウを作れるようになったはずだ！JavaScriptのコードは少しずつ慣れていくものだから、焦らずに色々な要素で試してみてね。

次のページでは、モーダルウィンドウの中身をもっと豊かにする方法や、見た目をさらにカッコよくするCSSのテクニックについて見ていくよ！