Light TALK Plus+ vol.15 「console.log」

こんちはLight Webのアルバイト君です。

2020年。今年は閏年の年ですね。
皆さんは、閏年の由来を知っていますか?

中国では暦からはみ出した日に、王様が門の中に閉じこもり、政務を執らないことから由来しています。
日本では「潤」を「うるう」と呼んでいたっことから「閏」という漢字も当て字で「うるう」と呼ぶようになりました。

「Light TALK Plus+」とは…

アルバイトが気になった今ホットなWEBニュースやティップスをお届けするコーナーです。

今回のテーマは「console.log」です!

console.logとは

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

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

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

文字列を出力させる

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

コード

console.log( “Hello world” );

出力結果

出力結果の画像1

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

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

コード

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

出力結果

出力結果の画像2

文字列と数列

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

コード

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

出力結果

出力結果の画像3

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

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

コード

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

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

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

出力結果

出力結果の画像4

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

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

コード

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

出力結果

出力結果の画像5

配列の中身を出力させる

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

コード

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

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

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

出力結果

出力結果の画像6

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

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


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

コード

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

出力結果

出力結果の画像7


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

コード

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

出力結果

出力結果の画像8


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

コード

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

出力結果

出力結果の画像9


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

コード

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

出力結果

出力結果の画像10

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

いかがだったでしょうか?
実用的ではないかもしれませんが、console.log()を学習するためのヒントになれば幸いです。

Light Webからのお知らせ

ライトウェブはプライバシーマークを取得しました!
今までも個人情報を取り扱う案件に携わって参りましたが、
より安心してお任せいただけるようになりました。
今後ともライトウェブをよろしくお願い致します!