【JavaScript】console.logの便利な使い方
開発や保守作業で必要になるデバッグ作業ですが、デバッグツールが充実している今日でも使用されているのがprintデバッグです。
printデバッグは手軽なだけでなく、ほとんどの環境で使用できるうえに、ブレークポイントのように一時停止すると困る場合でも使用できるといったメリットがあります。
JavaScriptでprintデバッグする場合によく使用される関数が console.log() で、今回はこの関数の便利な使い方をご紹介します。
目次
はじめに
こんにちは。
クラウドソリューショングループのakahane.tです。
開発や保守作業で必要になるデバッグ作業は処理のトレースやエラーの発生個所の特定、ある時点での変数の確認など様々ありますが、どの場面でも使用されているのがprintデバッグです。
printデバッグは手軽なだけでなく、非同期処理でブレークポイントが使用できない場合や複数人で同じ環境を使用している場合でも影響を与えにくいといったメリットがあります。
JavaScriptでは console.debug() のように開発言語側でデバッグメッセージを出力する関数が提供されていますが、環境によってデバッグメッセージ用のコンソールやログがなくデバッグ出力が確認できないこともあるため、通常の出力の console.log()を使用することが多いです。
今回の記事ではそんなJavaScriptの console.log() の便利な使い方をご紹介します。
便利な使い方①
console.log() では変数を複数渡すだけで、1行にまとめて表示することができます。
この機能を使えば変数を確認するときに変数名と値を並べて確認するときでも、変数展開や文字列結合しなくても並べて確認できます。
var1=123;
var2='abc';
console.log('var1 var2:', var1, var2);
// 出力結果
// var1 var2: 123 abc
便利な使い方②
デバッグ作業では複数の変数の値を確認することは頻繁にあります。
前述の便利な使い方①の方法でも複数の変数の名前と値をセットで表示することができますが、
下記のように変数の数だけ変数名と変数の値を記入するのはすごく手間がかかります。
var1=123;
var2='abc';
obj1={k1: 456, k2: 'def'};
console.log('var1 var2 obj1:', var1, var2, obj1);
// 出力結果
// var1 var2 obj1: 123 abc {k1: 456, k2: 'def'}
そこで下記のように {} の中に値を表示したい変数を記入すると、
変数名がオブジェクトのキー名として利用されるので簡単に複数の変数の名前と値をセットで表示することができます。
var1=123;
var2='abc';
obj1={k1: 456, k2: 'def'};
console.log({var1, var2, obj1});
// 出力結果
// {
// "var1": 123,
// "var2": "abc",
// "obj1": {
// "k1": 456,
// "k2": "def"
// }
// }
おわりに
今回ご紹介した使い方はちょっとしたものですが、実際にデバッグ作業で使ってみると手間がぐんと減るので効率的に作業できます。
また、IDEのショートハンドや補完機能とも相性がいいので組み合わせて使えば、さらに効率的に作業できるのでおすすめです。
