JavaScript console.log の使い方 | プログラミングアカデミーゼロプラスワン

前回の記事で、文字を表示させるために alert と console.log について使っていました。

プログラムを開発していく中で、プログラム中の変数の値を確認することはすごくたくさんあるので、その際に alert や console.log を使うわけですが、alert はあまり使われません。1つの内容を確認するために OK ボタンをマウスで押さなければならないので、実行確認修正、また実行確認修正、と繰り返し開発しているときに、OKボタンを毎度押すのが面倒になるからです。

対して console.log は、非常によく使います。実行したら、ざーっとたくさんの情報を連続して出力できるからです。

なので console.log の使い方をより学んでおきます。

動作確認環境を整える

前回同様にファイルを用意しましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="index.js"></script>
</head>
<body>
  Text
</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

Text

</body>

</html>

index.js

console.log('Hello World !');

1	console.log('Hello World !');

index.html を開き、GoogleChrome の[開発者ツール]で動きを確認してみてください。WindowならF12キー、Macなら Command+Option+I キーで開けることができます。

console.log にはいくつパラメータをわたしてもよい。

condole.log の動きを確認していきます。

index.js を書き換えてブラウザをリロードしてみてください。

console.log('a', 'b', 'c');

1	console.log('a', 'b', 'c');

[開発者ツール]の[Console] の出力内容はこのような表示になります。

a b c

a b c

配列を渡す

JavaScript の配列を表示させてみましょう。

配列とか、変数とか、の詳しいことは、また別の記事で紹介しますが、今は配列はどのように console.log で表示できるか、というところを説明しておきます。
JavaScriptの配列は、[] このような記号で表現できますので、次のように書くことができます。

var a = [1,2,3,'abc', 'def'];
console.log('aの値', a);

1 2	var a = [1,2,3,'abc', 'def']; console.log('aの値', a);

出力内容は下記の通りになります。

GoogleChrome では、表示の値をクリックすると中身を展開表示することができて、より細かい表示ができます。上は普通の表示で、下は細かい表示の内容です。

aの値 (5) [1, 2, 3, "abc", "def"]
----------
0: 1
1: 2
2: 3
3: "abc"
4: "def"
length: 5
__proto__: Array(0)

aの値 (5) [1, 2, 3, "abc", "def"]

----------

0: 1

1: 2

2: 3

3: "abc"

4: "def"

length: 5

__proto__: Array(0)

__proto__ というものが表示されていますが、説明も理解も難しすぎるので、いまはおいておいてください。ずっとおいておいても大丈夫なものです。

オブジェクトを渡す

オブジェクトを表示させてみます。
配列と同様にオブジェクトについて、詳しいことは、また別の記事で紹介します。今の所は console.logでの表示がこうなる、ってことを紹介しておきます。

var b = { 
  a: 1, 
  b: 'abc',
  c: function() { return 123 },
  d: { d1: 100, d2: 200, d3: 'D3'}
};
console.log('bの中身', b);

var b = {

a: 1,

b: 'abc',

c: function() { return 123 },

d: { d1: 100, d2: 200, d3: 'D3'}

};

console.log('bの中身', b);

出力結果と展開した内容は次の通り。

bの中身 {a: 1, b: "abc", c: ƒ, d: {…}}
----------
  a: 1
  b: "abc"
  c: ƒ ()
  d: {d1: 100, d2: 200, d3: "D3"}
  __proto__: Object

bの中身 {a: 1, b: "abc", c: ƒ, d: {…}}

----------

a: 1

b: "abc"

c: ƒ ()

d: {d1: 100, d2: 200, d3: "D3"}

__proto__: Object

こちらも、__proto__ については、配列のところと同じくです。

まとめて表示できる

まとめ表示してしまいましょう。

var a = [1,2,3,'abc', 'def'];
var b = { 
  a: 1, 
  b: 'abc',
  c: function() { return 123 },
  d: { d1: 100, d2: 200, d3: 'D3'}
};
console.log('Hello', 'World', '!',
  'aの値は', a,
  'bの値は', b,
);

var a = [1,2,3,'abc', 'def'];

var b = {

a: 1,

b: 'abc',

c: function() { return 123 },

d: { d1: 100, d2: 200, d3: 'D3'}

};

console.log('Hello', 'World', '!',

'aの値は', a,

'bの値は', b,

);

出力はこのようなものです。

Hello World ! aの値は (5)&nbsp;[1, 2, 3, "abc", "def"] bの値は {a: 1, b: "abc", c: ƒ, d: {…}}

1	Hello World ! aの値は (5) [1, 2, 3, "abc", "def"] bの値は {a: 1, b: "abc", c: ƒ, d: {…}}

まとめ

まとめると、console.log ができることは次のようなものです。

・console.log は、さまざまな値を表示できる
・console.log は、複数の値を同時に表示することが

他にも、console.log には多くの機能がありますが、基本的かつ実用的な機能としは、このようなことを理解しておけば十分です。あとは応用になります。

そういえば、次の記事で、console.log をより便利にする機能としてテンプレートストリング(テンプレートリテラル)の紹介もしていますので、ご参照ください。

プログラミングアカデミーゼロプラスワン

2018.09.24

business 792113 1920 s 150x150 - JavaScript console.log の使い方

JavaScript テンプレートストリング

https://zero-plus-one.jp/programming/templatestring

JavaScriptのテンプレートストリングは、前回の記事の「console.log」と組み合わせるととても便利ですし、また、単独でも便利な機能です。テンプレートストリングはES2015/ES6 と呼ばれる最新のJavaScriptで導入されている新しい機能なので、紹介される機会が少ないのであまり知られていないのですが、最新に導入されるくらい便利で使い勝手のよいものです。文字列を出力するときに、変数の内容を差し込んでいれることができる機能です。動作させてみましょう。動作環境を整えるのは、前回紹介したのと同じですね。<!DOCTYPE html&g...

追記

続きを書きました。

JavaScript console.log の使い方プロ級編

プログラミングアカデミーゼロプラスワン

2018.10.13

car s 150x150 - JavaScript console.log の使い方

JavaScript console.log の使い方プロ級編

https://zero-plus-one.jp/programming/javascript-console-log-pro

なんだか、console.logの記事が検索されて人気の様子です。もともとの初心者向けの記事はこちら。初心者向けではない、もう少し突っ込んで紹介してみておきましょう。初心者の方は、先に紹介した内容で十分だと思いますが、プロの中のプロレベルの使い方の紹介をしたりします。ぶっとばし過ぎているかもしれないので、初心者の人は真似をしないように。なんつって...（^ｗ^;プロはconsole.logなんて使わない、なんてことはない。こんな歌詞の歌がありましたね。「もう恋なんてしないなんて、言わないよぜーったいにー」つまり、恋をし...

応用編ですが、応用しすぎて、ガリガリコードを書くハードワーク的な仕事現場でしか役に立たないかも。