【ITニュース解説】Create a Modal without any framework.

この解説では、Webサイトでよく見かける「モーダルウィンドウ」を、特別なライブラリやフレームワークを使わずに、HTML、CSS、JavaScriptというWeb開発の基本的な技術だけで作成する方法を学ぶ。モーダルウィンドウとは、Webページの一部を覆い隠すように表示され、ユーザーに特定の情報を見せたり、操作を促したりする小さなポップアップのような表示領域のことだ。フレームワークを使わない「バニラJS」での実装は、Webの仕組みを深く理解する良い機会となるだろう。

まず、この仕組みを作るために必要なファイル群から説明する。index.htmlがWebサイトのメインページとなり、ここからモーダルウィンドウを開く。style.cssはモーダルの見た目や動き（アニメーション）を定義するスタイルシートファイルだ。app.jsはモーダルの開閉やコンテンツの読み込みといった動的な操作を制御するJavaScriptファイルである。さらに、モーダル内に表示するコンテンツとして、news.html、about.html、contact.htmlという3つの簡単なHTMLファイルを用意する。これらすべてのファイルを同じディレクトリに配置して始める。

index.htmlは、Webページの骨格を定義するファイルである。headタグ内では、文字コードの設定やビューポートの設定など、ページの基本的な情報を記述する。ここでは特にstyle.cssを読み込み、ページ全体のデザインを適用している。bodyタグ内には、ユーザーに見えるコンテンツが配置される。モーダルの背景を暗くするための#overlayというdiv要素、ページタイトル、そしてナビゲーションリンクが用意されている。このナビゲーションリンクは、それぞれ「News」「About」「Contact」と表示され、クリックするとモーダルを開くためのトリガーとなる。重要なのは、これらのリンクがclass="modal-trigger"を持っていることと、data-url、data-colorというカスタムデータ属性を持っている点だ。data-urlはモーダルに読み込むHTMLファイルのパスを、data-colorはモーダルの背景色を指定している。これらはJavaScriptで利用される情報だ。ページの最下部には、モーダル本体となる#modalというdiv要素と、その中に閉じるボタン#modal-close-btn、そしてコンテンツが表示される#modal-contentが配置されている。JavaScriptファイルのapp.jsは、これらの要素を操作するために</body>タグの直前で読み込まれている。

次に、style.cssによるデザインとアニメーションを見ていこう。CSSは、Webページの外観を美しく整え、ユーザー体験を向上させる役割を担う。まず、bodyタグに基本的なフォントや余白が設定されている。#overlayは、モーダルが開いたときに画面全体を覆う半透明の背景として機能する。初期状態ではopacity: 0（完全に透明）とvisibility: hidden（見えない）で非表示になっており、is-visibleクラスが追加されるとopacity: 1とvisibility: visibleに変わり、transitionプロパティによってゆっくりとフェードインするアニメーションが適用される。

モーダル本体である.modalも同様に、初期状態ではopacity: 0とvisibility: hiddenで非表示になっている。この要素には、--modal-backgroundというCSSカスタムプロパティが使われているのが特徴だ。これはJavaScriptから動的に色を設定するために用いられ、指定がなければdeeppinkが適用される。is-visibleクラスが追加されると表示されるが、その際のアニメーションはデスクトップとモバイルで異なる。@mediaクエリという機能を使って、画面幅が769px以上のデスクトップ環境ではモーダルが画面中央にフェードインし、少し拡大するようなアニメーションが適用される。一方、画面幅が768px以下のモバイル環境では、モーダルが左端からスライドして表示されるアニメーションが適用される。これにより、異なるデバイスサイズで最適な表示と動きを提供できる「レスポンシブデザイン」が実現されている。閉じるボタン.close-btnは、モーダルの右上隅に配置され、そのデザインはコンテンツの上に重なるように設定されている。modal-contentは、読み込まれたHTMLコンテンツを表示する領域であり、デスクトップ表示ではコンテンツが長い場合にスクロールできるようになっている。

最後に、app.jsによるモーダルの動的な挙動を解説する。このスクリプトは、Webページが完全に読み込まれてから実行されるように、DOMContentLoadedイベントの中でコード全体がラップされている。これは、HTML要素がまだ存在しないうちにJavaScriptがそれらを操作しようとしてエラーになるのを防ぐための良い習慣だ。

スクリプトの冒頭では、document.getElementByIdやdocument.querySelectorAllを使って、モーダル本体、オーバーレイ、コンテンツ領域、閉じるボタン、そしてモーダルを開くトリガーとなるすべてのリンクといった、HTML内の重要な要素をJavaScriptから操作できるように取得している。lastActiveElementという変数は、モーダルが開く直前にどの要素がフォーカスされていたかを記憶するために使われる。これは、モーダルを閉じたときにユーザーが元の場所に戻れるようにするため、アクセシビリティの観点から非常に重要だ。

openModal関数は、モーダルを開く際のすべての処理を担う。この関数は、クリックされたリンクのdata-url属性から表示するコンテンツのURLを、data-color属性からモーダルの背景色を取得する。fetch APIとasync/await構文を使って、指定されたURLからHTMLコンテンツを非同期で読み込み、modalContent.innerHTMLにその内容を挿入する。ここで、modal.style.setProperty('--modal-background', color)という行が重要だ。これは、JavaScriptからCSSのカスタムプロパティ--modal-backgroundの値を動的に変更し、モーダルの背景色を切り替えている部分である。コンテンツの読み込みと色の設定が完了したら、modal.classList.add('is-visible')とoverlay.classList.add('is-visible')を実行して、CSSで定義されたアニメーションが適用され、モーダルとオーバーレイを表示させる。さらに、アクセシビリティのために閉じるボタンにフォーカスを移動させ、Escキーでモーダルを閉じられるようにkeydownイベントリスナーを追加する。

closeModal関数は、開いているモーダルを閉じる処理を行う。modal.classList.remove('is-visible')とoverlay.classList.remove('is-visible')を実行することで、モーダルとオーバーレイを非表示に戻し、コンテンツ領域をクリアする。また、アクセシビリティのために、モーダルを開く前にフォーカスしていた要素にフォーカスを戻し、不要になったEscキーのイベントリスナーを削除する。handleEscKey関数は、Escキーが押されたことを検知し、closeModal関数を呼び出すだけのシンプルな関数だ。

最後に、イベントリスナーの初期化部分だ。triggerLinks.forEachを使って、すべてのモーダルトリガーリンクに対してクリックイベントリスナーを設定している。リンクがクリックされた際には、まずevent.preventDefault()が呼び出され、リンクのデフォルトの動作（別のページへ遷移すること）がキャンセルされる。その後、openModal関数が呼び出され、モーダルが表示される。閉じるボタンにもクリックイベントリスナーが設定されており、クリックされるとcloseModal関数が実行される。

このように、HTMLで構造を、CSSで見た目とアニメーションを、JavaScriptで動的な挙動をそれぞれ担当させることで、フレームワークに頼らずとも機能的でユーザーフレンドリーなモーダルウィンドウを作成できる。これはWeb開発の基本的な要素がどのように連携し、魅力的なユーザーインターフェースを作り出すかを理解するための、実践的な学習例となるだろう。