実行環境 Node.js 15.2.1

公開日 2021年2月5日 JST

console.log

このページでは豊富な例を用いてJavaScript(js)のconsoleオブジェクトのlog()メソッド(console.log)の使い方を学ぶことができます。

JavaScriptのlog()メソッド(console.log)はconsoleオブジェクトのメソッドの1つです。
コードが実行されている環境のコンソールへ引数で指定した値を出力します。
引数には置換文字列といわれる特殊な文字列を使用して、出力結果を操作することもできます。

デバッグなどで変数の値を途中で確認したい場合など、簡易的な値の出力に使用されるケースが多いです。

TL;DR

基本

// 文字列(Stringオブジェクト)の出力
const string1 = 'js';
console.log(string1);
==> js




// 配列(Arrayオブジェクト)の出力
const array1 = [0, 1, 2];
console.log(array1);
==> [ 0, 1, 2 ]




// オブジェクトの出力
const object1 = { name: 'JavaScript', popularity: 1 };
console.log(object1);
==> { name: 'JavaScript', popularity: 1 }




// 複数の値の出力.1
console.log(0, 1, 2, 3, 4, 5);
==> 0 1 2 3 4 5




// 複数の値の出力.2
const string2 = 'js';
const array2 = [true, false];
const object2 = { name: 'Ayano', age: 29 };
console.log(string2, array2, object2);
==> js [ true, false ] { name: 'Ayano', age: 29 }

置換文字列の活用

// オブジェクト(JavaScriptオブジェクト全般)の置換文字列.1(%o,%O)
const substitutionString1 = 'A designer, %o';
const object1 = { name: 'Ayano', age: 29 };
console.log(substitutionString1, object1);
==> A designer, { name: 'Ayano', age: 29 }




// オブジェクトの置換文字列.2
const array1 = ['LeftHand', 'RightHand'];
console.log('%o', array1);
==> [ 'LeftHand', 'RightHand', [length]: 2 ]
console.log('%O', array1);
==> [ 'LeftHand', 'RightHand' ]




// オブジェクトの置換文字列.3
console.log('This is %o.', 'JavaScript');
==> This is 'JavaScript'.




// 整数の置換文字列(%i)
console.log('The substituted number is %i', 100);
==> The substituted number is 100
console.log('The substituted number is %i', 3.14);
==> The substituted number is 3




// 浮動小数点数の置換文字列(%f)
console.log('The substituted number is %f', 3.14);
==> The substituted number is 3.14




// 値の文字列を出力する置換文字列(%s)
console.log('%s Kishi', 'Ayano');
==> Ayano Kishi
console.log('She is %s.', { name: 'Ayano', age: 29 });
==> She is { name: 'Ayano', age: 29 }.




// 複数の置換文字列の指定
const substitutionString2 = '%s, %s, %f, %i, %o';
console.log(substitutionString2, 'js', 'javascript', 3.14, 3.14, {});
==> js, javascript, 3.14, 3, {}

解説

基本

consoleオブジェクトのlog()メソッドは、コード実行環境のコンソールへ引数で渡した値を出力します。

出力の形式は引数で与えた値によって変化し、文字列やJavaScriptオブジェクトなど様々な形態をとります。

引数は複数指定することもできます。
複数指定する場合は,(カンマ)区切りで引数を指定します。 この場合の出力値はスペースで区切られた形式になります。

// 数値
const number1 = 100;
console.log(number1);
==> 100




// オブジェクト
const object1 = { country: 'JP', code: 81 };
console.log(object1);
==> { country: 'JP', code: 81 }




// 複数値の出力
console.log(['js', 'JavaScript'], {}, 88);
==> [ 'js', 'JavaScript' ] {} 88

置換文字列の活用

置換文字列(substitution strings)という特殊な文字列を利用し、文字列のフォーマットをすることもできます。

第1引数に置換文字列が含まれた文字列を指定し、第2引数以降に置換文字列の登場順に置き換えたい値を指定します。 代表的な文字列を以下に列挙しますが、より詳しく仕様を理解したい場合はMDN Web Docsの 文字列置換の使用 を参照してください。

置換文字列説明
%s文字列
%i整数
%f浮動小数点数
%o | %OJavaScriptのオブジェクト全般
// オブジェクト(JavaScriptオブジェクト全般)の置換文字列
console.log('The object is %O.', ['js', 100]);
==> The object is [ 'js', 100 ].
console.log('The object is %O.', 'JavaScript');
==> The object is 'JavaScript'.




// 整数の置換文字列
console.log('The integer is %i.', 100);
==> The integer is 100.




// 浮動小数点数の置換文字列
console.log('The float is %f.', 1.4142);
==> The float is 1.4142.




// 値の文字列を出力する置換文字列
console.log('The string is %s.', 'JavaScript');
==> The string is JavaScript.




// 複数の置換文字列の指定
console.log('The args are %s, %i, %o.', 'JavaScript', 1, ['apple']);
==> The args are JavaScript, 1, [ 'apple', [length]: 1 ].

1次情報

console.log() - MDN web docs

コンソールにテキストを出力する - MDN web docs