2023年にconsole.logだけを使い続けるのはダメな理由 🚀

これは知らなきゃ損するコンソールオブジェクトのメソッドとコツです！

2023年になっても、まだJavaScriptのデバッグにconsole.logばかり使っていますか？

デバッグスキルをレベルアップして、JavaScriptコンソールオブジェクトの全能力を発見する時です。

console.tableからconsole.timeまで、これらの上級メソッドやコツを使えば、デバッグ出力の品質と可読性を向上させることができますし、コード内の問題を特定して修正するのも楽になります。

だから2023年、JavaScriptの忍者デバッガーの仲間入りをして、これらの重要なテクニックを学んでみませんか？コードが感謝するはずです。

😞 問題点

ただconsole.logを使う最大の問題点は、コードが散らかって読みにくくなることです。さらに、それだけで情報量は非常に少ないです。何を渡しても文脈や追加情報なしに値を出力するだけです。

そこで、ここにあなたが知っておくべきJavaScriptコンソールオブジェクトのメソッドとコツをいくつか紹介します(早くconsole.logを使いたくなる気持ちはわかりますが、デバッグ体験がずっと良くなるので、未来のあなたのためにぜひ試してみてください！)。

1️⃣ console.table

このメソッドは表形式のデータを読みやすく理解しやすい形で出力することができます。配列やオブジェクトをただ出力するだけでなく、console.tableを使うとデータが表形式で表示され、より簡単にスキャンして理解することができます。

// オブジェクトの配列をテーブルとして出力
const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' }
];
console.table(users);

これはusers配列を表形式で出力して、各オブジェクトのプロパティを列として、オブジェクト自体を行として表示します。

2️⃣console.group

console.groupとconsole.groupEndです。これらのメソッドを使うと、コンソールにネストされた折りたたみ可能なグループを作成できます。デバッグ出力の整理と構造化に便利で、コードの異なるレベルで何が起こっているかが簡単に見えるようになります。

console.group('User Details');
console.log('Name: John Doe');
console.log('Age: 32');
console.groupEnd();

これはコンソールに「User Details」という見出しのネストされた、折りたたみ可能なグループを作成します。グループ内のログメッセージはインデントされ、まとめられて表示されます。

3️⃣console.time

console.timeとconsole.timeEnd。これらのメソッドは、コードブロックの実行にかかる時間を測定することができます。これは、コードのパフォーマンスボトルネックを特定して、最適化するのに役立ちます。

console.time('Fetching data');
fetch('https://reqres.in/api/users')
  .then(response => response.json())
  .then(data => {
    console.timeEnd('Fetching data');
    // データを処理
  });

これは指定されたURLからデータを取得してJSONレスポンスを解析するのにかかった時間を測定し、経過時間をコンソールに出力します。

4️⃣console.assert

このメソッドを使用すると、常に真でなければならないステートメントであるアサーションをコードに書くことができます。アサーションが失敗すると、console.assertはコンソールにエラーメッセージを出力します。これはバグを捕まえ、コードが期待通りに動いていることを確認するのに役立ちます。

function add(a, b) {
  return a + b;
}

// add関数をテスト
const result = add(2, 3);
console.assert(result === 5, '期待される結果 2 + 3 = 5 ではありません');

これはadd 関数が入力2と3に対して期待される結果5を返さない場合、コンソールにエラーメッセージを出力します。

5️⃣スタイルをつけたログ

consoleオブジェクトを使用してスタイルと色を出力します。consoleオブジェクトは色やスタイルの異なるテキストを出力することができます。これにより、デバッグ出力がさらに読みやすくなります。

出力テキストに特定のCSSスタイルを指定したい場合は、console.logステートメントで%cプレースホルダーを使用できます。

console.log('%cHello world!', 'color: red; font-weight: bold;');

これは指定されたCSSスタイルを使用して、テキスト「Hello world!」を赤く太字で出力します。

さて、もっと良いログが欲しいなら、設定がたくさんある専門のロギングライブラリーを使いたいところです。私はこの記事で本当に良いものを一つ追加しました：https://dev.to/naubit/5-small-and-hidden-react-libraries-you-should-already-be-using-nb5

6️⃣console.trace

console.traceメソッドを使用してスタックトレースを出力します。これは、コードの実行フローを理解するのに役立ち、特定のログメッセージがどこから来ているかを特定するのに便利です。

function foo() {
  console.trace();
}

function bar() {
  foo();
}

bar();

これは、console.traceが呼ばれるまでの関数呼び出しのシーケンスを示すスタックトレースをコンソールに出力します。出力はこのようになるでしょう：

7️⃣console.dir

console.dirメソッドを使用して、オブジェクトのプロパティを階層形式で出力します。これは、オブジェクトの構造を探索するのに便利で、すべてのプロパティとメソッドが見えます。

const obj = {
  id: 1,
  name: 'John Doe',
  address: {
    street: '123 Main St',
    city: 'New York',
    zip: 10001
  }
};
console.dir(obj);

これはobjオブジェクトの属性を階層形式で出力し、オブジェクトの構造とすべてのプロパティと値が見えるようになります。

8️⃣console.count

console.countメソッドを使用して、特定のログメッセージが出力される回数をカウントします。これは、特定のコードパスがどのくらいの頻度で実行されているかを追跡するのに使えますし、コードのアクセスが集中しているスポットを特定するのにも役立ちます。

function foo(x) {
  console.count(x);
}

foo('hello');
foo('world');
foo('hello');

これはコンソールに文字列「hello」とその後ろに数字1を出力します。次に「world」と数字1を出力します。最後に、2回呼ばれているので、再び「hello」と数字2を出力します。

9️⃣console.clear

console.clearメソッドを使用してコンソール出力をクリアします。これは、デバッグ出力を整理してすっきり保ち、関心のある情報に集中しやすくするのに役立ちます。

console.log('Hello world!');
console.clear();
console.log('コンソールをクリアした後にこのログメッセージが表示されます。');

これはコンソールに「Hello world!」と出力してから、(コンソールがクリアされているので)空行を挟んで、「コンソールをクリアした後にこのログメッセージが表示されます」と出力します。

1️⃣0️⃣console.profile

console.profileおよびconsole.profileEndメソッドを使用して、コードの性能を測定します。これは、パフォーマンスのボトルネックを特定し、コードを速度と効率のために最適化するのに役立ちます。

console.profile('MyProfile');

// パフォーマンスを測定したいコードを実行
for (let i = 0; i < 100000; i++) {
  // 何かをする
}

console.profileEnd('MyProfile');

これはconsole.profileとconsole.profileEndの呼び出しの間のコードブロックに対するプロファイリングを開始し、console.profileEndが実行されたときに結果をコンソールに出力します。出力にはコードの実行にかかった時間と、他のパフォーマンス関連情報が含まれます。

💭 最終的な考え

2023年になっても、console.logで満足することはありません。JavaScriptコンソールオブジェクトには、もっと強力で価値のあるツールやテクニックがたくさんあります。

console.tableからconsole.timeにいたるまで、これらのメソッドやトリックはデバッグ出力の品質と可読性を向上させ、コード内の問題の特定と修正をより簡単にするのに役立ちます。

だから、2023年にデバッグスキルをレベルアップしてこれらのテクニックを試してみませんか？コード（そしてあなた自身の精神状態）が感謝するでしょう。

あ、それと…

🌎 繋がりましょう！

• Twitter: @thenaubit
  
  こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
  https://dev.to/naucode/why-using-just-consolelog-in-2023-is-a-big-no-no-2429