console.log の先へ
table、group、warn、error、assert を使います。
「console.log の先へ」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
log だけではない
console オブジェクトには、console.log 以外にも多くのメソッドがあります。それぞれ異なる意図を伝え、役立つさまざまな形式で出力を表示できます。
console.log("plain message")
console.info("informational")console.warn
console.warn は警告を出力します。ブラウザーでは黄色で強調表示され、致命的ではないものの注意が必要な問題であることを示します。
console.warn("This API is deprecated")console.error
console.error はエラーを報告します。独自のスタイルで表示され、ブラウザーでは問題の場所を特定するのに役立つスタックトレースも含まれます。
console.error("Failed to load data")console.info と debug
console.info と console.debug は log と同様に動作しますが、重要度を伝えます。ツールでは、これらのレベルに基づいてメッセージを絞り込めます。
console.info("Server started")
console.debug("Cache size is 42")console.table
console.table は配列やオブジェクトを整形された表として表示するため、構造化されたデータを単純なログよりはるかに簡単に確認できます。
const users = [
{ name: "Ann", age: 30 },
{ name: "Bob", age: 25 }
]
console.table(users)console.group
console.group は、インデントされた折りたたみ可能なセクションを開始します。その後に記録されたメッセージは、console.groupEnd を呼び出すまで入れ子になります。
console.group("User details")
console.log("Name: Ann")
console.log("Age: 30")
console.groupEnd()入れ子になったグループ
グループは互いに入れ子にして階層を表現できます。階層が1つ深くなるごとに、インデントも追加されます。
console.group("Order")
console.log("id: 1")
console.group("Items")
console.log("Book")
console.groupEnd()
console.groupEnd()console.assert
console.assert は、最初の引数が falsy の場合にだけエラーを記録します。実行を停止せずに、前提が崩れていることをすばやく示す方法です。
const total = 10
console.assert(total > 0, "total should be positive")
console.assert(total > 100, "total is unexpectedly small")console.count
console.count は、ラベル付きの行が何回実行されたかを記録します。予期しない繰り返し呼び出しを見つけるのに便利です。
function ping() {
console.count("ping")
}
ping()
ping()
ping()console.time
console.time と console.timeEnd は、コードの一部にかかった時間を測定し、一致するラベルとともに経過時間を出力します。
console.time("loop")
let sum = 0
for (let i = 0; i < 1000; i++) { sum += i }
console.timeEnd("loop")適切なメソッドを選ぶ
問題には warn と error、構造化されたデータには table、関連するログの整理には group、前提の検証には assert を使用してください。明確なログはデバッグを効率化します。
console.warn("low memory")
console.table([{ id: 1 }, { id: 2 }])確認問題
console のメソッドに関する知識を確認しましょう。
まとめ
まとめ: console には log 以外にも豊富なメソッドがあります。
- warn と error は重要度を示します
- table は構造化されたデータを表示します
- group は入れ子になったログを整理します
- assert は条件が成立しなかったことを示します
console.table([{ a: 1 }, { a: 2 }])
console.warn("done")よくある質問
「console.log の先へ」レッスンは無料ですか？
はい。「console.log の先へ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「console.log の先へ」で何を学びますか？
table、group、warn、error、assert を使います。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「console.log の先へ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- console.log の先へ
- ブレークポイントを設定する
- コードをステップ実行する
- スタックトレースを読む