Search

検索したいワードを入力してください

2019年02月28日

JavaScriptのalertを使ってメッセージを出す方法

JavaScriptでのalertメッセージを書き方を紹介します。登録サイト等では、登録の確認時などでよく使用されるものなので、まずは基本的な記述方法を説明していきます。また、引数を受け取ってalertとして出力することも多々あるので、その説明もしていきます。

alertとは?

初めに「alert」は何のことであるかを説明します。「alert」はホームページ上で会員登録を行った際に登録の確認や入力フォームに不備を示してくれるポップアップメッセージのことです

パソコンのWebブラウザだけでなく、スマートフォンのWebアプリからでもアラートメッセージを出すことが可能です。

JavaScriptのアラートの書き方

JavaScriptでアラートメッセージを出す方法は至って簡単です。alertと記述した後に括弧を書き、さらにその中に表示したい文字列や数字を記入するだけです

このとき、文字をそのままアラートメッセージとして表示するには、表示するメッセージをシングルクォーテーション「'」もしくはダブルクォーテーション「"」で囲む必要があります。JavaScriptで文字列を扱う際は、この記述方法が基本となります。

このページではシングルクォーテーションに統一します。まずはHTML上で処理を行った際に実行されるコードを紹介します。以下のコードをscriptタグ内に記述します。

function alertMessage() {
alert('アラートメッセージ本文');
}


ここでは、function内にalert文を記述しましたが、以降の説明ではalert文のみに省略しています。また、HTML側ではボタンを押した際にアラートメッセージを出力することを想定し、以下のコードをbodyタグ内に記述します。

<button onclick='alertMessage()'>アラートメッセージ</button>
これで、HTMLに「アラートメッセージ」と書かれたボタンが表れます。これを押下すると、本文に「アラートメッセージ本文」が記載されたアラートメッセージが表示されます。

デフォルトの設定ではメッセージ本文とともに「OKボタン」も表示されます。今回はalertの使い方のみを紹介するので、詳しくは説明しませんが、「OKボタン」を押下した後の処理なども設定することができます。

アラートで文字列や数値を出力する

文字列の出力にはシングルクォーテーションかダブルクォーテーションで出力したい文字列を囲む必要がありますが、しっかりと囲んでいれば、日本語に限らず、英語も出力することができます。

alert('こんにちは世界');
alert('HelloWorld');

上のコードを記述することで、それぞれ「こんにちは世界」、「HelloWorld」とアラートメッセージで出すことができます。もちろん英語と日本語を一緒に出力することも可能です。

alert('田中さん、HelloWorld');

→出力: 「田中さん、HelloWorld」

文字列に限らず、数字をアラートメッセージに出力することも可能です。数字はシングルクォーテーションやダブルクォーテーションで囲まなくても表示することができます。したがって、以下の2つのコードはどちらも「100」とアラートメッセージで表示されます。

alert('100');
alert(100);

ここで、1つ目のコードは文字列としての「100」、2つ目のコードは数字としての
「100」が出力されることがポイントです。また、「000000」など、一番左の数字が0である数字を表示したい場合はシングルクォーテーションやダブルクォーテーションで囲み文字列で出力する必要があります。

変数を使って文字列を出力する

文字列を値に持つ変数をalertの括弧内に記述することで、その変数の文字列をアラートメッセージとして出力することができます

この時、alertの括弧内にシングルクォーテーションやダブルクォーテーションを付けてはいけません。誤って付けてしまうと、アラートメッセージに変数名が表示されるので、注意が必要です。

早速やってみましょう。

JavaScriptで変数を定義するには、「var 変数名 = 変数の中身」と記述します。JavaScriptのバージョンによってはvarではなく、letを使用する場合があるので、自分の開発環境を確認して、どちらを使用するべきかを決めてから、書くようにするとミスが少なくなります

サンプルコード

変数を用いた際の正しい記述
var greeting = 'こんにちは世界';
alert(greeting);

→出力: 「こんにちは世界」

誤った記述(変数greetingをシングルクォーテーションで囲んだ場合)
var greeting = 'こんにちは世界';
alert('greeting');

→出力: 「greeting」

JavaScriptのalertの他の活用方法

計算結果を出力する

数字の出力をする場合は括弧内に計算式を記述することで、その計算結果をアラートメッセージ上に出力することができます

もちろん文字列と同じく、JavaScript内で定義した変数を出力することも可能です。さらにJavaScript内で計算した結果をアラートメッセージで出力することもできます。

JavaScriptで一般的に使用する算術記号は、加算「+」、減算「-」、乗算「*」、除算「/」、余り「%」です。

alert内で計算した結果を出力
alert(10 + 10);

→出力: 「20」(10+10)

alert(10 * 10);

→出力: 「100」(10×10)

alert(10 % 3);

→出力: 「1」(10÷3 = 3 余り1)

JavaScript内で定義した変数とalert内で数字を用いて計算した結果を出力
var integerNum = 10;
alert(integerNum / 2);

→出力: 「5」(10÷2)

JavaScript内で定義した変数をalert内で計算処理した結果を出力
var integerNum1 = 1;
var integerNum2 = 2;
alert(integerNum1 + integerNum2);

→出力: 「3」(1+2)

連結した文字列の出力

出力する文字列はalertの括弧内で連結することができます。また、JavaScript内で定義した文字列の変数やJavaScriptが受け取った引数を他の文字列や数字と連結してアラートメッセージ上に出力することも可能です。

連結する方法は連結したい文字列の間に「+」を挟むだけです。

文字列をalert内で連結
alert('田中さん、' + 'こんにちは');

→出力: 「田中さん、こんにちは」

変数と文字列の連結
var name = '田中';
alert(name + 'さん、こんにちは');

→出力: 「田中さん、こんにちは」

変数同士の連結
var name = '田中';
var greet = 'こんにちは、';
alert(greet + name + 'さん');

→出力: 「こんにちは、田中さん」

以上のことを応用して、例えば、登録を行うWebページ内で、入力したメールアドレスを引数としてJavaScriptを動作させ、以下のようなalert文を記述すれば、メールアドレスの確認に使うこともできます。

引数: mailAddress = xxxxx@xxxxx.co.jp
alert('登録するメールアドレスは' + mailAddress + 'でよろしいですか?);

→出力: 「登録するメールアドレスはxxxxx@xxxxx.co.jpでよろしいですか?」

また、以上の記述方法と同じように、数字をシングルクォーテーションやダブルクォーテーションで囲んで、alert内でプラス記号を用いて結合した場合は、文字列の結合とみなされるため、注意が必要です。

alert('10' + '10');

→出力: 1010

この例の場合、文字列の「10」と文字列の「10」が結合されるため、20とは出力されません。

alertで配列を出力する

変数が出力できることと同様に、配列から要素を一つ一つ取り出してアラートメッセージで出力することができます。配列とは一つの関数に複数の情報を保持させたもののことを指します。以下に、fruitsという配列を示します。

var fruits = ['りんご', 'ぶどう', 'もも', 'みかん'];

これを一つ一つ取り出し、アラートメッセージに出力します。配列は順に0番目、1番目、2番目……と0から番号が付けられています。配列を抜き出すときはこの番号を基本的に使用します。

今回の例では、0番目が「りんご」、1番目が「ぶどう」、2番目が「もも」、3番目が「みかん」となります。これをJavaScriptのコードでは、「変数名[何番目]」と記述します。このことから、アラートメッセージで出力する場合は以下のように書きます。

alert(fruits[0]);
alert(fruits[1]);
alert(fruits[2]);
alert(fruits[3]);

もちろん、すべて出力する必要がなければ、上のコードのいずれかのみでも、アラートメッセージを出力することは可能です。また、順番も記述した順番にアラートメッセージが出力されます。

ただこの記述方法では、配列の中身の個数が増えると、記述行数も多くなります。配列の中身が100個あれば、100行記述する必要があります。

こういった同じ処理を行う場合は繰り返し文という手法を用いるのが一般的です。今回は拡張for文を例に用います。拡張for文の書き方は、以下のようになります。

for (var 変数 in 配列) {
処理;
}


上のfruits配列をfruitという変数に一つ一つ抜き出してアラートメッセージに出力するには次のように書きます。

for (var fruit in fruits) {
alert(fruit);
}


繰り返しfor文は配列に入っているものを順番に抜き出してくれる繰り返し分になります。

配列に限らず、JavaScriptではlistやmapなどのオブジェクトというものが存在し、これらも同じ処理で抜き出すことができ、中に格納したものをアラートメッセージで出力することが可能です。

alertを使ってさらに動的なWebページを作っていきましょう!

アラートメッセージの簡単な記述方法を説明しました。最後に基本的なコードを示します。

alert('アラートメッセージ本文');

JavaScriptでは文字列を扱う際にシングルクォーテーションやダブルクォーテーションで囲うことに注意してください。今回説明した以外にもアラートメッセージに配置するボタンを変えたり、OKボタンを押下した後の処理を付けたりすることができます。

【PR】多くの人がプログラミングを諦めてしまう理由をご存知ですか?



近年プログラミングを勉強する人が増えています。

プログラミング学習者の多くは独学から取り組もうとしますが、だいたい80%ほどは3ヶ月も続かずに諦めてしまいます。早い人は1日目で。

多くの人がプログラミングを独学しようとして諦める理由は、次の3つ。
●モチベーションが維持できない
●エラーの原因・解決方法が分からない
●どう学習すればよいか分からない

TechBoostというプログラミングスクールでは、みんなと一緒にプログラミングをするのでモチベーションの維持ができ、分からないことがあればマンツーマンで教えてくれ、徹底的に研究された初心者向けの教材が揃っています。

TechBoostを卒業後、実際にエンジニアとして転職した方もいるほど。

本気でプログラミングを学びたい方は、一度無料のカウンセリングでご相談ください。プログラミングを嫌いになる前に。

tech boostについて

オーダーメイド型の学習コンテンツを提供する「tech boost」 は、エンジニアのキャリア支援に特化したサービスを複数展開している株式会社Branding Engineerが運営しているプログラミングスクールです。最短3ヶ月間で、未経験から『プログラミングの基礎』、『実際に業務で必要となるスキル』、『今のトレンドとなっている知識』まで学べ、ご希望の方にはプロのキャリアアドバイザーによる就業支援を行うことができます。

tech boost卒業生インタビュー

tech boostの卒業生の声を聞きました。あなたがプログラミングを学びたい理由を、一度考えてみてください。
営業→Javaエンジニア→Rubyエンジニアと転向し、第一志望のFinTech企業で働く山下さん
元営業、ビジネスのわかるエンジニアを目指す菅原さん
サンフランシスコに交換留学し、シリコンバレーのVCでインターン中の梅本さん
予備校の営業から半年でエンジニア転職を果たした小田島さん

tech boostの口コミ



Related