In 'n' Out

実行結果を確認する

JavaScriptは、処理や判断を行う言語です。
そのため、正しく動いているかどうかを確認する手段が必要になります。
JavaScriptには、実行結果を確認するための命令が用意されています。
ここでは、最も基本的な2つを紹介します。

なお、このページから、構文やコード例・動作例を扱いますが、サイトの構成上、すべての例で動作を確認できるとは限りません。
そのため、処理の結果をその場で確認できるよう、一部の出力例にボタンを用意しています。
これらのボタンは「動作確認用」であり、JavaScriptの書き方そのものを説明する目的ではありません。
動作確認用のボタンには「※このボタンは動作確認用です」と表示します。

alertで結果を表示する

alertは、ブラウザにポップアップを表示する命令です。

構文

alert('表示する内容');

表示する内容は任意で記述できます。
その内容がポップアップ内に表示されます。

コード例

<script src="alert.js""></script>

//alert.js
alert('ポップアップが開きました。\nOKを押すとポップアップが閉じます。');

動作例

このコードが実行されると、ブラウザにメッセージが表示されます。
ポップアップを閉じるまで、他の操作はできません。
alertは、JavaScriptが実行されたことを目で見てすぐ確認できます。
そのため、最初の動作確認としてよく使われます。

console.logで結果を確認する

console.logは、コンソールに文字を表示する命令です。

構文

console.log('表示する内容');

alertと同様、表示する内容は任意で記述できます。

コード例

<script src="consoleLog.js"> </script>

//consoleLog.js
console.log('コンソールログは開発者ツールなどで確認が必要です');

動作例

このコードを実行しても、画面には何も表示されません。
代わりに、ブラウザの開発者ツールに文字が表示されます。
console.logは、画面の表示に影響を与えずに、処理の途中結果を確認できます。
JavaScriptでは、こちらの方がよく使われます。

console.logの確認方法

console.logの結果は、ブラウザの開発者ツールで確認します。
ブラウザを表示中にF12キーを押すと開発者ツールが開きますが、環境によっては別の操作が必要な場合があります。

Consoleと表示された画面を見ると、出力された文字が表示されます。

右にある文字は、該当するスクリプトの名前と処理が書かれた行番号で、クリックするとスクリプトの詳細を確認できます。
なお、エラーが出ると赤い表示でエラーメッセージと、スクリプトのどこでエラーが起こっているか表示されます。

alertとconsole.logの違い

alertとconsole.logは、どちらもJavaScriptの実行結果を確認するための命令です。
違いは、結果が表示される場所と、処理が止まるかどうかです。
alertは画面に表示され、処理が一時的に止まります。
console.logは画面には表示されず、処理も止まりません。
目的に応じて使い分けることで、JavaScriptの動作を確認しやすくなります。