Web Design

【JavaScriptの出力】アラート、コンソールの使い方の基礎

2021年7月10日

JavaScript入力、出力
  • JavaScriptの出力について知りたい
  • 「アラート、コンソールの使い方を知りたい」

この記事はそんな方へ向けて書いています。

 この記事でわかること

JavaScriptのアラート(alert)の使い方
JavaScriptのコンソール(console)の使い方

 本記事の信頼性

2021年6月からWebデザインの職業訓練校で学習中(6ヶ月コース)
使用テキスト:HTML&CSS、JavaScriptのきほんのきほん
ブログ歴:2019年1月にWordPressで当ブログを開設(月間最高62,000PV、52,000円)

本記事では、職業訓練校で学んだJavaScriptの出力についてまとめました。

この記事を読むことで、JavaScriptのアラート、コンソールの使い方がわかります。

こーいち
職業訓練校のJavaScript授業で、最初に習う内容です。

【JavaScriptの出力】アラート(alert)の使い方の基礎

JavaScript基礎知識、文法

alertでブラウザに注意メッセージを出力(ポップアップ)できます。

アラートの使い方<strong srcset=・JavaScript" width="885" height="273" />

ブラウザに注意メッセージを出力

JavaScriptを書く場合、<script>要素の中に書きます。

実際にHTMLに<script>タグに書いてみます。

index.html

<script>
 alert( 'アラートです' );
</script>

読み込み直すたびにシングルクォート( ' ' )で括られた「アラートです」出てきます(ダブルクォートでも可)。
alertの下の行に「alert( '文字列です' );」と追記すれば、読み込み直したときに「文字列です」が出てきます。

<script>タグを書く場所

<html>の外側でも、<body>タグの内側でも、どこに書いても出てきます。

ただ、以下の2つの理由からbody<タグ>の下に書くのが望ましいです。

わかりやすい
表示速度が速くなる

たとえば、「CSSは<head>タグ中に、javascriptは<body>タグの下に」とまとめたほうがわかりやすいです。

またjavascriptファイルを読み込んでいる間は、HTMLファイルを読み込みません。
<body>タグの下に書くことでページのレンダリングを行わせてからjavascriptファイルを読み込めるので、表示速度の改善が見込めます。
» 参考:scriptタグはなんで通常bodyに書くのか。

補足:JavaScriptは外部ファイルとして読み込む方法がある

<script>要素の中に書くだけではなく、外部ファイルとして読み込むこともできます。

外部ファイルとして読み込む場合は、まず拡張子「.js」のファイルを作り、その中に命令を書きます。
次にHTML内に、以下のように記述します。

index.html

<script src="JavaScriptファイルまでのパス"> </script>

メモ:JavaScriptのコメントアウト

頭に//を記述 → 以降の行すべてがコメントになる(閉じタグ不要) 
/* */で囲む → 複数行をコメントにできる(CSSのコメントアウトと同じ)

こーいち
プログラムの内容を忘れないように、都度、コメントしています。

アラートの活用事例

数値を出力
計算結果を出力
変数を出力
文字列を連結して出力

順番に解説します。

数値を出力

数値を出力するには、alert()の引数へポップアップ表示させたい数字を入れるだけです。

index.html

<script>
 alert(0123456789);
</script>

//アラートの出力結果:0123456789

文字列とは違い、数値にシングルクォートやダブルクォートは不要です。
» 参考:【JavaScriptの数値】概要から様々な計算例をまとめました

計算結果を出力

alert()の引数に計算式を入れると、計算結果を出力します。

index.html

<script>
 alert(1+1);
</script>
//アラートの出力結果:2

<script>
 alert(2+2*4);
</script>
//アラートの出力結果:10

<script>
 alert(3*4/9);
</script>
//アラートの出力結果:1.3333333333333333

変数を出力

alertには変数も使えます。

index.html

<script>
 const kazu = 100;
 alert(kazu);
</script>

//アラートの出力結果:100

変数kazuに設定した数値=100がアラートで出力されます。
» 参考:【JavaScriptの入力】変数の使い方、変数の3つの種類を解説

文字列を連結して出力

文字列を連結してアラート出力できます。

index.html

<script>
 alert('いつも'+'大変'+'お世話になっております。');
</script>

//アラートの出力結果:いつも大変お世話になっております。

なおバッククォートを使い、改行して出力することも可能です。

index.html

<script>
 alert(`あいうえお
かきくけこ
さしすせそ`);
</script>

//アラートの出力結果:あいうえお
かきくけこ
さしすせそ

このあたりは、JavaScriptの文字列の考え方に関連しています。
» 参考:【JavaScriptの文字列】概要から連結結合をまとめました

【JavaScriptの出力】コンソール(console)の使い方の基礎

JavaScriptのコンソール

開発者ツールにメッセージを出力

開発者ツール(デベロッパーツール)にメッセージを出力することがあります。

なぜなら、きちんと処理できているか確認する必要があるから。

たとえば、複雑な計算などは出力してみないとわかりません。
ゆえに、開発者ツールに出力して検証する必要があるのです。

具体的な出力場所は、ブラウザの画面で右クリックから「検証」→「Elementsの横のConsole」で確認できます。

検証のショートカットキー

Windows → F12
Mac → Option + Command + I

実際にHTMLに<script>タグに書いてみます。

index.html

<script>
 console.log( 'メッセージ' );
 console.log( 'メッセージ2' );
</script>

メッセージ部分が開発者ツールに出力されます。
ちなみに、'(シングルクォート)は、"(ダブルクォート)でも可。
» 参考:Web開発でよく使う、特に使えるChromeデベロッパーツールの機能

コンソールの活用事例

アラートと同様に、以下を出力してみます。

数値を出力
計算結果を出力
変数を出力
文字列を連結して出力

数値を出力

index.html

<script>
 console.log(0123456789);
</script>

//出力結果:123456789

出力結果に0が出ません。
いろいろ調べましたが、なぜかわかりません。

とりあえず、「0から始まる数字はないから出ない」という仮説です。

計算結果を出力

index.html

<script>
 console.log(1+1);
</script>
//出力結果:2

<script>
 console.log(2+2*4);
</script>
//出力結果:10

<script>
 console.log(3*4/9);
</script>
//出力結果:1.3333333333333333

アラートと同じ出力結果です。

変数を出力

index.html

<script>
 const kazu = 100;
 console.log(kazu);
</script>

//出力結果:100

文字列を連結して出力

index.html

<script>
 console.log('いつも'+'大変'+'お世話になっております。');
</script>

//出力結果:いつも大変お世話になっております。

アラートと同じ出力結果です。

バッククォートを使っても同じ結果です。

index.html

<script>
 console.log(`あいうえお
かきくけこ
さしすせそ`);
</script>

//出力結果:あいうえお
かきくけこ
さしすせそ

まとめ:JavaScriptの出力(アラート、コンソール)を理解しよう

JavaScriptの出力

console.logで0が出ない理由がわかりませんでした。
わからないまま先に進むのは気がひけますが、仕方ありません。

アラートにせよ、コンソールにせよ、配列を使ったり、もっと応用的な使い方があると思いますが、今回は初歩的な内容にとどまりました。
この先、学習が進むにつれて、追記できればと考えています。

JavaScript配列
【基礎】JavaScriptの配列の定義方法【今日の日付を出力】
こーいち
まずは基礎から理解していきましょう。

こーいちより

P.S. JavaScriptの出力をマスターしよう。

関連記事【JavaScript入門】初心者向けに基礎から文法をまとめました
関連記事【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.