日帰り学習 JavaScript API: コンソール API

JavaScript には、プログラミングを楽しく興味深いものにする API が大量に組み込まれています。しかし、本当のことを言うと、そのうちの何個が実際にその可能性を最大限に活用しているでしょうか?今後 30 日間 にわたって、これらの API について詳しく説明し、API の概要や見逃されている優れた機能について説明します。基本的なものからより高度なものまで、その過程で新しいトリックを習得していきます。

JavaScript API に圧倒されていませんか?それとも、何か新しいことを学ぶためにここに来ただけですか?いずれにせよ、このシリーズはあなたのためのものです。

今日は、デバッグをずっと手伝ってきた API、コンソール API から始めます。確かに、以前にも console.log() を使用したことがありますが、それ以外にもできることはたくさんあります。その隠されたトリックのいくつかを明らかにしてみましょう!

コンソール API とは何ですか?

コンソール API は、データのデバッグ、ログ記録、視覚化を容易にする非常に便利なメソッドのコレクションです。

しかし、正直に言って、あなたはおそらくすべてのことに console.log() を使用することにこだわっているでしょう。この API でできることはさらにたくさんあるため、その習慣から抜け出す時期が来ました。

これまで見逃していた素晴らしいものをいくつか紹介します:

コンソール API でできる素晴らしいこと

1. テーブルにデータを表示

ログが意味の分からないただの混乱したテキストであると感じたことはありますか? console.table() があなたをサポートします。

現在のログはおそらく次のようになります:

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);

結果:

それでは、それを整理しましょう:

console.table(fruits);

結果:

ずっと良いですよね？読みやすくなり、データが一目で理解できるようになりました。

2. console.assert() による冗長な If ステートメントの記述をやめる

エラーを記録するためだけに if ステートメントを 12 個も書いた人は手を挙げてください。まあ、そんなことはやめてください！ console.assert() は窮地を救うためにここにあります。

これの代わりに:

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

これを試してください:

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

条件が false の場合、メッセージはログに記録されます。とてもシンプルですよね?

3. コードのパフォーマンスを測定

コードのブロックの実行にどれくらいの時間がかかるか知りたいですか? console.time() と console.timeEnd() に挨拶します。

パフォーマンスを測定する方法は次のとおりです:

console.time("Loop Timer");
for (let i = 0; i 



結果:


 

アプリの速度を低下させている原因を特定できるようになりました!

  
  
  4. ブロックが実行される回数を数える


コードがどれくらいの頻度で実行されるか考えたことはありますか?特にコードが複雑になると、手動で追跡するのが難しくなることがあります。そこで console.count() が役に立ちます。  

次のシナリオを想像してください:



const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);




一見すると、「A」で始まる名前の挨拶が何回実行されるかを把握するのは簡単かもしれません。しかし、ロジックが拡張されると、道がわからなくなる可能性があります。  

ここで、console.count():
 を使って話を単純化しましょう。


console.table(fruits);




何が起こっているかは次のとおりです: 

• 「A」で始まる名前が挨拶されるたびに、console.count() はカウントをインクリメントし、「A で始まるユーザーに挨拶」というラベルを付けます。
• console.countReset() でリセットした後、カウントは新たに開始されます。

推測したり、コード全体に print ステートメントを追加したりする必要はもうありません。たった 1 行で完了です。

5. CSS を使用してログをスタイル設定します

場合によっては、ログをポップする必要があることがあります。 %c を使用して CSS でログのスタイルを設定し、目立たせます。

例:

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

結果:

エラーや警告を強調表示したり、ログを楽しんだりできます。

6. 関連ログをグループ化する

果てしなく続くログをスクロールすることにうんざりしていませんか? console.group() を使用して、関連するログをグループ化します。

これが例です:

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

出力:

console.time("Loop Timer");
for (let i = 0; i 



<p>console.groupCollapsed() を使用して、デフォルトでグループを折りたたんだままにすることもできます。  </p>

<h2>
  
  
  <strong>まとめ</strong>
</h2>

<p>コンソール API は、あなたが思っているよりもはるかに強力です。テーブルからパフォーマンス測定、カウンター、スタイル設定、グループ化まで、ほぼすべてのデバッグ シナリオに対応するツールがあります。</p>

<p>これは、<strong>30 日間の JavaScript API</strong> シリーズの 1 日目にすぎません。これが役に立ったと思われた場合は、後で参照できるようにこの記事をブックマークして、必ず閲覧してください。学ぶべきことはまだたくさんあります。   </p>

<p>それで、何かご質問がございましたら、お気軽に Twitter の @sprucekhalifa までメッセージをください。さらに詳しい情報や最新情報を入手するには、忘れずにフォローしてください。コーディングを楽しんでください! </p>


          

            
        

以上が日帰り学習 JavaScript API: コンソール APIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。