【JavaScript】console.〇〇を使って効率よくデバックしよう！

はじめに

この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はJavaScriptの効率の良いデバック方法を紹介します。

皆さんデバックするときconsole.log を使用すると思います。
consoleオブジェクトはもちろんlog以外にも存在します。

問題に対して適切なconsoleのメソッドを使用し効率よくデバックできるようになりましょう！
普段.logしか使用してないって方は最後まで読んでいただけると幸いです！

対象読者

• フロントエンドエンジニアの方
• 初学者向け

consoleオブジェクトの概要

普段皆さんが何気に使用しているだろうconsole.logですがconsoleオブジェクトにはlog以外にも様々なメソッドが存在しています。
例えばerrorメソッドではconsole上で赤く表示してくれます。

console.error("エラーが発生しました")

なにかしらのエラーが発生した際はerrorメソッドを使用してerrorだとわかるように表示してくれます。
consoleオブジェクトにはデータの形式で適切なメソッドを使用することでデバックが効率的に行えるようになっています。

consoleオブジェクトのメソッド一覧

まずはconsoleオブジェクトに存在するメソッドを紹介します！
メソッド以外にもプロパティ等がありますが今回は割愛します！

15メソッドもあるんです！
ですが、実際このメソッドいつ使うんだよっていうメソッドもあります！

今回は実用性のあるメソッドをコード例とともに紹介します！

実例

今回コンソールの出力はGoogleChomeのDeveloperToolを使用しています！

tableメソッド

配列やオブジェクトを表形式で出力してくれます。

取得したデータ(配列やオブジェクト)等を表敬式でconsoleに表示してくれます。

const hoge = [
  { id: 1, name: "tanaka" },
  { id: 2, name: "satou" },
  { id: 3, name: "hayashi" },
]
console.table(hoge)

console画面

コンソールの画像を見ていただけるように表形式で表示してくれます。
取得したデータなどを確認する際はlogメソッドは使用せずにtableメソッドを使用しましょう！

countメソッド

何回呼ばれたかをカウントして出力します。
個人的にはパフォーマンス改善の際、無駄に呼び出してないかなどのデバックの際に使用しています。

サンプルコードはReactのコードになります。

import { useState } from 'react';

export function MyComponent() {
  console.count("レンダリング回数");

  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

console画面

このようにレンダリング回数などを可視化することができます！
無駄なレンダリングの調査する際などは積極的に使いましょう！

time/timeEndメソッド

タイマーを開始し、コードの実行時間を測定します。

今回はループ処理の処理時間を可視化してみます。

function delayedFunction() {
  console.time("time")

  // ここに計測したい処理を追加します
  for (let i = 0; i < 1000000; i++) {
    // 重い処理をシミュレートするためのループ
  }

  console.timeEnd("time")
}

コンソール画面

パフォーマンス改善の際など、悪影響を及ぼしている箇所などに使用することで処理時間を可視化できます！

traceメソッド

現在のコードの呼び出し元を確認したいときに使用します。
関数等がどこから呼ばれたかを確認することができます。

function first() {
  second()
}

function second() {
  third()
}

function third() {
  console.trace("Trace point")
}

first()

コンソール画面(@以降は本来ファイル名が書かれています。)

コードが複雑になった際などに使用すると呼び出し元の特定が捗ると思います！

さいごに

今回はJavaScriptのconsoleオブジェクトを紹介しました。
発生した問題に適切なメソッドを使えるようになるとデバックするスピードが早くなると思います！
今回例として挙げたもの以外にも気になるメソッドがあれば使用してみてください！

スポンサーリンク