コードのバグ退治！隠れたコンソールメソッドが開発を加速する！

こんにちは、ノベルティのエンジニア橋本です。

エンジニアをやっていると、日々新しいものが出てきたり、深く掘ってみると新しい発見があったり...面白いことがたくさんあります。

最近あった体験として、弊社の高宮にJamstackのコードをレクチャーしてもらっていた時のことでした。

ふと彼がとある変数のコンソールを出してみましょうか、と言ってVS Code上で「log」と入力しました。

するとVS Codeのコード補完機能ですぐにconsole.log()を出力していたわけですが、私は単純に知らなかったので「すげえ」となったわけです。

※何を思ったのか、わざわざ独自スニペットで登録していたことは言わなかった...気がします

このように、多くの方は知ってるかもしれないけれど、知らないことってあると思います。

今回はコンソールの恩返しということで、デバッグに役立つconsole関連のメソッドについて色々と調べてみました！

各メソッドの内容と便利なポイント、使いどころを説明していきます。

もしかしたらみなさんの知らない便利consoleメソッドもあるかも知れません...ぜひ一度エンジニアのみなさんはご覧ください。

console.log()

まずはみなさんご存知、頼りになるconsole.log()

こちらは言わずと知れた、変数などをデバッグするconsoleのメソッドです。

数字や文字列といった「型」情報を取得できます。

上述の通り、VS Codeを使っていればlogまで入力すれば補完してくれます。便利。

しかし、経験がある方もいらっしゃるかも知れませんが、オブジェクトや配列などを扱うようになると若干視認性が悪いのが残念だったりします。（それもだいぶモダンブラウザで改善されましたが、ツリーになってしまうので一覧性が低いかもです）

ほぼ余談ですが、第2引数にスタイルシートを記入することもできます。

使う頻度はあまりないかもしれませんが、視認性を高めることが可能です。

使い方

let testString = "テスト"
let testNumber = 1

console.log(testString)
console.log(testNumber)

console.table()

logの視認性を解消してくれるのが、こちらのconsole.table()です。

こちらはオブジェクトや配列をテーブル表示してくれる便利なメソッド。

フロントエンドで大量のデータが格納されている配列を取得した時、縦に見ていくのって結構疲れますよね。次の要素の値を見るのにスクロールして行ったり来たり。

コンソール画面を切り離して大画面で見たら、かなり複雑な情報でもビジュアル的に解決できる確率が上がります！

使い方

let testString = ['hoge', 'fuga', 'piyo', 'foo', 'var']
console.table(testString)

console.count()

続いてはこちらのconsole.count()です。

これは名前通り実行された回数をカウントしてくれるメソッドです。

あれ？この処理2回動いてない？といった疑問を思ったことはありませんか？

そのような状況下になっても、console.count()を使えば効率的にデバッグすることが可能です。

もちろん処理内の変数とconsole.log()を利用すればデバッグすることはできます。

ただ、こちらのメソッドの特徴は、文量の少なさです。

IDを引数に指定してあげると、count: 1のようにかなり分かりやすい返却値を返してくれます。

このconsole.count()が書いてある部分を再度通過すると、count: 2といった形で加算されます。

これを知るまではデバッグ用の変数を作って通過や実行回数を確かめていましたが、こちらを使うことでスッキリ明瞭に理解することができるようになりました。

使い方

//countは任意のIDなので変更可
console.count('count')

console.time()

続いてはconsole.time()です。

こちらは処理の時間を計測するためのメソッドになります。

クライアントサイドからAPIで情報を取得したりするとき、その処理が何ミリ秒か返却してくれるconsole.time()が役立ちます。

使い方は従来のコンソール系とは少し異なり、下記のような形で使用します。scriptTimeのように同一のIDでtimeとtimeEndを囲んだ範囲内の処理時間を計算する仕組みです。

使い方

//scriptTimeは任意のIDなので変更可
console.time('scriptTime');
//ここに処理を記述
console.timeEnd('scriptTime');

実際の返却値はこのような形になります。

scriptTime: 566.080078125 ms

これでどこの処理が重いのか、数字で明確化することができます。

なお、console.timeLog('scriptTime')を用いることで途中の経過時間を出力することも可能です。

console.dir()

これはオブジェクトの詳細な階層構造を表示し、プロパティとメソッドをより詳細に探索するためのメソッドです。

しかし現在はChromeをはじめとするモダンブラウザで、console.log()と出力内容が類似しています。

どの場面で使ったら良いのか分かりづらい点ではありますが、console.log()は基本的にオブジェクトの概要やシンプルなデータ型を出力するために使用されます。

対してconsole.dir()は複雑な階層のオブジェクトや、内部の特定のプロパティに焦点を当てる際に有用です。

さっと概要を知りたいときはconsole.log()、詳細を知りたいときはconsole.dir()が役に立ちます。

情報出力形

consoleにはさまざまな情報を出力するためのメソッドがあります。

情報出力形とまとめましたが、内訳は下記の三つに分けられます。

• 一般的なログメッセージを示す、console.info()
• 警告メッセージを出力し、問題が発生しうることを示唆する、console.warn()
• エラーメッセージを出力する、console.error()

これらを使い分けることで、いち早くコンソールに出力されたログの意味を理解することが可能です。

特にエラーハンドリングにおいて有用です。

ユーザーには表面的な内容をトーストなどで表示し、開発者向けのメッセージをconsole.error()に表示するなどして活用できます。

console.clear()

こちらのconsole.clear()は、文字通りコンソールをクリアするためのメソッドです。

コード上だけでなく、実際のコンソール画面でこちらのコマンドを入力すると今まのコンソール表示を削除できます。

情報が煩雑になってきた時におすすめです。

まとめ

以上がconsoleメソッドのまとめでした。

ノベルティの注力しているJamstackの分野でも広く利用できるメソッドです。

エンジニアに従事していると、小さなことでも、日々知らないことの発見続きだなと思います！

日々ノベルティは新しいことへのチャレンジを続けています！

興味のある方は、ぜひこちらから私たちについてご覧ください。