JavaScript | 1 日 120 分 × 7 日アプリ学習：モーダルウィンドウ管理

Web APP JavaScript
2026.02.28
スポンサーリンク
スポンサーリンク
  1. モーダル管理を“クラスとして育てる”2日目のテーマ
  2. 複数モーダルを扱うためのクラス設計
    1. 単一モーダルの限界を知る
    2. 解決策：ModalManager を導入する
    3. 深掘りポイント：責務を分けるとコードが壊れにくくなる
  3. UI 状態制御をより安全にする
    1. isOpen の役割を強化する
    2. 状態遷移の例
    3. 状態を getter にする
    4. 深掘りポイント：UI 状態は“真実の源泉（Single Source of Truth）”
  4. 背景クリック制御を“誤作動ゼロ”にする
    1. 1日目の背景クリック
  5. イベント伝播を深掘りする
    1. クリックイベントの流れ
    2. 誤作動の原因
    3. 解決策：content 側で伝播を止める
    4. 深掘りポイント：stopPropagation は“防波堤”
  6. ESC キー対応を“複数モーダル対応”にする
    1. 1日目の実装
    2. 解決策：ModalManager に ESC を集約する
    3. 深掘りポイント：イベントは“1か所で受ける”方が安全
  7. 2日目のまとめ
  8. モーダル管理を“より実務的に強くする”3日目のテーマ
  9. モーダルの「状態遷移」を導入して UI を安定させる
    1. 状態を boolean だけで持つ限界
    2. 状態を文字列で管理する
    3. 状態遷移の例
    4. 深掘りポイント：状態遷移は UI の“真実の源泉”
  10. 背景クリック制御を“誤作動ゼロ”にする応用テクニック
    1. 2日目までの背景クリック
    2. より安全な判定方法：クリック位置で判断する
    3. 仕組み
    4. 深掘りポイント：contains() は“クリック判定の最強ツール”
  11. ESC キー対応を“複数モーダルの優先順位”まで考える
    1. 複数モーダルが重なるケース
    2. ModalManager にスタック（stack）を導入する
    3. モーダル側で登録する
    4. 深掘りポイント：スタック構造は“UI の重なり”を自然に表現する
  12. クラス設計を“拡張しやすい形”にする
    1. コールバックを導入する
    2. コールバックを受け取れるようにする
    3. 深掘りポイント：クラスは“拡張ポイント”を持つと強くなる
  13. 3日目のまとめ
  14. モーダル管理を“アプリ品質”へ引き上げる 4日目のテーマ
  15. モーダルの「アニメーション」と状態遷移を同期させる
    1. アニメーションがあると状態管理が難しくなる理由
    2. 状態を4段階にする
    3. open() をアニメーション対応にする
    4. 深掘りポイント：transitionend を使う理由
  16. 閉じる処理もアニメーションと同期させる
    1. close() の実装
    2. 深掘りポイント：状態遷移があると「二重閉じ」を防げる
  17. 背景クリック制御を“構造変化に強い”形にする
    1. 3日目までの方法
    2. 4日目の方法：クリック位置で判定する
    3. 仕組み
    4. 深掘りポイント：contains() は“構造変化に強い”
  18. ESC キー対応を“アニメーション中は無効”にする
    1. 問題点
    2. 解決策：opened のときだけ ESC を受け付ける
    3. 深掘りポイント：状態遷移が UI の安全装置になる
  19. クラス設計を“責務ごとに分割”して読みやすくする
    1. Modal クラスの責務
    2. ModalManager の責務
    3. 深掘りポイント：責務を分けるとコードが壊れにくい
  20. 4日目のまとめ
  21. モーダル管理を“プロ品質”へ近づける 5日目のテーマ
  22. モーダルを「外部から操作しやすい API」にする
    1. 4日目までの課題
  23. コールバックを「イベント風」に整理する
    1. 4日目までのコールバック
    2. 5日目の改善：イベント風 API
    3. 実装例
    4. 深掘りポイント：イベント API は“拡張性の核”
  24. UI 状態制御を「外部から見える状態」として整理する
    1. 4日目までの状態
    2. 5日目の改善：getter を用意する
    3. 外部からの利用例
    4. 深掘りポイント：状態を“読み取り専用”にするのが安全
  25. 背景クリック制御を「複雑な UI に耐える形」にする
    1. 4日目の contains() 判定
    2. クリック許可領域を登録できるようにする
    3. 外部から追加できるようにする
    4. 実装例
    5. 深掘りポイント：safeAreas は“UI の自由度”を高める
  26. ESC キー対応を「優先順位付き」にする
    1. 4日目までの ESC 対応
    2. 5日目の改善：ESC を無効化できるようにする
    3. 実装例
    4. 深掘りポイント：UI の“意図”をコードで表現する
  27. 5日目のまとめ
  28. モーダル管理を“アプリ全体で破綻しないレベル”へ仕上げる 6日目のテーマ
  29. モーダルが開いている間の「外部スクロール」を制御する
    1. モーダルが開いているのに背景がスクロールする問題
    2. スクロールを止める実装
    3. open() と close() に組み込む
    4. 深掘りポイント：スクロール制御は「モーダルの責務」
  30. フォーカス制御で「キーボード操作に強いモーダル」にする
    1. モーダルが開いたときの問題
    2. 解決策：モーダル内にフォーカスを閉じ込める
    3. open() でフォーカスをセット
    4. 深掘りポイント：フォーカス制御は“プロ品質のモーダル”の必須要素
  31. 背景クリック制御を「複数レイヤー対応」にする
    1. モーダルの上に別のモーダルが開くケース
    2. 解決策：ModalManager に「最前面モーダル」を問い合わせる
    3. モーダル側で判定する
    4. 深掘りポイント：複数モーダルがあるときは“最前面だけが操作対象”
  32. ESC キー対応を「状態遷移」と連動させる
    1. 4〜5日目の ESC 対応
    2. 実装
    3. 深掘りポイント：アニメーション中の ESC は絶対に無効
  33. クラス設計を「責務の分離」で整理し直す
    1. Modal の責務
    2. ModalManager の責務
    3. 深掘りポイント：責務を分けると“壊れにくくなる”
  34. 6日目のまとめ
  35. 7日目のゴールと全体像
  36. 完成版 Modal クラスの全体コード
  37. クラス設計の肝：責務をどう分けているか
  38. UI 状態制御の肝：state と isOpened の意味
  39. イベント伝播と背景クリック制御の肝
  40. ESC キー対応とフォーカス制御の肝
  41. 開く / 閉じるの一連の流れを言葉でなぞる
  42. ModalManager の最小実装と使い方
  43. 7日目の本質と、あなたがもう持っているもの

モーダル管理を“クラスとして育てる”2日目のテーマ

2日目は、1日目で作った Modal クラスをさらに実用的にする 回です。
今日のポイントは次の3つです。

  • 複数モーダルを扱えるようにクラス設計を強化する
  • UI 状態制御を「より安全に・より明確に」する
  • イベント伝播を深掘りし、背景クリックの誤作動を完全に防ぐ

1日目で「開く / 閉じる」「背景クリック」「ESCキー対応」を作りましたが、
2日目はそれを “アプリで使えるレベル” に引き上げます。

前へ
12
スポンサーリンク
タイトルとURLをコピーしました