JavaScriptでアラートを表示する方法！初心者向けに簡単に解説　byウェブカツ

WEBサイトを閲覧をしていると、エラーを表示したり何らかの確認を求めるポップアップが表示されたことがあるのではないだろうか。JavaScriptにはそのようなポップアップを表示させるための<span class="keiko_yellow"><strong>alert</strong></span>という機能が存在する。

そこで今回は、

<strong>・ポップアップを表示させたいけどやり方がわからない</strong>
<strong> ・ポップアップにどんなものが表示できるか知りたい</strong>

という人のために、

<strong>・alertの書き方</strong>
<strong> ・alertで表示できる値</strong>

を紹介する。

ポップアップを表示させるのは<strong>実はとても簡単</strong>。ぜひチャレンジしてほしい。
<h2>アラートとは？</h2>
アラートとは、<span class="keiko_yellow"><strong>ユーザーへ確認を求める目的</strong></span>であったり、<span class="keiko_yellow"><strong>何らかの注意喚起をする</strong></span>ためにポップアップを表示すること。WEBサイトを見ていると、以下のようなポップアップ画面を目にしたこともあるのではないだろうか。

<a href="https://webukatu.com/wordpress/wp-content/uploads/2020/06/javascript_alert4.png"><img class="alignnone size-full wp-image-3822" src="https://webukatu.com/wordpress/wp-content/uploads/2020/06/javascript_alert4.png" alt="" width="451" height="150" /></a>

WEBページを作る上ではよく使う機能なので、覚えておくことをおすすめする。
<h2>alertの書き方</h2>
JavaScriptでアラートを表示させたい時は、<strong>&lt;script&gt;</strong>タグの中に以下のように記述するだけで簡単に表示できる。

> alert( 表示させたい値 );

この値には文字列や数値など好きな値を設定できる。

試しに「アラート」という文字列を表示させてみよう。

```html:html
<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>JavaScript</title>
  </head>
  <body>
  <script>
   alert('アラート');
  </script>
  </body>
 </html>
```

<a href="https://webukatu.com/wordpress/wp-content/uploads/2020/06/javascript_alert1.png"><img class="alignnone size-full wp-image-3821" src="https://webukatu.com/wordpress/wp-content/uploads/2020/06/javascript_alert1.png" alt="" width="451" height="150" /></a>

このようにコードを書いたhtmlファイルをブラウザで開いてみると、ブラウザ自体には何も表示されないが以下のような<span class="keiko_yellow"><strong>ポップアップが表示</strong></span>される。
<h2>alert()に渡す値</h2>

> alert( 表示させたい値 );

に表示させたい値を設定することで、ポップアップに表示することができる。ただし、<span class="keiko_yellow"><strong>何を表示させるかで書き方が異なる。</strong></span>

次にそれぞれの書き方を紹介する。
<h3>文字列を出力</h3>
alertに「文字列」を表示する場合は、<span class="keiko_yellow"><strong>ダブルクォーテーションマーク「"」かシングルクォーテーションマーク「'」</strong></span>で文字列を囲む。

```javascript:javascript
alert('アラートのメッセージ');
```

<h3>数値を出力</h3>
alertに「数値」を表示したい場合は、以下のように半角で<span class="keiko_yellow"><strong>数値をそのまま指定</strong></span>する。

```javascript:javascript
alert( 123 );
```

ちなみに、数値を<strong>「"」</strong>か<strong>「'」</strong>で囲むと<span class="keiko_yellow"><strong>数値ではなく文字列として認識される</strong></span>ようになる。
<h3>文字列を連結させて出力する</h3>
alert()に「文字列」「数値」など組み合わせたい値をバラバラに渡し、連結したものを表示させることもできる。<span class="keiko_yellow"><strong>データを文字列として連結させたい場合は「+」で間を繋ぐ。</strong></span>

```javascript:javascript
alert( '今日は' + 10 + '日です。' );
```


<a href="https://webukatu.com/wordpress/wp-content/uploads/2020/06/javascript_alert2.png"><img class="alignnone size-full wp-image-3819" src="https://webukatu.com/wordpress/wp-content/uploads/2020/06/javascript_alert2.png" alt="" width="451" height="150" /></a>
<h3>計算式の結果を出力する</h3>
alert()に計算式を指定すると、<span class="keiko_yellow"><strong>計算結果</strong></span>がポップアップに表示される。

以下のように記述すると、

```javascript:javascript
alert( 100 + 10 );
```

<a href="https://webukatu.com/wordpress/wp-content/uploads/2020/06/javascript_alert3.png"><img class="alignnone size-full wp-image-3820" src="https://webukatu.com/wordpress/wp-content/uploads/2020/06/javascript_alert3.png" alt="" width="451" height="150" /></a>

と計算結果の「110」がポップアップに表示される。

足し算のほか、<strong>「-」</strong>で引き算や<strong>「*」</strong>で掛け算も計算できる。
<h3>変数を使ってメッセージを出力する</h3>
alert()に変数を指定して、<span class="keiko_yellow"><strong>変数の中身をポップアップに表示</strong></span>することもできる。

以下のように記述すると、

```javascript:javascript
var deleteMessage = '本当に削除しますか？';
alert(deleteMessage);
```

<a href="https://webukatu.com/wordpress/wp-content/uploads/2020/06/javascript_alert4.png"><img class="alignnone size-full wp-image-3822" src="https://webukatu.com/wordpress/wp-content/uploads/2020/06/javascript_alert4.png" alt="" width="451" height="150" /></a>

このように変数<strong>「deleteMessage」</strong>の中身がポップアップに表示される。
<h2>confirmで確認ダイアログを作成する</h2>
confirmを使うことで、ユーザーが「OK」か「キャンセル」を選べる<span class="keiko_yellow"><strong>確認ダイアログ</strong></span>が作成できる。

例えば以下のように記述すると、

```html:html
<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>JavaScript</title>
  </head>
  <body>
   <script>
    function deleteMessage() {
    confirm("本当に削除しますか？");
    }
   </script>
   <p><button onclick="deleteMessage()">削除</button></p>
  </body>
 </html>
```

<a href="https://webukatu.com/wordpress/wp-content/uploads/2020/06/javascript_alert5.png"><img class="alignnone size-full wp-image-3818" src="https://webukatu.com/wordpress/wp-content/uploads/2020/06/javascript_alert5.png" alt="" width="526" height="150" /></a>

このように削除ボタンを押した時に「本当に削除しますか？」というメッセージが入った確認ダイアログが表示される。

<strong>confirm()</strong>で<strong>表示するメッセージを設定</strong>し、<strong>onclick</strong>で<strong>クリックした時</strong>にconfirmで設定した内容が実行されるようになっている。

<h2>まとめ</h2>
以上、JavaScriptでアラートを表示する方法について、

<strong>・alertの具体的な書き方</strong>
<strong> ・alertで表示できる値と注意点</strong>
<strong> ・confirmで確認ダイアログを表示する方法</strong>

を紹介した。

アラートを使いたい場面に合う方法で使ってみてほしい。

---
#### かずきち
プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
[https://webukatu.com/](https://webukatu.com/?utm_source=blog&utm_medium=bl02&utm_campaign=blog_pr)