console.logとは

console.logはプログラミングしている時に動作確認など表示する必要があるメッセージを出力したりするために使用されます。

「console」は操作する場所、パソコンとコミュニケーションが取れる場所を示します。
「log」は英語の直訳で「記録」を意味し、表示するものの内容を書く場所になります。
つまり、console.logはlogの中身・結果を記録してconsoleに出力するということになります。

今回はchromeのデベロッパーツールのひとつであるconsoleを用いてconsole.logの特性について紹介をしたいと思います。

文字列を出力させる

console.logを用いて文字を表示させるにはダブルクォーテーションで囲むことによって文字列として出力させることができます。

コード

console.log( “Hello world” );

出力結果

数式の計算結果を出力させる

console.logは計算式を入力することで結果を出力させることができます。

コード

console.log( 6 + 3 );
console.log( 6 – 3 );
console.log( 6 * 3 );
console.log( 6 / 3 );

出力結果

文字列と数列

数字は数列扱いになりますが、ダブルクォーテーションで囲むと文字列扱いになります。

コード

console.log( 6 + 3 );
console.log( 6 – 3 );
console.log( “6 + 3” );
console.log( “6 – 3” );

出力結果

変数の中身を変更して出力させる

変数を作成し、console.log()を用いて出力させます。
変数の中身はコードの中で何回でも入れ替えることができます。

コード

let sample = ”sample”;
console.log( sample );

sample = ”サンプル”;
console.log( sample );

sample = ”さんぷる”;
console.log( sample );

出力結果

変数を組み合わせて出力させる

console.log()では変数を出力する文字列の中に組み込むことができます。

コード

let name =”田中”;
console.log( “私は” + name + ”です。” );

出力結果

配列の中身を出力させる

console.log()では配列の中身を出力させることができます。

コード

let a=[ “aaa” ];
console.log(a);

let b=[ “aaa” , ”bbb” ];
console.log(b);

let c=[ “aaa” , ”bbb” , ”ccc” ];
console.log(c);

出力結果

Console.log()にCSSを適用させる

console.log()ではCSSを記述することができます。
コードの記述は「console.log( “%cテキスト文” , “テキスト文に適用させたいCSS” );」と書きます。
また、%cをテキストとテキストの間に記述することで部分的にCSSを適用させることもできます。
CSSを適用させない場合には空タグを入力することで適用されなくなります。

%cを用いてconsole.log()にCSSを適用させてみましょう。

コード

console.log( “%cサンプル” , “color:#d36015;” ) ;

出力結果

続いて、%cに対して空タグを用いることでCSSを適用させないようにしてみます。

コード

console.log( “%cサンプル%cサンプル” , “color:#d36015” , “” ) ;

出力結果

%cを複数、記述することで別々のCSSを適用させることができます。

コード

console.log( “%cサンプル%cと%cサンプル%c” ,
“color:#d36015;font-weight:700;font-size:40px;” , “” , “color:#2660a1;font-weight:700;” , “” ) ;

出力結果

では、空タグを記述しなかった場合にはどのようになるのでしょうか？

コード

console.log( “%cサンプル%cと%cサンプル%c” ,
“color:#d36015;font-weight:700;font-size:40px;” , “color:#2660a1;font-weight:700;” ) ;

出力結果

4つの%cに対してCSSスタイルの設定が2つの場合、最初の2つの%cしか適用されていません。
残りの%cは文字列として扱われています。