アラートとは
ポップアップで画面に表示されるメッセージの事です。
アラートサンプル画像
プログラムの書き方
let message ="こんにちは。今日もいい天気ですね。";
alert(message);
アラートは、どのような時に使用するか
主な使用方法は下記の①です。②は使用する時もありますが、あまり使いません。
①ユーザーにメッセージを伝えたいとき
②開発者がデバックをするとき
①ユーザーにメッセージを伝えたいとき
基本的にはユーザーに何か緊急で伝えたいメッセージなどがあるときに使用するイメージです。
例えば、「何か確認メッセージを表示してアラート表示のOKボタンを押したら、次の画面に進む」「何かエラーメッセージを知らせる」などがあるでしょう。
②開発者がデバックをするとき
デバックとは、プログラムの値を確認することです。
例えば、下記では「message」という変数に値が入っているかを確認しています。
let message ="こんにちは。今日もいい天気ですね。";
alert(message);
ですが、アラートでは値の情報を正確に確認できない場合があります。
アラートではデバックが正確でない理由
・型の判別ができない
・objectの値を確認できない
アラートでは確認対象の値が、文字列型なのか数値型なのかの判別をすることができません。
またobjectの場合は値の中身が確認できないです。objectをアラート表示した場合下記のようになります。
objectのアラート表示
let array = {name:"tanaka", age:"18", hobby:"baseball"};
alert(array);
アラート表示画像
このように表示され、objectの中身が何なのかを確認することは出来ません。
アラート表示はあくまでメッセージを表示させる機能です。
デバックしたい時は基本的にコンソールログを使用します。
コンソールログとは
デバックするときに使用するメソッドです。
開発者ツールで確認することができます。開発者ツールはブラウザで開くことが可能です。
開発者ツールの開き方はWindowsの場合は「F12」を押下、Macの場合は、「Command + Option + I」で開きます。
コンソールログ
開発者ツールを開き、Consoleタブを選択することでコンソールログの内容を確認することができます。
コンソールログを確認してみよう!
では実際に、いくつかの値をコンソールログでデバックしてみましょう!
下記のパターンを確認します。
・文字列のデバック
・数値のデバック
・objectのデバック
文字列の値の変数をデバック
let message = "こんにちは。今日もいい天気ですね。"
console.log(message);
数値の値の変数をデバック
let number = 1;
console.log(number);
デバック結果
数値の場合、文字色が青く表示されます。文字列の場合は文字色が黒く表示されます。
objectの変数をデバック
let array = {name:"tanaka", age:"18", hobby:"baseball"};
console.log(array);
デバック結果
まとめ
値の確認をするときに、型など値の詳細を知りたければコンソールログを使用しましょう。
コメント