JavaScriptで簡単ブラウザ操作！alert・confirm・promptの使い方と応用例ガイド

1. alertとは？画面にメッセージを表示する基本操作

1. alertとは？画面にメッセージを表示する基本操作

JavaScriptのalertは、画面にポップアップでメッセージを表示するための関数です。ユーザーに通知したい情報や注意を伝えるときに便利です。

alert("こんにちは！JavaScriptを始めましょう。");

上のコードを実行すると、ブラウザの画面に「こんにちは！JavaScriptを始めましょう。」と表示されます。ユーザーは「OK」ボタンを押すまで他の操作ができません。

2. confirmとは？ユーザーに選択を求める方法

2. confirmとは？ユーザーに選択を求める方法

confirmはユーザーに「OK」か「キャンセル」を選ばせるダイアログを表示する関数です。戻り値として、true（OK）かfalse（キャンセル）が返ってきます。

const result = confirm("このページを閉じますか？");
if (result) {
  alert("ページを閉じます。");
} else {
  alert("閉じる操作をキャンセルしました。");
}

このようにconfirmを使うと、ユーザーの意思を確認して処理を分けることができます。

3. promptとは？ユーザーに文字や数字を入力してもらう方法

3. promptとは？ユーザーに文字や数字を入力してもらう方法

promptはユーザーに入力を求めるダイアログを表示する関数です。入力された値は文字列として取得できます。

const name = prompt("あなたの名前を教えてください。");
alert("こんにちは、" + name + "さん！");

ユーザーが名前を入力すると、次にalertで挨拶が表示されます。入力がない場合はnullが返されます。

4. alert・confirm・promptを組み合わせた簡単な応用例

4. alert・confirm・promptを組み合わせた簡単な応用例

これらの関数を組み合わせることで、簡単なインタラクションを作ることができます。例えば、ユーザーに質問して答えに応じたメッセージを表示することも可能です。

const likeJS = confirm("JavaScriptは好きですか？");
if (likeJS) {
  const reason = prompt("どうして好きですか？");
  alert("理由：" + reason + "ですね。わかりました！");
} else {
  alert("JavaScriptは練習すれば楽しくなります！");
}

ユーザーの選択に応じて別の入力を求めたり、メッセージを変えたりできるので、対話型のWebページが簡単に作れます。

5. alert・confirm・promptを使うときの注意点

5. alert・confirm・promptを使うときの注意点

これらの関数は便利ですが、注意点もあります。

• ポップアップが表示されると他の操作がブロックされるため、多用するとユーザー体験が悪くなる。
• デザインをカスタマイズできないため、Webサイト全体の見た目に合わせることはできない。
• 入力値は文字列として扱われるので、数値計算などに使う場合はNumber()で変換が必要。

const age = prompt("年齢を入力してください。");
const ageNumber = Number(age);
alert("来年は" + (ageNumber + 1) + "歳になります。");

6. 実際のWebページでの応用例：ユーザーに簡単な質問

6. 実際のWebページでの応用例：ユーザーに簡単な質問

例えば、ボタンをクリックしたときにalertやpromptを表示することで、簡単なアンケートを作ることができます。

<button onclick="greetUser()">挨拶する</button>

<script>
function greetUser() {
  const name = prompt("あなたの名前は？");
  if (name) {
    alert(name + "さん、ようこそ！");
  } else {
    alert("名前が入力されませんでした。");
  }
}
</script>

このように、ユーザーに入力を求めて反応を返すことで、動きのあるWebページが簡単に作れます。

7. まとめの前に：初心者でも使えるブラウザ操作のコツ

7. まとめの前に：初心者でも使えるブラウザ操作のコツ

JavaScriptのalert、confirm、promptは、ブラウザで簡単にユーザーとやり取りするための基本ツールです。初心者でも、ちょっとした通知や質問、入力を受け取る場面で活用できます。

ポイントは次の通りです：

• alertで情報を通知する
• confirmでユーザーの意思を確認する
• promptで文字や数字を入力してもらう
• 組み合わせて簡単な対話型Webページを作る
• 使いすぎに注意して、ユーザー体験を意識する

これらをマスターすれば、Webページで簡単なインタラクションを作る力がつきます。

まとめ

まとめ

今回の記事では、JavaScriptの基本的なブラウザ操作であるalert、confirm、promptの使い方と応用例について詳しく解説しました。alertはユーザーにメッセージを通知するための最もシンプルな方法であり、単純な情報伝達や注意喚起に便利です。confirmはユーザーに「はい」か「いいえ」の選択を求める際に活用でき、条件分岐や処理の分岐に最適です。promptはユーザーに文字列や数値を入力させるためのダイアログを表示し、入力内容を基に処理を行うことができます。これらの関数を組み合わせることで、簡単なインタラクションを実現でき、ユーザーが入力した内容に応じて異なる結果を表示する動的なWebページを作成できます。さらに、入力値は文字列として扱われるため、数値計算に使用する場合はNumber()関数で適切に変換することが重要です。また、ポップアップが表示されると他の操作がブロックされるため、乱用は避け、ユーザー体験を損なわないよう注意することがポイントです。ボタンやイベントと組み合わせることで、簡単なアンケートや挨拶機能などを実装でき、初心者でも実践的なWebページ制作に活かせます。これらの操作はシンプルながら、Webページのユーザーとの対話を豊かにする基本スキルとして非常に有用です。

 // ユーザーに対話型で挨拶するサンプル const likesJS = confirm("JavaScriptは好きですか？"); if (likesJS) { const reason = prompt("どうして好きですか？"); alert("理由：" + reason + "ですね。楽しい学習になります！"); } else { alert("JavaScriptは練習すると面白くなります！"); }