JavaScriptのconsole.logの使い方を初心者向けに解説！
デバッグとは変数などの値を表示して意図した値が返ってきているかやエラーが起きていないかなどを発見していく作業です。JavaScriptではデバッグを行うのに便利なconsole.log関数が提供しています。ここではconsole.logの使い方を解説します。
console.logとは？
console.logとは引数に渡した変数の値や文字列をブラウザのコンソールに表示する関数です。
例えばChromeであればデベロッパーツールを開く事でコンソールを表示させる事ができます。JavaScriptのフロントエンド開発において最も使用されるデバッグ方法です。
今回はコンソール上にログを表示させるconsole.logの使い方を解説します。
console.logの使い方
実際にconsole.logを使って、コンソールにログを出力していきましょう。
文字列を出力
まずは一番シンプルな使い方、文字列をコンソールに出力してみましょう。
index.js
// 文字列を出力
console.log('Hello World');
console.log関数の引数に文字列を直接指定することで、その指定した文字列をコンソールに出力ことができます。
変数を出力
次に変数の値をコンソールに出力していきたいと思います。
index.js
let x = 15;
console.log(x);
xという変数に15という値を定義しています。
変数xをconsole.log関数の引数に渡してあげることで、xという文字列ではなくその変数の値をコンソールに出力することができています。
index.js
console.log(y);
定義していない変数を引数に渡してコンソールに出力しようとすると、上の画像のような「Uncaught ReferenceError: y is not defined at index.js:7」というエラーが出力されてしまいます。
英語で書かれていますが、「yという変数は定義されていないよ。」というようなエラーが出力されています。また、at~の部分には該当のエラーが記述されているファイル名と何行目に記述されているかというのを表示してくれています。
index.js
let str = "こんにちは";
console.log(str);
もちろん、変数の値が数値だけではなく文字列でもコンソールに正しく出力することができます。
配列を出力
配列に格納されている複数の値をconsole.log関数でコンソールに出力していきます。
index.js
const arr = ["apple", "lemon", "orange"];
console.log(arr);
変数と同様に引数に配列を渡します。
配列の値をコンソールに出力することができました。()の中とlengthの値に記述されている3は配列に格納されている値の数を示しています。
また、インデックス番号:値と形で詳細に配列の中身が表示されています。
オブジェクトを出力
最後にオブジェクトの中身をコンソールに出力します。
index.js
const obj = {
a : 12,
b : 23,
c : 41
};
console.log(obj);
プロパティ:値といった形でちゃんとコンソールに出力することができました。
console.logの関連情報
console.logでコンソールに何も表示されなくなってしまった時の対処法や表示する文字列のスタイルをカスタマイズする方法を下記の記事で紹介しています。ぜひ、こちらも参考にしてください。
console.logが表示されない
console.logを設定していても、コンソール上にログが表示されない場合は下記を参考にしましょう。
ログに色を付けたい
console.logで出力されるログに対して、独自で色をつけて見やすくしたい場合は下記を参考にしましょう。
まとめ
console.logを使ったデバッグを行うことで、開発時には必ず役に立つでしょう。しっかりconsole.logを使いこなせるようになりましょう。
