【JavaScript】プログラムの実行途中の値を確認する方法(ログ)

実行途中の値を確認するには?

console.log()というメソッドを使うことでブラウザーの開発者ツール内にあるコンソールパネルにログを残すことができます。これを使用することでプログラムの実行途中の値がどのように変わるのかなどを確認することができます。

またalert()メソッドでも似たことができますが、alert()は表示する度に実行を中断しその都度ダイアログを閉じなければならないため、確認回数が多い場合などはconsole.log()を使った方がいいかと思います。

コンソールパネルの表示方法

コンソールパネルの表示方法はブラウザーごとに若干違うので、各種ブラウザーの表示方法を紹介します。

Google Chromeの場合

1.ウィンドウ右上のメニューバー(三つの点アイコン)から[その他のツール]→[デベロッパー ツール]を選択
※F12キーでも可能
2.[Console]タブを選択

Microsoft Edgeの場合

1.ウィンドウ右上のメニューバー(三つの点アイコン)から[その他のツール]→[開発者ツール]を選択
※F12キーでも可能
2.[コンソール]タブを選択

Safariの場合

1.画面左上のメニューバーから[Safari]→[環境設定]を選択
2.[詳細]タブを選択
3.[メニューバーに”開発”メニューを表示]にチェックを入れる
4.メニューバーから[開発]→[JavaScriptコンソールを表示]を選択

Mozilla Firefoxの場合

1.画面右上のメニューバー(三本ラインのアイコン)から[ウェブ開発]→[ウェブコンソール]を選択
※F12キーでも可能

console.log()の書き方

メソッド意味戻り値
console.log(値1,値2,…)コンソールにログを残すなし

console.log()の基本的な使い方を紹介します。
下のソースコードは変数xをログに表示するプログラムです。
xに5を入れて結果を見てみましょう。

実行結果

5

カンマで区切るとそれぞれ表示します。

実行結果

5 3 7

計算式を入れると計算結果を表示します。

実行結果

8
4

文字列を表示する場合は””でくくります。また変数と合わせて使う場合は+で繋ぎます。

実行結果

xの値は5です

真偽の判断もできます。

実行結果

true
false

1つ目はxの値が5であるときに”true”、それ以外の数の時は”false”を表示します。
2つ目はxの値が10を超えているときに”true”、10以下の場合は”false”を表示します。
xの値は5なので1つ目は”true”、2つ目は”false”が表示されました。

サンプル

下のソースコードは変数numに2を入れ、5回numの倍数をその都度ログで表示するプログラムです。

実行結果

4
8
16
32
64

タイトルとURLをコピーしました