HTML DOMのconsole.info()メソッドとは？構文と使い方を実例付きで解説
console.info()メソッドの概要
HTML DOMのconsole.info()メソッドは、情報メッセージをコンソールに出力するためのメソッドです。デバッグやテストの際に非常に便利で、開発者がコードの動作状況を確認したいときに活用されます。
なお、FirefoxやChromeなど一部のブラウザでは、このメソッドで出力されたメッセージの横に、青色の小さな「i」アイコンが表示されるという特徴があります。これにより、通常のconsole.log()による出力と視覚的に区別しやすくなっています。
構文
console.info()メソッドの基本構文は以下のとおりです。
console.info( message )
messageは必須パラメータで、文字列（string）またはオブジェクト（object）を指定できます。指定した内容がそのままコンソールに表示されます。
サンプルコード
ここでは、実際にconsole.info()メソッドを使用した具体例を見ていきましょう。
<!DOCTYPE html>
<html>
<body>
<h1>console.info() Method</h1>
<p>F12キーを押すと、コンソール上でメッセージを確認できます。</p>
<button onclick="printInfo()">INFO</button>
<script>
function printInfo(){
console.info("Information is printed");
console.info("This is some other information ");
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
INFOボタンをクリックしてから、ブラウザのコンソール画面を開くと、以下のように出力されているのが確認できます。
コードの解説
このサンプルコードでは、まずユーザーがクリックするとprintInfo()関数が実行されるINFOボタンを作成しています。
<button onclick="printInfo()">INFO</button>
そして、printInfo()関数の内部にはconsole.info()メソッドが含まれており、呼び出されると情報メッセージがコンソールに出力されます。
function printInfo(){
console.info("Information is printed");
console.info("This is some other information ");
}実行結果のスクリーンショットにもあるように、console.info()で出力されたメッセージの横には「i」アイコンが付いて表示されます。これにより、どのメッセージが情報として出力されたものなのかが一目でわかるようになっています。
まとめ
console.info()メソッドは、単なるログ出力ではなく「情報」として明示的にメッセージを残したい場合に役立ちます。デバッグ時にはconsole.log()との使い分けを行うことで、コンソールの出力を整理し、より読みやすい形で動作を検証できるでしょう。
-
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は文字列型の必須パラメータで、生成