【javascript】アラートとコンソールログの使い分け

※本サイトはアフィリエイトリンクを掲載しています。
javascript

アラートとは

ポップアップで画面に表示されるメッセージの事です。

アラートサンプル画像

プログラムの書き方

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);

デバック結果

 

まとめ

値の確認をするときに、型など値の詳細を知りたければコンソールログを使用しましょう。
 

独学が難しい場合

現場レベルで通用するエンジニアを目指していて、プログラミングスクールを検討している方はRUNTEQがオススメです。

コメント