JavaScript

console.logだけじゃない！「console」の関数まとめ

JavaScriptにおいて、プログラムの動作チェックや検証作業で使い倒されている「console.log()」という命令。

呪文のように認知している方も多いですが、実はconsole.log()は「console」というオブジェクトによって定義されている関数なのです。

今回は、そんなconsoleオブジェクトについて、log()以外にどういった関数があるかをご紹介していきます。

そもそも「console」って何？

console（コンソール）は、一般的にCUIなどで操作するようなツール（コマンドプロンプトとか）を指しますが、ここでいうコンソールは「WEBブラウザなどで表示されるデバッグ用のコマンドライン」を指します。

要するに、開発者ツールの一種です。

ブラウザのコンソールには、console.log( )などの関数を用いてデータを表示したり、逆にJavaScriptのコードなどを書き込んだりすることができます。

コンソールの開き方

コンソールの表示方法を知らない方もいるかもしれないので、ここでは軽くコンソールの開き方（Google Chromeの場合）を説明しておきます。

まずは、WEBページで画面を右クリックし、表示されたメニューから[検証]を選択してください。

以下のショートカットキーを用いても可。

• F12キー
• Fn + F12キー
• ⌘ + option + i

上記の工程を終えると、以下のような画面で表示されるはずです。

最後に、画面上部のタブから[コンソール]を選択すれば、コンソールのインターフェースが表示されます。

consoleの関数

では、consoleオブジェクトにある関数をまとめてご紹介していきます。

ただし、実用性がない、あるいは使い勝手の悪い関数は省いています。全ての関数を知りたい方は、以下のMDNページで確認してみてください。

console – Web API l MDN

また、掲載する実行結果の画像は全てGoogle Chromeのものです。実行結果は、ブラウザによって異なります。

console.log( )

console.log()は、alert()と肩を並べる汎用関数として知られています。正直、console.log以外の関数を使用する意味があまりないほど、使い勝手の良い関数です。

恐らく知らない方はいないほどポピュラーな関数なので、ここでは詳しく解説しないでおきましょう。

【使用例】

console.log("logです。");

// 実行結果
// > logです。

console.error( )

console.error( )は、その名の通り「エラー・不具合の発生」をコンソールで通知するための関数です。

初心者のうちにトラウマになりがちなUncaught SyntaxErrorなどのエラーメッセージも、console.error( )で出力されるメッセージの一つです。

【使用例】

console.error("致命的なエラー： 内容がわかりにくいです。");

console.logとの大きな違いは、配色が赤色中心になり、明確にエラーメッセージであることがわかるようになっている点です。

割と使い勝手の良い関数で、例えば「自作した関数の例外処理を注意する」という使い道があります。console.logでもエラー通知自体はできますが、単なる検証用の出力なのか、エラーメッセージとして出力しているのか、はっきりとしません。

console.error( )でエラーメッセージを出力していれば、他者が独自関数で例外的な処理を実行した場合に、コンソールを確認してすぐにミスを察知できるようになります。

共同開発でプログラムを使いまわす場合などに重宝するのではないでしょうか。

console.warn( )

console.warn( )は、警告文を表示するための関数です。

console.logより重要度が高く、console.errorよりも重要度が低い内容を伝えたい場合に使うのが良いでしょう。

【使用例】

console.warn("警告： 内容は理解できていますか？");

黄色をベースとした配色で、いかにも「警告」という感じですよね。

エラーメッセージとして扱うというよりは、現在実行している処理に何かしら心配事がある（不具合の可能性がある）場合にメッセージを出力するのに適しています。

また、ライブラリ・フレームワークにおいては、他のバージョンのプログラムを宣伝・紹介する際にも使用されます。

console.table( )

console.table( )は、配列・オブジェクト（Json等）のデータを表形式で出力できる関数です。

コンソールには無機質なメッセージを表示することが多いですが、この関数では単にデータを表示するだけでなく、表として整形したものを見やすく表示してくれるのがポイント。

【使用例】

let array = ["apple", "orange", "banana"];

let json = {"id": 10, "name": "user", "memo": "so fun!"};

// 配列を出力
console.table(array);

// 連想配列を出力
console.table(json);

どこにどのようなデータがあるのか、非常にわかりやすく表示されています。

配列やオブジェクトのデータはconsole.logなどでも出力することはできますが…

同じデータを表示しても、table関数で表示したときと比べて明らかに可読性が下がっていますよね。

こういったデータの内容をコンソールで確認したいケースは多々あるため、この関数をうまく扱うことで開発作業をより円滑に進められるようになりそうです。

まとめ

console.logばかりが注目されがちですが、error( )やtable( )など、consoleオブジェクトには使い道がありそうな関数が他にも用意されています。この記事の内容を参考に、皆さんの開発作業がより円滑なものになれば幸いです。