モーダルウインドウの実装方法4選！それぞれのメリットとデメリットもご紹介

今回実装方法としてご紹介するのは以下の4つです。

一つ一つ見ていきましょう！

素のJavaScript（Vanilla-JS）

JavaScriptメインで一番スタンダードな、初心者の方にも取っつきやすいやり方かなと思います。

デモでは、OPENボタンを押すことで非表示になっているモーダル部分にopacity: 1とvisibility: visibileを設定したクラスを付与することで表示するようスタイルを上書きしています。

メリットとしては実装が簡単な点が挙げられます。JavaScriptを勉強し始めの方も目にするメソッドを使用しているので、初心者の方にはオススメです。

デメリットとしては、後述のDialogタグを使用するよりも冗長で分かりにくいという点があります。

また、ECカートシステムなどで注文手続き画面といった個人情報を入力するページではWebスキミング対策としてJavaScriptの使用を禁止していることがあります。モーダルを使ってユーザーにもっとアピールしたい！となっても使えないというデメリットがあります。

スタイルの設定においても、opacityやvisibilityといった冗長的になりやすく、記述量が増えてしまうといったところもデメリットでしょうか。

See the Pen
Modal (JQuery) by mimihokuro (@mimi_hokuro)
on CodePen.

JavaScriptのライブラリであるjQueryによる実装も初心者の方には簡単な方法となります。

メリット・デメリットは素のJavaScriptに加えて、fadeInやfadeOutといったメソッドがjQueryによってすでに用意されているので、CSS・JavaScriptの記述量を大幅に減らすことができてコードがスッキリ、かつ分かりやすい点が大きなメリットとなります。

大きなデメリットとして、jQueryはライブラリを構成するプログラムを一式読み込む必要があるため、それがないと動かないということと、それ自体の容量が膨大で使用したいメソッド以外のものまで読み込んでしまうためページ速度に影響が出てしまうという点が挙げられます。

また、ReactやVueといった軽量でモダンなフレームワークの普及によって、近年のフロントエンド開発に採用されなくなっているという観点から脱jQueryが進んでいます。とはいっても、未だにjQueryを利用しているところも多いようなので、こんな感じでできるよ程度で覚えてもらうのがいいと思います。

inputタグとlabelタグを利用したモーダル実装です。モーダルだけでなくハンバーガーメニューのようなボタンクリックで開くUIには汎用的に使える方法になります。

最大のメリットはJavaScriptを使用しないというところです。HTMLタグとCSSのみ使用することでページ速度の向上が見込まれます。また、前述したようなJavaScriptが使えない特殊な環境でも対応できるため、環境依存に強い点もメリットの一つです。

デメリットとしては少しテクニカルな方法なので、初心者の方には取っつきにくい方法なのかなと思います。

可読性も他の3つの方法より下がるため、JavaScriptを使えない、もしくは理由があってどうしても使いたくないという場合を除いて使用する優先度は低くなります。

他の3つの方法に比べて最近使えるようになったHTMLタグです。JavaScriptと組み合わせて使いますが、より直感的で可読性も高い方法、かつ記述量が少ないためオススメです。

See the Pen
Modal (Dialog) by mimihokuro (@mimi_hokuro)
on CodePen.

dialogタグを使うことでpositionプロパティによる配置をすることなく自動で中央に配置され、記述量が減らせて可読性も上がります。

こちらもJavaScriptを使用しているのでJavaScriptが使えない環境では採用できません。記述も少しクセがありますが、モダンなWebデザインにおいては使い勝手の良い方法です。

いかがでしょうか？今モーダルを実装したい環境にどんな方法を取るのがいいのか、悩まれていたのなら参考になれば幸いです。