テーマを決めた背景
簡単なjavascriptの練習素材をネットで探していた際、モーダルウィンドウという言葉を知りました。調べてみると授業で学んだハンバーガーメニューと仕組みが似ていて、私にもできそうだったので練習課題に選択しました。また、ポートフォリオでも利用できそうだったので実践練習として挑戦しました。
モーダルウィンドウの練習
モーダルウィンドウとは
ユーザーがWebサイトを操作している最中に、現在の画面の上に重ねて表示される小さなウィンドウのことです。背後のコンテンツは薄暗くなり、操作できなくなるのが特徴です。よくWEB広告に使用されています。
モーダルウィンドウの仕組み
通常は隠しておいたモーダル部分を、特定の操作（ボタンクリックなど）をきっかけに表示させ、同時に背後のコンテンツを操作できないようにするというものです。
モーダルウィンドウの作り方
- HTMLに、画面上に出すボタンやウィンドウを作る
- CSSで装飾 + 位置設定
- javascriptでクリックしたときに表示・非表示するようにプログラムを組む
コードペンで練習
HTML・CSS・javascriptの内容はコードペンを閲覧ください。
See the Pen モーダルウィンドウ【練習】 by R.Tanaka (@TanakaR) on CodePen.
ポートフォリオ用のモーダルウィンドウをコードペンで実践
ポートフォリオでは制作物を選択するとウィンドウが表示され、画像と簡単な説明文が出るようにしたいと考えました。ですが、制作物は複数あるので練習と同じような手順では実装できない…
再度ネットでコードのモーダルがどのように複数のボタンと連携しているか検索しながら実践することにしました。
私が使用した連携方法『データ属性』
データ属性は、HTMLタグにカスタムデータを埋め込むための属性です。通常の属性（idやclassなど）とは異なり、「data-」から始まる独自の名称を自由に設定できるのが特徴です。今回は、モーダルの開閉連携のためにdata-modal-targetとdata-modal-nameと名付けて活用しました。
実装したコードペン
HTML・CSSについてはデータ属性のところ以外練習で使用した通りの仕組みで作成していますのでjavascriptのみ解説していきます。
プログラムの流れ
- data-modal-targetをクリックすると実装開始
- 今回は、リンクタグを使用しているのでe.preventDefault();でリンクのデフォルト動作（ページ遷移）をキャンセルさせる。「e」はイベントオブジェクトのことです。
- data-modal-target属性の値を読み取り、HTML全体の中から、modalというクラスを持ち、かつdata-modal-name属性の値がmodalNameと同じ要素を探す。
- そのモーダルが存在するなら、表示
- 閉じるボタンがクリックされたら、.removeClass("is_visible")でモーダルを閉じる。
今回身につけた知識
- ★ データ属性
- ★ `` (バッククォート) と ${} (テンプレートリテラル):・・・
``（バッククォート）で囲まれた文字列は「テンプレートリテラル」と呼ばれます。JavaScriptの特別な文字列の書き方で、中に${変数名}と書くと、その部分に変数の値を埋め込むことができます。
今回の場合、modalNameという変数には開きたいモーダルの名前（例えば "banner01"）が入っています。 - ★ JQueryのメゾット「closest(クローゼスト)」・・・ 自分自身（特定の要素）からスタートして、親の要素へ向かって順番にたどっていき、指定された条件（セレクタ）に当てはまる一番近い要素を見つけてきて！ という命令。
学んだこと
JavaScriptへの理解を深めるため、練習だけでなくポートフォリオ制作で実践にも挑戦しました。しかし、実際に取り組んでみると、新たな知識が必要になったり、思わぬところでつまずいたり…。正直、練習時の4倍ほど時間がかかり大変でしたが、実践がいかに重要か学ぶことができました。今後は、学んだことを実践までセットで取り組み、着実にスキルを身につけていこうと思います。
＜ 追記 2025/08/22 ＞
ポートフォリオサイトをWordPressで再構築したため、今回はモーダルウィンドウの機能は使用しておりません。