こんにちは、さるまりんです 🐒🔧
JavaScriptで開発していると、ほぼ毎日のように書いているもの。
console.log()とりあえず出す。
とりあえず見る。
とりあえず安心する。
でもある日、ふと思いました。
「……これ、読みにくくない？」
今回は、
console.log()が読みにくくなっていた話と、ちょっとした改善
についてまとめてみます。
とりあえず stringify していた
よくやっていたのがこれです。
console.log(JSON.stringify(user))ちゃんと全部出るし、
「文字列になっている＝安全そう」な気もします。
でもこれ、だんだんツラくなります。
① 展開できない
console.log(user)なら、DevToolsでオブジェクトを開いて
中身をパカパカ展開できます。
……と言いたいところですが、
展開できないケースもあります。
オブジェクト内にメソッドが多い場合、
値よりも関数がずらっと並んでしまうこともあります。
それでも、
console.log(JSON.stringify(user))だと、ただの文字列が出力されるだけです。
- キーをクリックできない
- ネスト構造が見づらい
- 差分が追いにくい
“見えているようで、実は見えていない”
状態でした。
② 循環参照で落ちる
Vueでありがちです。
const a = {}
a.self = a
console.log(JSON.stringify(a))
// TypeError: Converting circular structure to JSONリアクティブオブジェクトは、
内部で循環参照を持つことがあります。
「ログ出したいだけなのにエラー」
これはちょっと悲しい。
③ 差分がわかりにくい
文字列になると、
{"id":1,"name":"Taro","active":true}一見わかりやすいけれど、
- どこが変わったのか
- どのキーが増えたのか
目で追うのが地味にしんどい。
ファイルに落として diff をかけるのも面倒ですよね。
DevToolsのオブジェクト表示のほうが
実はずっと優秀です。
やっぱり DevTools はそのために用意されているもの。
ちゃんと便利なんですよね。
じゃあどうする？
① 基本はそのまま出す
console.log(user)これだけで十分なことが多いです。
DevToolsの機能をちゃんと信頼する。
② 見やすくしたいときは整形する
どうしても文字列で見たいなら：
console.log(JSON.stringify(user, null, 2))第2引数は replacer、
第3引数はインデント。
これで読みやすくなります。
ただしこれは
ログ保存や通信確認向けです。
③ 配列なら console.table()
これ、かなり便利です。
console.table(users)配列のオブジェクトが
テーブル形式で出ます。
- id
- name
- active
みたいな構造が一発で見える。
「なんで今まで使ってなかったんだろう」
と思いました。
④ ラベルを付ける
地味ですが効きます。
console.log("user:", user)
console.log("filter state:", filter)あとでログが大量に並んだとき、
かなり助かります。
⑤ groupでまとめる
console.group("API response")
console.log("status:", status)
console.log("data:", data)
console.groupEnd()コンソールが折りたためる。
これ、思ったより便利で気持ちいいです。
ちょっとした設計の話
今回あらためて思ったのは、
ログも設計なんだな
ということ。
- とりあえず出す
stringifyして安心する- 増えて読めなくなる
この流れ、何度もやっていました。
console.logは悪くない。
でも「どう出すか」は、少し考えてもいい。
デバッグしやすいログは、
未来の自分を助けます。
まとめ
今回の気づき：
- stringifyは万能じゃない
- まずはオブジェクトのまま出す
- console.tableは最高
- groupは整理に効く
- ログも設計
忙しいときほど、
ちょっとした改善が効いてきます。
console.logが読みにくいな…と思ったら、
少しだけ見直してみると、気持ちが楽になります。
読んでくださってありがとうございました。
それではまた 🐒🔧