JavaScript alert()メソッドの使い方を徹底解説！基本構文から実践例まで

JavaScriptのalert()メソッド（Window.alert()とも呼ばれます）は、ユーザーにアラートダイアログボックスを表示するためのメソッドです。省略可能なメッセージ引数を受け取り、OKボタン付きのメッセージをユーザーに表示します。alert()は、処理が成功したことをユーザーに知らせたり、エラーを表示したりする場面でよく使われます。

また、alert()は開発ツールとしても便利です。例えば、フォーム送信を処理する関数の中にalert()を配置することができます。一般的には、event.preventDefault()が呼び出された後にalert()を配置します。

おさらいすると、event.preventDefault()は、送信ボタンがクリックされた後のリダイレクトというデフォルトの動作をキャンセルするためのメソッドです。event.preventDefault()の詳細については、こちらのチュートリアルを参照してください。

JavaScriptのalert()とは？

JavaScriptのalert()はポップアップダイアログボックスを表示します。文字列形式のメッセージを引数として渡すことで、カスタムメッセージを表示できます。alert()について重要なポイントは、OKボタンのクリックによる確認を必要とするメッセージの表示のみに使うべきだという点です。ユーザーにアクションを求めるメッセージにはalert()を使用しないでください。

alert()ダイアログボックスには多くの用途があります。fetch()リクエストの文脈で成功やエラーを表示するために使えるほか、関数内にalert()を配置して、プログラムが意図した通りに動作しているかを確認するためにも活用できます。

alert()のJavaScript構文

alert()の構文は簡潔でわかりやすいです。文字列形式のメッセージを引数としてalert()を呼び出すだけです。

alert('message')

これにより、「message」という内容のダイアログボックスが表示されます。カスタムメッセージを文字列として渡すことで表示できます。

メッセージは省略可能です。メッセージを指定しない場合は、OKボタンのみの空のダイアログボックスが表示されます。

alert()

JavaScript alert()の実例

この記事の冒頭で、alert()を使うユーザー向けと開発者向けの2つのシナリオを紹介しました。ここでは、それぞれがどのように実装されるかを見ていきましょう。まずは開発者側から始めます。フォーム送信を処理する関数の中にalert()を配置します。

まず、ユーザー名とパスワードでログインする基本的なフォームから始めます。

<form>
<label>Name</label>
<input type="text" name="name">
<label>Password</label>
<input type="text" name="name">
<button type="submit">
Log In
</button>
</form>

表示結果は以下の通りです。

次に、フォームのonSubmitプロパティに渡す関数を作成します。

const handleOnSubmit = (event) => {
 event.preventDefault();
 alert("Logged In")
}

そして、この関数をフォームのonSubmitプロパティに渡します。

<form onSubmit="handleOnSubmit(event)">
<label>Name</label>
<input type="text" name="name">
<label>Password</label>
<input type="text" name="name">
<button type="submit">
Log In
</button>
</form>

これで、Loginボタンをクリックして、関数がフォームに正しく接続されているかを確認できます。ボタンをクリックすると、次のようなダイアログボックスが表示されます。

これで、定義した関数がフォームと正しく通信していることが確認できました。JavaScriptのalert()を使うと、プログラムの処理の流れを簡単にチェックできます。

次の例では、fetch()リクエストで成功メッセージとエラーメッセージを表示する方法を見ていきます。

fetch('/current-cart/', {
      credentials: 'include',
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      },
    })
    .then(resp => resp.json())
    .then(cart => {
      if(cart.error){
        alert(cart.error)
      }

この例では、ECアプリでのショッピングカートのfetchリクエストを扱っています。現在のショッピングカートが保存されているかどうかを確認するリクエストを送信しており、リクエストの最後には、エラーがあれば表示するalert()が配置されています。

アクティブなショッピングカートが存在しないため、次のエラーが表示されます。

この例は本番環境よりも開発段階で役立ちますが、同じ原理をフォームのバリデーションなどにも適用できます。

return fetch('/login', {
      credentials: 'include',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(creds)
    })
    .then(resp => resp.json())
    .then(response => {
      if (response.error) {
        alert(response.error)
      }

ここでは、alert()がログインフォームに関連するエラーメッセージを表示します。ユーザーがフォームに入力せずにログインしようとすると、次のエラーが表示されます。

これは、alert()を使ってバリデーションエラーを表示し、ユーザー体験を導く例です。

このように、alert()は開発側とクライアント側（ユーザーが見る側）の両方で活用できることがわかりました。最後に、学んだ内容をまとめましょう。

まとめ

JavaScriptのalert()は、幅広い用途を持つシンプルなメソッドです。文字列型のメッセージを省略可能な引数として受け取り、メッセージとOKボタンが付いたダイアログボックスを表示します。alert()はメッセージを表示するだけのものであり、ユーザーからの入力やアクションを受け付けることはできない点に注意しましょう。

今回の例では、alert()が開発時に関数とフォームの通信を確認するために使えること、fetchリクエストの開発側でエラーメッセージを表示できること、そしてフォームのバリデーションエラーをユーザーに伝えるために使えることを見てきました。

これで、alert()の一般的な使い方をしっかりと理解できたはずです。次のJavaScriptプロジェクトで、さまざまな機能のテスト手段としてぜひ活用してみてください。