ポップアップ表示機能の実装に便利なJavaScriptのライブラリについて現役エンジニアが解説【初心者向け】

ポップアップ表示機能の実装に便利なJavaScriptのライブラリについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• ポップアップとは
• ポップアップとモーダルウィンドウの違い
• ポップアップ表示機能の実装に便利なJavaScriptのライブラリの紹介
• 実際に使ってみよう
• まとめ

 

ポップアップとは

画面の前面に浮き上がるように表示される部品のことです。下記の画像のようなalratダイアログもポップアップとして扱われます。

ポップアップが浮き上がるように表示されることで、画面には記載のない詳細な情報やエラーのようなユーザーに見逃してほしくない情報を、ユーザーに提供しやすくなります。

[PR] フロントエンドで副業する学習方法を動画で公開中

ポップアップとモーダルウィンドウの違い

どちらも画面の前面に浮き上がるように表示されます。ポップアップは、浮き上がった画面以外の部品の操作ができます。モーダルウィンドウは、浮き上がった画面に応答するまでは元の画面を操作できなくします。

使い分けとしては、浮き上がった画面の操作が必須ならばモーダルウィンドウを使い、表示だけでもよければポップアップウィンドウを使います。

ポップアップ表示機能の実装に便利なJavaScriptのライブラリの紹介

ライブラリを探すときは、SearchLibsのサイトが便利です。ここで「popup」と入力するとポップアップのライブラリがたくさん表示されます。今回は、一番スターの多くついているsweetalertというライブラリを使う方法を紹介します。

実際に使ってみよう

まずはSweetAlertのライブラリを読み込みます。今回はCDNというネットワーク上から直接読み込む方法を使います。記述は下記のようになります。ダウンロードして読み込む場合は、srcの値をファイルを置いた場所に変更してください。

<script src= "https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script> 

これでSweetAlertのライブラリを使えるようになりました。

ライブラリの使い方はドキュメントを参照することで確認できます。
SweetAlertのドキュメントはこちら

ここでも、いくつかポップアップ表示をしてみます。一番シンプルな記述でポップアップ表示する記述は下記になります。

swal('このメッセージが表示されます');

ここからカスタマイズする場合は、{（波カッコ）で項目を追加していきます。下記のような感じです。追加する項目名や値はドキュメントで確認します。

swal({
  text: "メッセージです",
  icon: "success",
  button: "ボタンの名前",
  closeOnClickOutside: false  //false:モーダルにする
});

closeOnClickOutsideをfalseに指定しているのでモーダル表示となり、ポップアップ以外の場所を操作できなくなっています。

まとめ

ポップアップを扱うライブラリを紹介しました。ライブラリを探してドキュメントを読むことができれば、多くの処理が同じ流れで実装できます。いろいろなライブラリを活用してみてください。

筆者プロフィール

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。