JavaScriptでconsole.log()を使うのはやめよう

>本記事は、[Harsha Vardhan](https://harshaktg.medium.com/)氏による「[Stop Using console.log() In JavaScript](https://medium.com/javascript-in-plain-english/stop-using-console-log-in-javascript-d29d6c24dc26)」（2020年10月25日公開）の和訳を、著者の許可を得て掲載しているものです。

# JavaScriptでconsole.log()を使うのはやめよう

>もっと良い選択肢がある

![Image for post](https://miro.medium.com/max/700/0*t6SE511h7v_N1ask)

>Photo by [Hugo Rocha](https://unsplash.com/@hugorrocha?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=medium&utm_medium=referral)

##はじめに

あなたは、`console.log()`をコードのデバッグによく使うJavaScript開発者ですか？それには何の問題もありません。でも、知らないかもしれませんが、`console`オブジェクトには他にも驚くべきメソッドが沢山あります。この記事では、その効果的な使用方法について説明したいと思います。

## consoleオブジェクトを使用する理由

JavaScript の `console`オブジェクトは、ブラウザのデバッグコンソールにアクセスし、コードで使用した変数の値を出力できます。多くの場合、正しい値がコードに渡されているかデバッグするために使用します。

ほとんどの開発者は、`console.log()`を使用してブラウザコンソールに値を出力したことがあると思います。`log`は、`console`オブジェクトの1メソッドに過ぎません。非常に便利なメソッドが他にもいくつかあります。

## 1. console.log()

このメソッドは主に、渡された値をコンソールに表示するために使用します。`log()`の引数は、String（文字列）、Array（配列）、Object（オブジェクト）、Boolean（真偽値）など、どのような型でも使用できます。

####例

```javascript
console.log('JavaScript');
console.log(7);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3]);
console.log({a: 1, b: 2, c: 3});
```

![Image for post](https://miro.medium.com/max/351/1*L0vaz4jpLViLIJ-oXr2o6Q.png)
出力

## 2. console.error()

このメソッドはコードをテストする時に便利です。ブラウザコンソールにエラーログを出力するために使用します。デフォルトでは、エラーメッセージは赤色で強調表示されます。

####例

```javascript
console.error('Error found');
```

![Image for post](https://miro.medium.com/max/346/1*bLNgJWF1wGx1NRd53mTYPw.png)
出力

## 3. console.warn()

このメソッドはコードのテストにも使用します。通常、コンソールに警告ログを出力するのに役立ちます。デフォルトでは、警告メッセージは黄色で強調表示されます。

####例

```javascript
console.warn('Warning!');
```

![Image for post](https://miro.medium.com/max/349/1*z61it_h7bxHF84T_DCATcA.png)
出力

## 4. console.clear()

このメソッドはコンソールをクリアするために使用します。コンソールがメッセージやエラーで一杯の時によく使われます。コンソールがクリアされ、コンソールに「Console
was cleared」というメッセージが表示されます。

####例

```javascript
console.clear()
```

![Image for post](https://miro.medium.com/max/348/1*xsLNlkO-m9L0KP3TF81MSQ.png)
出力

## 5. console.time() and console.timeEnd()

この二つは併用するメソッドです。ブロックや関数の処理時間を知りたいときは、メソッド`time()`と`timeEnd()`を使用します。どちらも引数として文字列を取ります。時間を計測するために、二つのメソッドには同じ文字列を使用してください。

####例

```javascript
console.time('timer');

const hello = function(){
  console.log('Hello Console!');
}

const bye = function(){
  console.log('Bye Console!');
}

hello(); // calling hello();
bye(); // calling bye();

console.timeEnd('timer');
```

![Image for post](https://miro.medium.com/max/346/1*S63BR8aOlGfYfAhgaR9TJw.png)
出力

## 6. console.table()

このメソッドは、可読性を上げるためコンソールに表形式で出力します。配列やオブジェクトを自動的に表形式にします。

####例

```javascript
console.table({a: 1, b: 2, c: 3});
```

![Image for post](https://miro.medium.com/max/470/1*emG1EeptLSHsLbR2ulPfKg.png)
出力

## 7. console.count()

このメソッドは、呼び出された回数を出力します。ループ内で使用して、特定の値が実行された回数を確認できます。

####例

```javascript
for(let i=0; i<3; i++){
  console.count(i);
}
```

![Image for post](https://miro.medium.com/max/346/1*hfucVhBEtQBFjgzTv3QoFg.png)
出力

注）コメント欄で＠vf8974様より助言をいただきましたので、こちらに関しましては、＠vf8974様のコメントをご参照いただければ幸いです。

## 8. console.group() and console.groupEnd()

これらのメソッド`group()`と`groupEnd()`は、出力をブロックにグループ化し、インデントして表示します。`time()`や`timeEnd()`と同様に、同じ値のラベルも使用できます。グループを展開したり、折り畳んだりできます。

####例

```javascript
console.group('group1');
  console.warn('warning');
  console.error('error');
  console.log('I belong to a group');
console.groupEnd('group1');
console.log('I dont belong to any group');
```

![Image for post](https://miro.medium.com/max/349/1*Q_Ok_EnFSioEiNES7vpq3A.png)
出力

## おまけ：ログのスタイル

コンソールログにスタイルを追加して、ログを装飾することもできます。とても簡単です。`log()`の第一引数を**%c**で始め、第二引数としてCSS スタイルを追加するだけです。スタイルはログの%cを置換します。

####例

```javascript
const spacing = '10px';
const styles = `padding: ${spacing}; background-color: white; color: red; font-style: italic; border: 1px solid black; font-size: 2em;`;
console.log('%cI am a styled log', styles);
```

![Image for post](https://miro.medium.com/max/345/1*GgIhLJQK-_yV2FdLvV-u6A.png)
出力

##まとめ

`console`オブジェクトはコードのデバッグにとても役立ちます。我々開発者は、`log`だけをよく使います。`console`オブジェクトをフル活用していきましょう。デバッグがしやすくなり、ブラウザログが分かりやすく表示されるように。この記事が参考になれば幸いです。

お読み頂きありがとうございました！

##翻訳協力
Original Author: [Harsha Vardhan](https://harshaktg.medium.com/)
Original Article: [Stop Using console.log() In JavaScript](https://medium.com/javascript-in-plain-english/stop-using-console-log-in-javascript-d29d6c24dc26)
Thank you for letting us share your knowledge!

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。
選定担当: Juri Kimoto
翻訳担当: @gracen
監査担当: -
公開担当:@gracen

##ご意見・ご感想をお待ちしております
今回の記事は、いかがだったでしょうか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。[Twitter](https://twitter.com/BabyDegu?lang=ja)でもご意見を受け付けております。
皆様のメッセージをお待ちしております。