Amazon 数量限定タイムセール開催中

【JavaScript】console.logとは?使い方や表示方法を解説!

【JavaScript】console.logとは?使い方や表示方法を解説!

console.logの解説しているサイトなどを見ると、難しい専門用語ばかり出てきてまったく分からない…」なんてことありますよね。

そこで、このページでは初心者の方でも分かりやすいように、できるだけかんたんな言葉を使ってconsole.logの意味を解説しています。

難しい用語については、ひとつずつ解説しながら進めていきますので、安心して学ぶことができます。

ノーノちゃん

初心者向け講座サイトで「console.logとは任意の引数の情報をコンソール上に出力するメゾットであり、デバッグ目的で使用される関数…」みたいな解説見てプログラミング諦めたよ。
このページでは、そうならないために誰でも分かるように説明していますので参考になるかと思います!

ぶたさん

1. console.logとは?

console.logとは?

まず、はじめに「console.log(コンソール・ログ)」とは、どういった役割があるのかについて解説します。

指定したのものを画面に表示する

console.log(コンソール・ログ)は、指定したものを「コンソール」と呼ばれるプログラマー専用の画面に表示するためのものです。

たとえば、コンソールに文字を表示させたい場合、下記のように()の中に入力してプログラムを実行します。

js
コピー 拡大
console.log("こんにちは");

すると、コンソールに次のように表示されます。

コンソール(実行結果)
コピー 拡大
こんにちは

このように、console.logを使うことで、プログラム内にあるさまざまなものをコンソールに表示することができます。

ノーノちゃん

これは何の意味があるの?
見ただけでは確認できないプログラム内のデータなどを表示することができます。くわしくは次の項目で解説しますね。

ぶたさん

何のために使う?

console.log何のために使う?
console.logは次のようなときに使われています。
console.logの使いみち
  • プログラムの中身を確認したいとき
  • デバッグするとき

プログラムの中身を確認したいとき

console.logはプログラムの中身を確認したいときに使います。

プログラムのコードは複雑になると、どこになにが入っているかなど見ただけでは分からないことが多いです。

また、途中でデータの内容が変わっていたり、思っていたのとは違うデータが入っていたりすることがあります。

そんなときconsole.logを使うと、「今この時点でどんな状況になっているのか」を表示させて確認することができます。

ノーノちゃん

冷蔵庫の中に何が入ってるか知らせてくれるみたいなもの?
そうですね。「今、冷蔵庫の野菜室に何がある?」と聞くと「トマト、キャベツ、なすび」と答えが返ってくるみたいなイメージです。

ぶたさん

デバッグするとき

console.logはデバッグするときに使います。

デバッグとは、プログラムの動作を確認したり、バグを見つけて修正したりする作業のことです。

たとえば、プログラムが思いどおりに動かないとき、なぜ動かないのか原因を調べる必要がありますよね。

そんなときにconsole.logを使うと、プログラムの処理の流れなどを画面に表示して確認することができます。

たとえば「3+5」の足し算をするプログラムを作って、実行してみたとします。

js
コピー 拡大
let a = "3";
let b = "5";
let sum = a + b;

console.log(sum);

すると、実行結果は次のようになりました。

コンソール(実行結果)
コピー 拡大
35

想定では「8」という結果になるはずなのに、なぜか「35」になっています。

このようなプログラムが思いどおりに動かないとき、console.logを使って原因を探すことができます。

デバックの例

それでは実際にデバッグの例をご紹介します。

今回は「3と5が数字なのか?文字なのか?」を判定するtypeofconsole.logを組み合わせを使ってデバックしてみます。

js
コピー 拡大
let a = "3";
let b = "5";
let sum = a + b;

console.log("a = " + typeof a);
console.log("b = " + typeof b);

すると、結果は次のようになりました。

コンソール(実行結果)
コピー 拡大
a = string  
b = string

string(ストリング)とは、文字列という意味です。

つまり「3」も「5」も数字ではなく、文字として扱われていたということが判明しました。※「""」で囲うと文字列になる

文字を足し算すると結合されるので、「3+5=35」という結果になったというわけです。

このようにconsole.logを使えばプログラムが思いどおりに動かない原因を探ることができます。

ぶたさん

各用語の解説

console.logの意味解説
ここでは、console.logの意味についてひとつずつ解説しています。
コード 分類 役割
console オブジェクト コードの動作を確認するための画面

 
console(コンソール)は開発者用の特別な画面のことです。

具体的には、書いたコードの動作確認するための場所になります。

主にコードの動きをテストしたり、バグやエラーがないかをチェックしたりするときに使われています。

ノーノちゃん

consoleは実験室みたいな感じなんだね。
そうですね。いろいろテストできる便利な場所だと考えていただければ分かりやすいかもしれません。

ぶたさん

コード 分類 役割
. 演算子 「◯◯の中にある~」という意味の記号

 
.(ドット)は「◯◯の中にある~」という意味を持つ記号です。

たとえば、次のようなコードがあるとします。

js
コピー 拡大
◯◯.△△

このコードは「◯◯の中にある△△にアクセスする」という意味になります。

これをconsole.logに置き換えると「consoleの中にあるlogにアクセスする」という意味になります。

ちなみに.ドットは「◯◯.△△.☆☆」のように、いくつも繋げて使うことができます。

ぶたさん

ノーノちゃん

その場合の意味はどうなるの?
「◯◯の中にある△△の中にある☆☆にアクセスする」という意味になります。

ぶたさん

補足
厳密にはドットのあとのコードはアクセスするだけではなく、さまざまな役割を持ったものがあります。
コード 分類 役割
log メソッド 出力(表示)する

 
log(ログ)とは「記録する」「出力する」という意味です。

つまりconsole.log()は、()内のものをコンソールに表示するということになります。

2. console.log表示場所、表示方法

console.log表示方法

console.logの実行結果はどこに表示されるの?」と疑問に思っている方が多いと思います。

結論から言うと、console.logの出力結果は次のいずれかの場所に表示させることができます。

console.logの実行結果が表示される場所
  • ブラウザの開発者ツール(デベロッパーツール)
  • コードエディタのターミナル
  • HTML上(ブラウザ上)
それでは各場所での表示方法を解説しますね。

ぶたさん

ブラウザの場合(Google Chrome)

console.logの実行結果をブラウザで表示
console.logの実行結果をブラウザ(Google Chrome)で確認する方法です。
1

ブラウザを起動

まず「Google Chrome」を起動します。
2

ショートカットキーを押す

ブラウザ上で下記のいずれかのショートカットキーを押すとコンソールが開きます。

■ショートカットキー①
F12キーを押す
■ショートカットキー②
ShiftCtrlJキーを押す
3

コンソールが開く

これでコンソールの表示完了です。
コンソールが開く

ノーノちゃん

コンソールはどうやって使うの?
コンソール画面にコードを直接入力したり、コピーしたコードを貼り付けて使います。くわしくは続きをご覧ください。

ぶたさん

4

コードを入力

コンソールの「>」の後に、コードを入力してEnterキーを押せば実行されます。
js
コピー 拡大
console.log('こんにちは')
コードを入力してキーボードのEnterキーを押す
貼り付けできない場合
初期設定の状態では、コンソールにコピーしたテキストを貼り付けられないようになっています。
 
貼り付けを許可するには、下記の文章を入力してEnterキーを押してください。

allow pasting
5

実行結果が表示

先ほど入力したコードの実行結果が下に表示されます。
実行結果が表示

コードエディタの場合(VSCode)

console.logの実行結果をVSCodeで表示
console.logの実行結果をVSCode(Visual Studio Code)で確認する方法です。
1

VSCodeを起動

まずはVSCode(Visual Studio Code)を起動します。
2

新しいファイルを作成

下記のショートカットキーを押して新しいファイルを作成します。

Ctrl+Nキーを押す

キーボードの「Ctrl」+「N」を押す

3

コードを貼り付ける

下記のコードをコピーして貼り付け、キーボードの「Ctrl」+「S」を押します。
js
コピー 拡大
let a = 5;

console.log(a);
コードを貼り付け、キーボードの「Ctrl」+「S」を押す
4

JavaScriptファイルを保存する

保存先フォルダを選択し、ファイル名を「main」と入力し、保存をクリックします。
保存先フォルダを選択し、ファイル名を入力し、保存をクリック
5

新しいファイルを作成

下記のショートカットキーを押して新しいファイルを作成します。

Ctrl+Nキーを押す

キーボードの「Ctrl」+「N」を押す

6

HTMLファイルを作成

「テンプレートで入力」をクリックし、「html doc」を選択します。
「テンプレートで入力」をクリックし、「html doc」を選択
7

読み込みタグを入力

<body></body>」の間に「s」を入力し、「script:src」を選択します。
ここに「s」と入力し、「script:src」を選択

script:srcとは?
script srcは外部にあるJavaScriptのファイルを読み込ませるためのタグです。
8

JavaScriptのファイル名を入力

""」の間に「main.js」と入力し、キーボードの「Ctrl」+「S」を押します。

「""」の間に「main.js」と入力し、キーボードの「Ctrl」+「S」を押す

■入力例
<script src="main.js"></script>

【各コードの解説】

コード 解説
script 「これからスクリプトを書くよ」という合図。
src ソース、出典の略。
JavaScriptのファイルを「どこから持ってくるか」の場所を教える言葉。
= 「◯◯は△△ですよ」と繋げる記号
"" 読み込むファイルの名前や場所
main.js 読み込むファイルの名前
9

HTMLファイルを保存

保存先フォルダを選択し、ファイル名を「index」と入力し、保存をクリックします。
保存先フォルダを選択し、ファイル名を入力し、保存をクリック
10

コンソールを開く

キーボードの「F5」を押し、Webアプリ(Chrome、Edge)を選択します。
キーボードの「F5」を押し、どちらかを選択
11

コンソールが表示

ブラウザが起動し、デバッグコンソールが表示されていれば完了です。
コンソールが表示される

HTML上に表示したい場合

console.logの実行結果をHTML上に表示
console.logの実行結果をHTML上に表示する方法です。

通常であればconsole.logの実行結果はコンソールと呼ばれる開発者用の画面にしか表示されません。

しかし、getElementByIdinnerHTMLを使うことで、実行結果をHTML(ブラウザ)上に表示することができます。

・コードのみ知りたい方は読み飛ばしてください
使用したタグとコードの解説」までスキップ
それでは手順を解説していきます。

ぶたさん

1

Visual Studio Codeを起動

VSCode(Visual Studio Code)を起動します。
2

新しいファイルを作成

下記のショートカットキーを押して新しいファイルを作成します。

Ctrl+Nキーを押す

キーボードの「Ctrl」+「N」を押す

3

JavaScriptのコードを貼り付け

まず、下記のJavaScriptのコードをコピーして貼り付けます。そしてキーボードの「Ctrl」+「S」を押します。
js
コピー 拡大
let log = document.getElementById("log");
let message = "こんにちは";
console.log(message);
log.innerHTML += message;

コードを貼り付け、キーボードの「Ctrl」+「S」を押す

4

JavaScriptファイルを保存する

保存先フォルダを選択し、ファイル名を「main」と入力し、保存をクリックします。
保存先フォルダを選択し、ファイル名を「main」と入力し、保存をクリック
5

新しいファイルを作成

下記のショートカットキーを押して新しいファイルを作成します。

Ctrl+Nキーを押す

キーボードの「Ctrl」+「N」を押す

6

HTMLファイルを作成

「テンプレートで入力」をクリックし、「html doc」を選択します。
「テンプレートで入力」をクリックし、「html doc」を選択
7

タグを挿入

<body></body>」の間に「s」を入力し、「script:src」を選択します。
ここに「s」を入力し、「script:src」を選択
8

JavaScriptのファイル名を入力

""」の間に、先ほど作成したJavaScriptファイルの名前「main.js」を入力します。
「""」の間に「main.js」を入力
9

タグを貼り付け

head内に下記のHTMLタグを貼り付け、キーボードの「Ctrl」+「S」を押します。
HTML
コピー 拡大
<div id="log"></div>

ここにコードを貼り付け、キーボードの「Ctrl」+「S」を押す

10

HTMLファイルを保存する

保存先フォルダを選択し、ファイル名を「index」と入力し、保存をクリックします。
保存先フォルダを選択し、ファイル名を「index」と入力し、保存をクリック
11

コンソールを開く

キーボードの「F5」を押し、Webアプリ(Chrome、Edge)を選択すると、ブラウザが起動します。
ここでキーボードの「F5」を押し、どちらかを選択
12

ブラウザ上にログが表示される

これでブラウザに「console.log」の実行結果が表示されます。
ブラウザに「console.log」の実行結果が表示される

ノーノちゃん

今回使ったHTMLタグとJavaScriptのコードがよく分からないよ…。
タグとコードの解説は下記にまとめていますのでよければご覧ください。

ぶたさん

使用したタグとコードの解説

HTML
コピー 拡大
<div id="log"></div>
タグの流れ

  1. HTML内に「箱(div)」を作る
  2. 箱に「ラベル(id)」を貼る
  3. ラベルに「名前("log")」を書く
タグ 説明
div グループ化するための箱
id 箱(div)のラベル
"log" 箱(div)のラベル(id)に書く名前

js
コピー 拡大
let log = document.getElementById("log");
let message = "こんにちは";
console.log(message);
log.innerHTML += message;
コードの流れ
  • let log = document.getElementById("log");
    HTMLにある「log」という箱を、JavaScriptで使えるようにする準備。
  • let message = "こんにちは";
    「message」という名前の箱を作り、「こんにちは」という文字を入れる。
  • console.log(message);
    「message」の中身をコンソールに表示
  • log.innerHTML += message;
    「message」に入っている中身をHTMLの「log」という箱に追加する(ブラウザ画面に表示される)
コード 分類 説明
let 変数宣言 「箱を作ります」という宣言
log,message 変数名 箱の名前
こんにちは,message 変数値 箱の中に入れるもの
document オブジェクト HTMLファイルにアクセスするために使う
getElementById メソッド 指定したIDの中身を取得する
"" 囲い記号 囲まれたものを文字列として扱う
+ 演算子 足し算、文字列を結合
= 代入演算子 右のものを左に入れる
; 区切り記号 文末につける区切り
console.log() 出力命令 ()の中身をコンソールに表示
innerHTML プロパティ HTMLタグの中身を読み取ったり、書き換えたりする

3. console.log使い方

console.log使い方

ここではconsole.logの基本的な使い方を解説しています。

初心者の方でも分かりやすいように、各コードの意味にをひとつずつ解説していますので参考にしてみてください。

文字列・数値を出力

js
コピー 拡大
console.log("こんにちは");
コンソール(実行結果)
コピー 拡大
こんにちは
コードの流れ解説
  • "こんにちは"
    「こんにちは」という文字列
  • console.log();
    ()の中身をコンソール(画面)に表示する
コード 分類 説明
こんにちわ 文字 ただの文字
console.log() 出力命令 ()の中身をコンソールに表示
"" 囲い記号 囲まれたものを文字列として扱う
; 区切り記号 文末につける区切り

変数値を出力(数値)

js
コピー 拡大
let a = 5;

console.log(a);
コンソール(実行結果)
コピー 拡大
5
コードの流れ解説
  • let a = 5;
    「a」という名前の箱を作り、その中に5という数値を入れる
  • console.log(a);
    「a」の中身をコンソール(画面)に表示する
コード 分類 説明
let 変数宣言 「箱を作ります」という宣言
a 変数名 箱の名前
5 変数値 箱(a)の中に入れるもの
= 代入演算子 右のものを左に入れる
; 区切り記号 文末につける区切り
console.log() 出力命令 ()の中身をコンソールに表示

変数値を出力(文字列)

js
コピー 拡大
let name = "鈴木";

console.log(name);
コンソール(実行結果)
コピー 拡大
鈴木
コードの流れを解説
  1. let name = "鈴木";
    「name」という名前の箱を作り、その中に“鈴木”という文字列を入れる」
  2. console.log(name);
    「name」の中身をコンソール(画面)に表示する
コード 分類 説明
let 変数宣言 「箱を作ります」という宣言
name 変数名 箱の名前
鈴木 変数値 箱(name)の中に入れるもの
"" 囲い記号 囲まれたものを文字列として扱う
= 代入演算子 右のものを左に入れる
; 区切り記号 文末につける区切り
console.log() 出力命令 ()の中身をコンソールに表示
数字を入力する場合、下記のように""(ダブルクォーテーション)の有無によって意味が異なりますので注意しましょう。

ぶたさん

文字列【文字列】

テキスト、文字の並び。計算できない。

"5"
数値【数値】

数学的な値。計算できる。

5

複数出力(改行する①)

js
コピー 拡大
let name = "鈴木";
let age = 30;

console.log(name);
console.log(age);
コンソール(実行結果)
コピー 拡大
鈴木
30
コードの流れ解説
  1. let name = "鈴木";
    「name」という名前の箱を作り、その中に“鈴木”という文字列を入れる
  2. let age = 30;
    「age」という名前の箱を作り、その中に30という数値を入れる
  3. console.log(name)
    「name」の中身をコンソール(画面)に表示する
  4. console.log(age)
    「age」の中身をコンソール(画面)に表示する
コード 分類 説明
let 変数宣言 「箱を作ります」という宣言
name 変数名 箱の名前
age 変数名 箱の名前
鈴木 変数値 箱(name)の中に入れるもの
30 変数値 箱(age)の中に入れるもの
"" 囲い記号 囲まれたものを文字列として扱う
= 代入演算子 右のものを左に入れる
; 区切り記号 文末につける区切り
console.log() 出力命令 ()の中身をコンソールに表示

複数出力(改行する②)

js
コピー 拡大
let name = "鈴木";
let age = 30;

console.log(name + "\n" + age);
コンソール(実行結果)
コピー 拡大
鈴木
30
コードの流れ解説
  1. let name = "鈴木";
    「name」という名前の箱を作り、その中に“鈴木”という文字列を入れる」
  2. let age = 30;
    「age」という名前の箱を作り、その中に30という数値を入れる」
  3. console.log(name + "\n" + age);
    「name」と「age」の間に改行を挿入して、中身をコンソール(画面)に表示する」
コード 分類 説明
let 変数宣言 「箱を作ります」という宣言
name 変数名 箱の名前
age 変数名 箱の名前
鈴木 変数値 箱(name)の中に入れるもの
30 変数値 箱(age)の中に入れるもの
"" 囲い記号 囲まれたものを文字列として扱う
= 代入演算子 右のものを左に入れる
+ 演算子 足し算、文字列を結合
; 区切り記号 文末につける区切り
\n 改行コード 改行する
console.log() 出力命令 ()の中身をコンソールに表示

複数出力(改行しない)

js
コピー 拡大
let name = "鈴木";
let age = 30;

console.log(name, age);
コンソール(実行結果)
コピー 拡大
鈴木30
コードの流れ解説
  1. let name = "鈴木";
    「name」という名前の箱を作り、その中に“鈴木”という文字列を入れる
  2. let age = 30;
    「age」という名前の箱を作り、その中に30という数値を入れる
  3. console.log(name, age)
    「name」と「age」の中身をコンソール(画面)に表示する
コード 分類 説明
let 変数宣言 「箱を作ります」という宣言
name 変数名 箱の名前
age 変数名 箱の名前
鈴木 変数値 箱(name)の中に入れるもの
30 変数値 箱(age)の中に入れるもの
"" 囲い記号 囲まれたものを文字列として扱う
= 代入演算子 右のものを左に入れる
; 区切り記号 文末につける区切り
console.log() 出力命令 ()の中身をコンソールに表示

複数出力(改行しない&スペース)

js
コピー 拡大
let name = "鈴木";
let age = 30;

console.log(name + " " + age);
コンソール(実行結果)
コピー 拡大
鈴木 30
コードの流れ解説
  1. let name = "鈴木";
    「name」という名前の箱を作り、その中に“鈴木”という文字列を入れる」
  2. let age = 30;
    「age」という名前の箱を作り、その中に30という数値を入れる」
  3. console.log(name + " " + age);
    「name」と「age」の間にスペースを挿入して、中身をコンソール(画面)に表示する」
コード 分類 説明
let 変数宣言 「箱を作ります」という宣言
name 変数名 箱の名前
age 変数名 箱の名前
鈴木 変数値 箱(name)の中に入れるもの
30 変数値 箱(age)の中に入れるもの
"" 囲い記号 囲まれたものを文字列として扱う
= 代入演算子 右のものを左に入れる
+ 演算子 足し算、文字列を結合
; 区切り記号 文末につける区切り
スペース 半角スペース、空白
console.log() 出力命令 ()の中身をコンソールに表示

データの種別判定(文字列、数値)

js
コピー 拡大
let a = "3";
let b = 5;
let sum = a + b;

console.log("a = " + typeof a);
console.log("b = " + typeof b);
コンソール(実行結果)
コピー 拡大
a = string  
b = number
判定結果 説明
"こんにちは" String 文字列
123 Number 数値
true,false boolean 真偽値
undefined undefined 値が設定されていない変数など
null object エラー、値が存在しない
function() {} function 関数
コードの流れ解説
  1. let a = "3";
    「a」という名前の箱を作り、その中に3という文字列を入れる
  2. let a = 5;
    「a」という名前の箱を作り、その中に5という数値を入れる
  3. console.log("a = " + typeof a);
    「name」と「age」の間にスペースを挿入して、中身をコンソール(画面)に表示する」
コード 分類 説明
let 変数宣言 「箱を作ります」という宣言
a,b,sum 変数名 箱の名前
3,5 変数値 箱(name)の中に入れるもの
"" 囲い記号 囲まれたものを文字列として扱う
+ 演算子 足し算、文字列を結合
= 代入演算子 右のものを左に入れる
; 区切り記号 文末につける区切り
console.log() 出力命令 ()の中身をコンソールに表示
typeof 演算子 データの種類を調べる
(文字列、数字、真偽値など)

4. よくある質問

console.logに関するよくある質問

ここではconsole.logに関するよくある質問をご紹介しています。

console.logどこに出る?

console.logの実行結果は「コンソール」と呼ばれる開発者用の画面に表示されます。※通常の方法ではブラウザ上に表示できません

表示方法が分からない場合は「2. console.log表示方法」をご覧ください。

console.log表示されない

cosnole.logが表示されない場合、JavaScriptが正しく読み込まれていない可能性があります。

一度、JavaScriptファイルを読み込むためのタグや、ファイルのパスを書き間違えていないか確認してみましょう。

下記のようにファイルのパスが異なっていないか確認してください。

ぶたさん

■間違ったタグの書き方
・JSファイルのパス
main.js

・HTMLファイル内に書いたJSファイルのパス
<script src="script.js"></script>

■正しいタグの入力方法
・JSファイルのパス
main.js

・HTMLファイル内に書いたJSファイルのパス
<script src="main.js"></script>

console.logなぜか省略される

console.logで入れ子構造になっているデータを出力すると、内容の一部が省略されることがあります。

たとえば、次のような深い階層のデータをconsole.logで出力したとします。

js
コピー 拡大
const obj = {
    a: {
      b: {
        c: {
          d: {
            e: 123
          }
        }
      }
    }
  };
  
console.log(obj);

すると、下記のように3階層までしか表示されず、その下のデータが省略されてしまうことがあります。

コンソール(実行結果)
コピー 拡大
{ a: { b: { c: [Object] } } }

解決方法

最もかんたんな解決方法はJSON.stringify()を使って、データを文字列に変換することです。

やり方は以下のとおりです。

js
コピー 拡大
const obj = {
  a: {
    b: {
      c: {
        d: {
          e: 123
        }
      }
    }
  }
};

console.log(JSON.stringify(obj));
コンソール(実行結果)
コピー 拡大
{ a: { b: { c: { d: { e: 123  } } } } }
コード 分類 説明
const 定数宣言 「箱を作ります」という宣言
(値を変更できない箱を作る)
obj 定数名 作った箱の名前
{} オブジェクト 箱の中にあるフォルダ
a,bc,d,e プロパティ
(キー)
フォルダの中にあるファイル
e:123 プロパティ値 ファイルの中にある内容
= 代入演算子 右のものを左に入れる
: オブジェクト
リテラル
プロパティとプロパティ値をつなぐ記号
; 区切り記号 文末につける区切り
console.log() 出力命令 ()の中身をコンソールに表示
JSON.stringify() 関数 ()の中の情報を文字にしてくれる道具
補足
関数の()内に入るものを「引数」といいます。
 
今回で言えばJSON.stringify(obj)(obj)が引数になります。
 
引数とは関数に渡すデータのことで、分かりやすく言うと関数が「料理人」、引数が「食材」みたいなものです。

このようにJSON.stringify()を使えば、すべてのデータが出力できるようになります。

ノーノちゃん

出力結果をもっと見やすくできないの?
下記のコードを使うと見やすくすることができます。

ぶたさん

js
コピー 拡大
console.log(JSON.stringify(obj, null, '\t'));
コード 分類 説明
console.log() 出力命令 ()の中身をコンソールに表示
JSON.stringify() 関数 ()の中の情報を文字にしてくれる道具
obj 引数 変換したいデータ(箱)
null 引数 変換する内容をそのまま全部表示
\t 引数 字下げ(インデント)を入れて見やすく表示する

logger.logとの違いは?

console.loglogger.logの違いは次のようになります。

logger.log console.log
表示場所 コンソール コンソール
主な用途 ログ記録・管理 デバッグなど
使用頻度 あまり使わない よく使う
logger.logはGAS(Google Apps Script)でログ出力するためによく使われています。

ぶたさん

document.writeと違いは?

console.logdocument.writeの違いは次のようになります。

document.write console.log
表示場所 ブラウザの画面 コンソール
主な用途 ブラウザ上に情報を表示させる デバッグなど
使用頻度 ほぼ使わない よく使う
document.writeはHTML5で非推奨になったことから、現在ではほとんど使われていませんので覚える必要ありません。

ぶたさん

複数の値をまとめて出力できる?

下記のように,(カンマ)で区切ることで複数の値をまとめて出力できます。

js
コピー 拡大
console.log(1, 2, 3);
js
コピー 拡大
console.log("りんご", "いちご", "バナナ");

文字・文字列・数値の違いは?

文字・文字列・数値の違いは次のようになります。

種類 項目名
文字 あ、い、う 1つの記号
数値 1234 計算できる数字
文字列 “こんにちは”
“1234”
文字を並べたもの
※計算できない

 
文字は1つの記号、数値は計算できる数字のことを指します。

一方、文字列は文字を並べたもので、""で囲われてものはすべて文字列として扱われます。

たとえば「"1234"」は見た目は数字ですが、実際は""で囲われているため文字列という扱いになり、計算することができません。

そのため「"10"+"10"」という計算した場合「"1010"」という文字が結合されるだけという結果になります。

5. まとめ

console.logの解説まとめ

console.logは、プログラムの中のデータなどをコンソール(開発者用の画面)に表示するためのものです。

基本的にプログラムの中にどんなデータが入っているのかを確認するときや、デバックをするときに使います。

console.logは、プログラミングの基本中の基本とも言えるものなので、しっかり覚えておきましょう。

まとめ
  • console.logは指定したのものをコンソールに表示するための命令
  • 実行結果はブラウザの開発者ツールなどで確認できる
  • 主にデバッグ(動作確認)や変数の中身を調べるときに使われる