JavaScriptのコンソールについて、初心者の方でも分かりやすく解説します。この記事を読んで、コンソールを使えるようにしましょう。
JavaScriptの学習を始めたばかりの方は「コンソール」という言葉は聞いたことがあっても、よく分からない方も多いのではないでしょうか？本記事では、初心者の方に向けてJavaScriptのコンソールについて解説しているので、学習の役に立てて下さい。
JavaScriptのコンソールとは？
JavaScriptのコンソールとは、入出力ウィンドウのことを指します。
これだけだと学習を始めたばかりの方は理解が難しいかもしれませんが、まずはパソコンと意思疎通するための場所だと考えておけば良いでしょう。
Chromeからの確認方法
まずはコンソール画面の表示方法を説明します。
- GoogleChromeを起動します。
- 右クリックの「検証」から、デベロッパーツールを開きます
- 「F12キー」または「Option + Command + I」で開くことも可能です。
- 以下のような画面が表示されるので、右上の「コンソール」をクリックします。※設定によってウィンドウの表示される場所が異なる場合があります。
- ウィンドウにメソッドを記入したり、変数の値などを表示することができます。
コンソールは何に使うの？
コンソールの機能の使いみちは、主に2つです。
- 正しい値が出力されているか確認する
- 不具合の原因を探す（デバック）
特にデバックを行うことでコードを修正するだけでなく、開発スピードを大幅に上げることができます。JavaScriptの操作に慣れてきたら、積極的に利用するようにしましょう。
コンソールで使えるメソッド紹介
コンソールにはメソッドがいくつかあります。
目的によってメソッドを使い分けることで複数のメソッドを設置した場合に、それぞれの情報が分かりやすくなるので作業効率があがります。今回は代表的なものを紹介するので、参考にしてみて下さい。
console.log
一番よく利用されるメソッドです。コンソール上で、どの変数の中身が表示されているのかを確認できます。
console.error
エラー発生時にコンソールに表示する内容を、赤くハイライトを表示することができます。
エラーが発生した時に分かりやすくなるので、コードのテストを行いたい時に便利です。
console.warn
エラーではないものの、アラートとして注意を促したい時に使用します。
黄色いハイライトで表示されるので、こちらもテストを行いたい時に便利です。
console.info
変数などのデータを情報として扱いたい場合に使用します。
青いiマークのアイコンが表示されます。
console.assert
引数が false の場合になった場合に限り、エラーを表示することができます。
console.clear
コンソールがメッセージやエラーでいっぱいになってしまった時、表示を削除するために使用します。
console.count
指定の内容を何回呼び出したか、カウントすることができます。
console.countResrt
「console.count」にてカウントした数値をリセットできます。
console.table
配列の中身を、表にして分かりやすく表示をします。