JavaScriptのconsole.logとは？console.logの使い方を基本から解説します！

Javascript
プログラミング言語

公開日時: 2021-02-22 　更新日時: 2022-06-06

JavaScriptのconsole.logとは？console.logの使い方を基本から解説します！

この記事でわかること

システム エンジニア: JavaScriptのconsole.logについて詳しく教えてください。

プロジェクト マネージャー: 分かりました。JavaScriptのconsole.logについて使い方を基本から解説しましょう。

console.logとは？

console.logはJavaScriptのコマンドです。その名前の通りにコンソールにログを出力する機能があります。デバッグをする上で必須の機能と言えるでしょう。使い方はscriptタグ内に以下のように表示したい文字列をパラメータに記述します。

console.log('デバッグ情報');

1 2	console.log('デバッグ情報');

しかし、これをブラウザで表示しても、ログはどこにも見当たりません。どうすればログを見ることができるのでしょうか。

ブラウザでログを見る方法

console.logの出力をブラウザで見る方法をGoogle Chromeを例にとって説明します。まずconsole.logが記述されたJavaScriptが実行されている状態で、画面を右クリックします。するとメニューに「検証(I)」と言う項目があるので、それをクリックします。

DevToolsが起動しますが、上にならんでいるメニューのうちの「Console」をクリックしてください。これでログを見ることができます。今回のサンプルでは「デバッグ情報」と表示されています。

consoleで変数の値を表示する

実際にconsole.logを使う場合、変数の値を表示することが多いでしょう。以下のようにすれば変数の値を見られます。

var value = 100;
console.log('valueの値は'+value);

var value = 100;

console.log('valueの値は'+value);

以下のような文字列置換の書式を利用することもできます。

var value = 100;
var str = 'あいうえお';
console.log('数値は%d、文字列は%s',value,str);

var value = 100;

var str = 'あいうえお';

console.log('数値は%d、文字列は%s',value,str);

実行すると「数値は100、文字列はあいうえお」と表示されます。

配列やオブジェクトを表示する

console.logは配列も簡単に表示することができます。

var ary = ['りんご','みかん','いちご'];
console.log(ary);

var ary = ['りんご','みかん','いちご'];

console.log(ary);

実行すると「[“りんご”, “みかん”, “いちご”]」と表示されます。ループなどを使う必要が無いので簡単です。また以下のようにオブジェクトも表示できます。

var obj = {name: "りんご", type: "果物", color:"赤"};
console.log(obj);

var obj = {name: "りんご", type: "果物", color:"赤"};

console.log(obj);

結果は「{name: “りんご”, type: “果物”, color: “赤”}」となります。

文字の装飾が可能

console.log:の出力の文字を装飾して、色を変えたりすることができます。以下をご覧ください。

console.log("これは、%c赤い背景に白文字のイタリック体です。", "color: white; font-style: italic; background-color: red");

1 2	console.log("これは、%c赤い背景に白文字のイタリック体です。", "color: white; font-style: italic; background-color: red");

表示すると%c以降の背景色・文字の色・書体が変化します。CSSの書式が使えるので他にも様々な装飾ができます。重要なログ出力を目立たせるのに便利でしょう。

警告やエラー表示ができる

上のようにCSSで文字を赤くしたりするのではなく、警告やエラーと言うことを明確にしたい場合は以下のようにしましょう。

console.warn('警告です。');
console.error('エラーです。');

console.warn('警告です。');

console.error('エラーです。');

これにより警告やエラーが通常のconsole.logより目立つようになります。CSSで色を変えるより意図が明確になります。

ログを階層構造にする

ログ出力を階層構造にすることも可能です。

console.group('第一階層');
 console.log('第一階層のログ1');
  console.group('第二階層');
  console.log('第二階層のログ');
  console.groupEnd();
 console.log('第一階層のログ2');
 console.groupEnd();
console.log('終了');

console.group('第一階層');

console.log('第一階層のログ1');

console.group('第二階層');

console.log('第二階層のログ');

console.groupEnd();

console.log('第一階層のログ2');

console.groupEnd();

console.log('終了');

実行するとログが入れ子のような階層になります。ログをグループ分けしたい時に役に立つでしょう。

カウンターでカウント計測ができる

consoleオブジェクトにはカウンター機能もあります。以下を実行してみてください。

console.count('カウンター ');
console.count('カウンター ');
console.count('カウンター ');

console.count('カウンター ');

実行すると、

カウンター : 1
カウンター : 2
カウンター : 3

のように表示されます。カウント用の変数を用意する必要がないので助かります。なおconsole.countReset(‘カウンター ‘)でカウンターをリセットできます。

タイマーで処理時間を計測できる

consoleオブジェクトはタイマー機能で処理時間を計測することができます。

var sum = 0;
console.time('Timer');
for (var i = 0; i < 10000; i++) {
    sum += i;
}
console.timeEnd('Timer');

var sum = 0;

console.time('Timer');

for (var i = 0; i < 10000; i++) {

sum += i;

}

console.timeEnd('Timer');

このサンプルを実行すると「test.html:13 Timer: 5.23291015625 ms」とコンソールに表示されます。console.timerとconsole.timeEndの間の処理の時間を計ることができるということです。なお両方のメソッドで指定する文字列は同じにしてください。

HTMLタグをそのまま表示してみると？

以下のようにHTMLタグをgetElementByIdで取得して、それをそのままconsole.logで出力してみます。

<div id="test">テスト</div>
<script>
var test = document.getElementById('test');
 
console.log(test);
</script>

var test = document.getElementById('test');

console.log(test);

</script>

結果は「<div id=”test”>テスト</div>」とタグがそのまま表示されました。

console.dirでDOMツリー情報を表示できる

上のサンプルのconsole.logを以下のように変えてみましょう。

console.dir(test);

1 2	console.dir(test);

すると、

attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: id, id: id, length: 1}
autocapitalize: “”
autofocus: false
baseURI: “～.html”
childElementCount: 0
childNodes: NodeList [text] children: HTMLCollection [] ・・・

のように、沢山のプロパティ情報が表示されます。これはHTMLの検証に役立ちます。なおconsole.tableを使うとテーブル形式で表示されます。

スタックトレースを見られる

consoleオブジェクトにはスタックトレースを見る機能があります。

function func_a() {
    function func_b() {
        function func_c() {
            console.trace();
        }
        func_c();
    }
    func_b();
}

func_a();

function func_a() {

function func_b() {

function func_c() {

console.trace();

}

func_c();

}

func_b();

}

func_a();

このサンプルを実行すると、以下のように表示されます。

console.trace
func_c @ test.html:12
func_b @ test.html:14
func_a @ test.html:16
(anonymous) @ test.html:19

関数の呼び出し順がわかります。デバッグでとても役に立ちます。

システム エンジニア: JavaScriptのconsole.logについてよく分かりました。

プロジェクト マネージャー: JavaScriptのconsole.logをよく使用している人は多いでしょうがconsoleオブジェクトにはlogメソッド以外にもたくさんの機能があって、使わないのは非常にもったいないので、ぜひ活用してみて下さい。

console.logを使いこなすことが上達の近道

console.logについて解説しましたが、ご理解頂けましたでしょうか。JavaScriptに限らず、バグの発見に重要なことはログを見ることです。品質の高いプログラミングには、ログを適切に表示することが欠かせないのです。

初心者はバグが表示されるとまずソースを見て考えるということをしがちですが、熟練者はまずログを見ます。バグがでたらログを見る習慣を身に着けることが、優秀なエンジニアへの近道と言えるでしょう。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptのconsole.logとは？console.logの使い方を基本から解説します！

console.logとは？

ブラウザでログを見る方法

consoleで変数の値を表示する

配列やオブジェクトを表示する

文字の装飾が可能

警告やエラー表示ができる

ログを階層構造にする

カウンターでカウント計測ができる

タイマーで処理時間を計測できる

HTMLタグをそのまま表示してみると？

console.dirでDOMツリー情報を表示できる

スタックトレースを見られる

console.logを使いこなすことが上達の近道

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

JavaScriptのconsole.logとは？console.logの使い方を基本から解説します！

console.logとは？

ブラウザでログを見る方法

consoleで変数の値を表示する

配列やオブジェクトを表示する

文字の装飾が可能

警告やエラー表示ができる

ログを階層構造にする

カウンターでカウント計測ができる

タイマーで処理時間を計測できる

HTMLタグをそのまま表示してみると？

console.dirでDOMツリー情報を表示できる

スタックトレースを見られる

console.logを使いこなすことが上達の近道

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptで文字列を分割する方法は？splitの使い方を紹介

jQueryでのDatepickerの主な使い方6選｜その他のできること

jQueryのdataの使い方を解説！dataメソッドは便利な機能をマスターしよう！

jQueryを利用したsetTimeoutを紹介！setIntervalとは

JavaScriptのifについて初歩から解説！if文の基本的な使い方から応用について紹介