SYNCERのロゴ
アイキャッチ画像

console.log() - ログを出力する

console.log()は、コンソールに、ログを出力します。

概要

名前
log
所属
console
IDL
void log(any... data);
仕様書
https://console.spec.whatwg.org/#log

説明

引数(data)には、ログとして出力したい値を指定します。引数は可変で、任意の数だけ指定でき、複数指定した場合はまとめて出力されます。

置換キーワードを利用できます。ある引数に置換キーワードを含めると、その次以降の引数がその部分の値として評価されます。置換後の値が見つからない場合、キーワードはそのまま文字列として評価されます。

キーワード説明
%s文字列(string)に変換する。
%d、%i整数(integer)に変換する。
%f浮動小数点数型(float)に変換する。
%oHTMLマークアップ形式に変換する。dirxml()を参照。
%oJSONツリー形式に変換する。dir()を参照。
%cこの置換キーワードより後に、値に指定したスタイルシートを適用する。空の値は終了扱いになる。

チュートリアル

引数の値が、開発者ツールのコンソールに出力されます。オブジェクトや要素の構造を確認できて便利です。引数は可変なので、まとめて出力することもできます。

console.log( array ) ;
console.log( object ) ;
console.log( element ) ;

console.log( array, object, element ) ;
console.log()の実行例 (Chrome)
console.log()の実行例 (Chrome)

複数の引数を利用して、キーワードを置換できます。ある引数に置換キーワードを含めると、その次以降の引数が変換後の値として評価されます。

// [%i]は、整数値に置換するためのキーワード

// 置換キーワードが1つの場合 (後に、1つの引数が必要)
console.log( "整数値は、 %i です。", 5.5 ) ;
// → 整数値は、 5 です。

// 置換キーワードが2つの場合 (後に、2つの引数が必要)
console.log( "整数値は、 %i と %i です。", 5.5, 8.5 ) ;
// → 整数値は、 5 と 8 です。

// 置換後の値となる引数がなければ置換キーワードは文字列扱いになる
console.log( "整数値は、 %i と %i です。", 5.5 ) ;
// → 整数値は、 5 と %i です。

スタイルシートの適用は、置換ルールを応用したものです。置換後の値に、適用したいスタイルシートを指定します。空の値は、終了扱いとなります。

// [%c]は、スタイルシートを適用するためのキーワード

console.log( "これは、%cメッセージです。", "color:red;" ) ;
// → "メッセージです。"の部分が赤文字になる。

console.log( "これは、%cメッセージ%cです。", "color:red;", "" ) ;
// → "メッセージ"の部分が赤文字になる。

console.log( "%cこれは%c、%cメッセージ%cです。", "color:red;", "", "color:blue;", "" ) ;
// → "これは"の部分が青文字、"メッセージ"の部分が赤文字になる。
コンソールでスタイルシートを適用した例
コンソールでスタイルシートを適用した例

デモ

console.log()のデモです。開発者ツールのコンソールで結果を確認して下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<body>
	<p><button id="run">実行</button></p>
<script>
document.getElementById( "run" ).onclick = function () {

/*** try it! ***/
console.log( document.getElementById( "run" ) ) ;

console.log( "整数置換の例1 → %i", 5.5 ) ;
console.log( "整数置換の例2 → %i | %i", 5.5, 8.5 ) ;
console.log( "整数置換の例3 → %i | %i | %i", 5.5, 8.5 ) ;

console.log( "%cSYNCERをよろしく", "color:#d36015" ) ;
console.log( "%cSYNCER%cをよろしく", "color:#d36015", "" ) ;
console.log( "%cSYNCER%cを%cよろしく%c", "color:#d36015;font-weight:700;font-size:40px;", "", "color:#2660a1;font-weight:700;", "" ) ;
/*** try it! ***/

}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
10+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月5日 (木)
コンテンツを公開しました。