HTML DOMのconsole.groupEnd()メソッドとは？使い方とサンプルコードを徹底解説
HTML DOMのconsole.groupEnd()メソッドは、コンソール上で表示されるメッセージグループの「終了」を示すために使用されるメソッドです。このメソッドを呼び出すことで、現在開いているメッセージグループから抜け出し、以降の出力はグループの外側に表示されるようになります。
構文
console.groupEnd()メソッドの構文は以下の通りです。
console.groupEnd()
引数は不要で、非常にシンプルに使えます。また、開いているメッセージグループが存在しない状態で呼び出しても、エラーにはならない点も覚えておきましょう。
サンプルコード
それでは、console.groupEnd()メソッドの具体的な使用例を見ていきましょう。
<!DOCTYPE html>
<html>
<body>
<h1>console.groupEnd() メソッド</h1>
<p>F12キーを押して、デベロッパーツールのコンソール画面を開いてください。</p>
<button type="button" onclick="groupMessage()">GROUP（グループ開始）</button>
<button type="button" onclick="EndGroup()">END GROUP（グループ終了）</button>
<script>
function groupMessage(){
console.group();
console.log("このメッセージはグループ内に表示されます！");
console.log("このメッセージもグループ内に表示されます！");
}
function EndGroup(){
console.groupEnd();
console.log("これでグループの外に出ました");
console.log("このメッセージはグループ外に表示されます！");
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
「GROUP」ボタンをクリックし、デベロッパーツールのコンソール画面を確認すると、2つのメッセージが1つのグループとしてまとめられて表示されていることがわかります。
続いて「END GROUP」ボタンをクリックすると、以降のメッセージがグループの外側に表示されるようになります。
コードの解説
このサンプルでは、以下のような仕組みで動作しています。
まず、「GROUP」と「END GROUP」の2つのボタンを用意し、クリックされたときにそれぞれ groupMessage() 関数と EndGroup() 関数が実行されるようにしています。
<button type="button" onclick="groupMessage()">GROUP（グループ開始）</button> <button type="button" onclick="EndGroup()">END GROUP（グループ終了）</button>
groupMessage() 関数の中では、console.group() メソッドが呼び出されています。これにより、この行より後に出力されるすべてのメッセージが、1つのメッセージグループとして階層的にまとめられます。
function groupMessage(){
console.group();
console.log("このメッセージはグループ内に表示されます！");
console.log("このメッセージもグループ内に表示されます！");
}一方、EndGroup() 関数内の console.groupEnd() メソッドは、それ以降の出力をグループの外へ切り替える役割を担います。そのため、この行以降に記述されたメッセージは、通常どおりグループ外に表示されます。なお、直前に開かれたメッセージグループが存在しなかった場合でも、エラーがスローされることはありません。
function EndGroup(){
console.groupEnd();
console.log("これでグループの外に出ました");
console.log("このメッセージはグループ外に表示されます！");
}補足：関連するコンソールメソッド
メッセージグループを扱う際には、以下の関連メソッドもあわせて覚えておくと便利です。
- console.group()：新しいメッセージグループを開始します。
- console.groupCollapsed()：折りたたまれた状態で新しいグループを開始します。
- console.groupEnd()：現在のメッセージグループを終了し、出力位置を一段階上に戻します。
これらを組み合わせることで、大量のログを整理して読みやすい形でコンソールに出力できます。デバッグ作業の効率化にも役立つので、ぜひ活用してみてください。
-
HTML DOM console.groupCollapsed()メソッドの使い方をわかりやすく解説
HTML DOMのconsole.groupCollapsed()メソッドは、折りたたまれた（collapsed）状態のメッセージグループの開始を指定するためのメソッドです。このメソッドを呼び出した後にコンソールへ出力したメッセージは、すべて折りたたまれたグループ内に表示されます。構文console.groupCollapsed()メソッドの構文は以下のとおりです。console.groupCollapsed(label)引数のlabelには、グループに表示するラベル名を指定します。ラベルは省略可能です。サンプルコードここで、console.groupCollapsed()メソッドの具体的な使
-
HTML DOMのcreateEvent()メソッドとは？使い方を徹底解説
HTML DOMのcreateEvent()メソッドは、イベントオブジェクトを生成するためのメソッドです。生成するイベントの種類は引数で指定します。なお、createEvent()で作成したイベントは、使用する前に必ず初期化する必要があります。また、作成したイベントをHTML要素へ通知（ディスパッチ）するには、対象のノードに対してdispatchEvent()メソッドを呼び出します。 構文 HTML DOM createEvent()メソッドの基本構文は以下のとおりです。 document.createEvent( eventType ) eventTypeは文字列型の必須パラメータで、生成