【実践】JavaScriptを使ってポップアップメッセージを作成しよう

こんにちは、この歳になってもドラえもんが欲しいなと思う、みもざです。

さて、本題に入りたいと思います。

たまにサイトを閲覧していると、急にボタンを押さないと閉じないメッセージが表示されたりすることがありますよね。

この急に表示されるメッセージ、何のプログラミング言語で作られていると思いますか？

実はJavaScriptで作られています！

そこで今回は、JavaScriptを使っての

・ポップアップメッセージの作成方法

について説明します。

JavaScriptを使ってポップアップメッセージを作成したい方や、JavaScriptのアウトプットの参考にしたい方は、ぜひこの記事を読んでみてくださいね。

目次 [非表示]

1 ポップアップメッセージとは
2 使うメソッドを学んでおこう
3 警告を表示するポップアップメッセージを作ろう
4 確認するためのポップアップメッセージを作ろう

ポップアップメッセージとは

ポップアップメッセージのポップアップは、「突然表示される」「飛び出す」という意味を持っています。なので、ポップアップメッセージとは、突然表示されるメッセージということになります。

ポップアップメッセージとは、ユーザーに対してメッセージを伝えたり、特定の操作を要求したりする役割があります。

以下の画像のようなものがポップアップメッセージです。

よくサイトなどを訪問したときや、拝見している途中、そのサイトを離れるときなどに、このようなポップアップメッセージを見る機会があるかと思います。

使うメソッドを学んでおこう

ポップアップメッセージを作成するのに使える関数は、３種類あります。一つずつ簡単に紹介していきます。

alertメソッド

alertメソッドとは、ユーザーに対して注意喚起をしたり、何か確認することを要求するためのポップアップを表示する役割があり、OKボタンを持っています。

alertメソッドの使い方としては以下のようになります。

window.alert(表示させたいメッセージまたは数値を入力);
alert(表示させたいメッセージまたは数値を入力); // windowを省略してもOK

1 2	window.alert(表示させたいメッセージまたは数値を入力); alert(表示させたいメッセージまたは数値を入力); // windowを省略してもOK

alertのあとの()には、表示させたい文字列または、数値を入力します。文字列を扱うときは、クォーテーションを忘れずにしましょう。

confirmメソッド

confirmメソッドとは、ユーザに確認を要求するためのポップアップを表示する役割があり、OKボタンとキャンセルボタンを持っています。

confirmメソッドの使い方としては以下のようになります。

window.confirm(表示させたいメッセージまたは数値を入力);
confirm(表示させたいメッセージまたは数値を入力);

1 2	window.confirm(表示させたいメッセージまたは数値を入力); confirm(表示させたいメッセージまたは数値を入力);

confirmのあとの()には、表示させたい文字列または、数値を入力します。文字列を扱うときは、クォーテーションを忘れずにしましょう。

prompt関数

promptメソッドとは、ユーザーに対して入力を受け付けるためのポップアップを表示する役割があります。

promptメソッドの使い方としては以下のようになります。

result = window.prompt(text, value);

1	result = window.prompt(text, value);

resultには、ユーザーによって入力されたテキストを含む文字列、またはnull値が入ります。

textには、ユーザーに表示するテキストの文字列が入ります。

valueには、テキスト入力フィールド内に表示されるデフォルト値を含む文字列が入ります。

警告を表示するポップアップメッセージを作ろう

文字列を表示させてみよう

// 文字列
alert('Hello World');

1 2	// 文字列 alert('Hello World');

実行結果は以下のようになります。

このページの内容の下に、alertの()に入れた文字列が表示されています。

数値を表示させてみよう

// 数値
alert(123);

1 2	// 数値 alert(123);

実行結果は以下のようになります。

このページの内容の下に、alertの()に入れた数値が表示されています。

変数を使って表示させてみよう

// 変数を使って表示させる
var sample = 'ここにあるメッセージを読んだら閉じてください';
alert(sample);

// 変数を使って表示させる

var sample = 'ここにあるメッセージを読んだら閉じてください';

alert(sample);

実行結果は以下のようになります。

変数を使って表示させる場合には、alertの()に変数名を入力します。

確認するためのポップアップメッセージを作ろう

文字列を表示させてみよう

// 文字列
confirm('Hello World');

1 2	// 文字列 confirm('Hello World');

実行結果は以下のようになります。

このページの内容の下に、confirmの()に入れた文字列が表示されています。

数値を表示させてみよう

// 数値
confirm(123);

1 2	// 数値 confirm(123);

実行結果は以下のようになります。

このページの内容の下に、confirmの()に入れた数値が表示されています。

変数を表示させてみよう

// 変数を使って表示させてみる
var name = 'Lisa';
confirm( name + 'さんでしょうか？おかえりなさい');

// 変数を使って表示させてみる

var name = 'Lisa';

confirm( name + 'さんでしょうか？おかえりなさい');

実行結果は以下のようになります。

入力できるポップアップメッセージを作ろう

基本の形を知ろう

var result = prompt("ダイアログに何かメッセージを入力してみてください", "今は初期値が入っています");
console.log(result);

1 2	var result = prompt("ダイアログに何かメッセージを入力してみてください", "今は初期値が入っています"); console.log(result);

実行結果は以下のようになります。

valueの所に「今は初期値が入っています」と入力したので、入力フォームにはその内容が初期値として表示されています。

ブラウザに入力内容を表示させてみよう

HTMLの内容：

<!DOCTYPE html>
　<html>
　　<head>
　　　<metacharset="UTF-8">
　　　<title>JavaScript Error</title>
　　　<scripttype="text/javascript"src="sample.js"></script>
　　</head>
　<body>
　</body>
</html>

<!DOCTYPE html>

　<html>

　　<head>

　　　<metacharset="UTF-8">

　　　<title>JavaScript Error</title>

　　　<scripttype="text/javascript"src="sample.js"></script>

　　</head>

　<body>

　</body>

</html>

JavaScriptの内容：

var value=prompt("お名前を入力してください。");
document.write("おかえりなさい" + value + "さん。");

1 2	var value=prompt("お名前を入力してください。"); document.write("おかえりなさい" + value + "さん。");

実行結果は以下のようになります。

まとめ

いかがでしたか？今回は、

・ポップアップメッセージに使う３種類のメソッドの紹介

・実際使用してどう実行されるか

について説明しました。

サイトを閲覧しているときに表示されるポップアップメッセージがどのように作成されているか仕組みが理解できたかと思います。

ホームページなどのサイトを作るときには、ポップアップメッセージも取り入れて、ユーザーに確認の要求や注意喚起をしてみてください。

この記事が、ポップアップメッセージを知りたい方、作りたい方の参考になれば幸いです。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。