【初心者向け】JavaScriptのconsole.log() ってなんだろう？
はじめに
JavaScriptをつかって、DOMを操作して動的な変更を加えている中で、そもそもconsole.log()を使っているが、これってどんな目的で何に使われているのか疑問に思ったため、ここにメモとしてまとめていきます。
※この記事はあくまで初心者のメモとして見ていただけますと幸いです。
コンソールとは
コンソールはブラウザの開発者ツールにあり、ウェブページ上では見えない情報も確認できます。
用途は主に以下の2つがあります。
コンソールには、ログに記録されたメッセージを表示することとJavaScript を実行することの 2 つの主な用途があります。
※https://developer.chrome.com/docs/devtools/console?hl=ja より引用
コンソールの目的
コンソールの主な目的は、開発者とウェブページの間で情報をやり取りする窓口として機能することで、プログラムの中で何が起きているかを確認することです。
コンソールは、主にウェブ開発者がJavaScriptコードの実行状況を確認し、デバッグや情報表示などを行なうためのツールです。ブラウザの開発者ツールの一部として提供されています。
Google Chromeを使用すると、開発者ツールに以下のような画面を確認できます。
ここで、自分の書いたコードがどう動くかを確認することができます。
例えば、以下のコードを記述したとします。
let animalH2 = document.createElement("h2");
animalH2.innerHTML = "dog";
console.log(animalH2.innerHTML); // ここが出力される
実際にコンソールを確認すると以下のようになります。
このように、ブラウザ上で動作するJavaScriptのコード（変数や関数など）の挙動をコンソールを使って確認することができます。
※コンソールの出力は開発時に確認するためのもので、本番環境では不要なログは削除するのが一般的のようです。
consoleの正体はオブジェクト
console.log();という形から、これは実はオブジェクトのメソッドを使っているのでは？
と思い、調べた結果、このように記述されていました。
console オブジェクトは、ブラウザーのデバッグコンソール（例えば Firefox のウェブコンソール）へのアクセスを提供します。...
※https://developer.mozilla.org/ja/docs/Web/API/console より引用
つまり、console はブラウザが提供する特別なオブジェクトで、log() は console オブジェクトが定義しているメソッドだということです。
console.log() に渡された値は、JavaScriptエンジンによって処理され、ブラウザの内部ログシステムを介して開発者ツールのコンソールに表示されます。
これによって、コンソールにログとして出力するという動作が実現しているようです。
consoleオブジェクトのメソッドを一部まとめ
console.error()
JavaScriptコードに構文エラーや実行時エラーが発生した場合、コンソールにエラーメッセージが表示されます。これにより、問題の箇所を特定しやすくなります。
console.warn()
推奨されない書き方や潜在的な問題があるコードに対して、ブラウザが警告を表示することがあります。
コンソール出力するメリット
1. デバッグの効率化
コードが意図した通りに動作しない場合、変数の値が期待通りか、特定の関数が呼び出されているかなどをコンソールに出力することで、問題の原因を素早く特定できます。
2. プログラムの動作確認
複雑な処理や非同期処理の場合、どのタイミングでどのコードが実行されているかを確認するために、処理の節目ごとにメッセージを出力して、プログラムのフローを可視化できます。
3. 情報の共有
チーム開発において、特定の変数やオブジェクトの構造をコンソールに出力することで、他の開発者とコードの状態を共有しやすくなります。
要するに、コンソールは開発者がコードを「覗き見」するための強力なツールであり、バグの発見やコードの理解を劇的に効率化します。
まとめ
この記事では、console.log() とはそもそも何だろう？という疑問から、調べた結果をまとめてみました。
これは、JavaScriptで開発するときの「のぞき窓」みたいなもので、コードの中で何が起きているか、どんな値が入っているかを確認できる便利ツールだということがわかりました。
また、普段はなんとなく書いていましたが、実は
- console はブラウザが提供するオブジェクト
- log() はそのメソッド
- 呼び出すと、JavaScriptエンジン → ブラウザ内部 → 開発者ツールのコンソールへ、情報が渡って表示される
という仕組みになっていることもわかりました。何かの参考になれば幸いです。
最後までお読みいただき、ありがとうございました。
参考URL
Discussion