HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM console.groupCollapsed()メソッドの使い方をわかりやすく解説

HTML DOMのconsole.groupCollapsed()メソッドは、折りたたまれた（collapsed）状態のメッセージグループの開始を指定するためのメソッドです。このメソッドを呼び出した後にコンソールへ出力したメッセージは、すべて折りたたまれたグループ内に表示されます。

構文

console.groupCollapsed()メソッドの構文は以下のとおりです。

console.groupCollapsed(label)

引数のlabelには、グループに表示するラベル名を指定します。ラベルは省略可能です。

サンプルコード

ここで、console.groupCollapsed()メソッドの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>console.groupCollapsed() Method</h1>
<p>F12キーを押して、開発者ツールのコンソールでメッセージを確認してください。</p>
<button type="button" onclick="normMessage()">NORMAL</button>
<button type="button" onclick="CollMessage()">COLLAPSED</button>
<script>
    function normMessage(){
        console.log("Hello world!");
    }
    function CollMessage(){
        console.groupCollapsed();
        console.log("This message will be inside a collapsed group!");
        console.log("This message will also be inside a collapsed group!");
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような画面が表示されます。

NORMALボタンをクリックし、開発者ツールのコンソールを確認すると、次のようにメッセージがそのまま表示されます。

COLLAPSEDボタンをクリックし、開発者ツールのコンソールを確認すると、メッセージが折りたたまれたグループ内に表示されます。

コードの解説

このサンプルコードでは、クリックされたときにCollMessage()関数を実行する2つのボタン（NORMALとCOLLAPSED）を作成しています。

<button type="button" onclick="normMessage()">NORMAL</button>
<button type="button" onclick="CollMessage()">COLLAPSED</button>

normMessage()関数にはconsole.log()メソッドが含まれており、引数として渡された文字列やオブジェクトをそのままコンソールに表示します。

function normMessage(){
    console.log("Hello world!");
}

一方、CollMessage()関数内ではconsole.groupCollapsed()メソッドを呼び出しています。これにより、この呼び出し以降に出力されるすべてのメッセージが、折りたたまれたメッセージグループ内に表示されるようになります。デフォルトで展開された状態で表示されるconsole.group()メソッドとは異なり、メッセージは折りたたまれた状態でグループ化される点が特徴です。

function CollMessage(){
    console.groupCollapsed();
    console.log("This message will be inside a collapsed group!");
    console.log("This message will also be inside a collapsed group!");
}

折りたたまれたグループの見出しをクリックすると、グループ内のメッセージを展開して確認できます。デバッグ時に大量のログを整理したい場合などに、このメソッドは非常に便利です。

  1. HTML DOMのconsole.groupEnd()メソッドとは？使い方とサンプルコードを徹底解説

    HTML DOMのconsole.groupEnd()メソッドは、コンソール上で表示されるメッセージグループの「終了」を示すために使用されるメソッドです。このメソッドを呼び出すことで、現在開いているメッセージグループから抜け出し、以降の出力はグループの外側に表示されるようになります。構文console.groupEnd()メソッドの構文は以下の通りです。console.groupEnd()引数は不要で、非常にシンプルに使えます。また、開いているメッセージグループが存在しない状態で呼び出しても、エラーにはならない点も覚えておきましょう。サンプルコードそれでは、console.groupEnd()

  2. HTML DOMのcreateEvent()メソッドとは？使い方を徹底解説

    HTML DOMのcreateEvent()メソッドは、イベントオブジェクトを生成するためのメソッドです。生成するイベントの種類は引数で指定します。なお、createEvent()で作成したイベントは、使用する前に必ず初期化する必要があります。また、作成したイベントをHTML要素へ通知（ディスパッチ）するには、対象のノードに対してdispatchEvent()メソッドを呼び出します。 構文 HTML DOM createEvent()メソッドの基本構文は以下のとおりです。 document.createEvent( eventType ) eventTypeは文字列型の必須パラメータで、生成