javascriptのconsole.logの使い方【現役SEが紹介】

プログラミング

javascripのconsole.logって何なのかを知りたい。

どんなときに使用するのかな。

上記のお悩みを解決します。

■本記事の内容

本記事で以下の内容をお伝えします。

・javascriptのconsole.logの使い方
・console.logのいろいろな書き方
・console.logはデバッグでよく使用する

 

■本記事の信頼性

ささそらと
ささそらと

この記事を書いている私は、プログラミングを仕事として始めて10年以上ほど経ちます。今も現役のシステムエンジニアです。

javascriptのconsole.logについて解説していきます。

javascriptを使用する上でconsole.logの使い方を知っておくと何かと便利なときがあります
あまり実際のプログラミングのコードとして記載することはないかもしれませんが、コード作成中にはよく使用したりします。

javascriptのconsole.logの使い方

javascriptのconsole.logの使い方

では、javascriptのconsole.logの使い方についてお伝えします。

そもそもconsole.logとは?

console.logは、そのままですがコンソールにログを出力する関数になります。

コンソールはログを出力する場所のことだと思ってもらえたらよいです。
例えば、パソコンをお使いの方であればブラウザを表示している状態でF12を押すと、おそらく右側に開発者ツールの画面が開くかと思います。(Chromeの場合ですが)

 

ここにConsoleというタブを開けば、javascriptで書いたconsole.logの出力がここに表示されます。
他にコマンドプロンプトやターミナル等で実行した場合は、そのウィンドウに出力されます。

 

これらを使用することで、プログラミングの中で文字の出力などが可能になります。

console.logの書き方

次にどのように記載するか説明していきます。
書き方としては特に難しくなく以下のような形です。

console.log('ログ出力');

logの後ろにあるカッコ内に出力したいものを書くイメージです。
上記の場合ですと「ログ出力」の文字列が出力されます。

他にも変数の中身を出力することも可能です。

const test = 'ログ出力';
console.log(test);

上記のような感じで変数をカッコ内にいれることで変数に代入されている文字列が出力されます。
testという文字列が出力されるのではなく、「ログ出力」の文字列が出力されます。

 

シングルクォーテーションを囲むと文字列扱いになります。

console.logのいろいろな書き方

javascriptのconsole.logの使い方

特に書き方が多いわけではないですが、以下のようにカンマ区切りで複数入れることも可能です。

const test = 'ログ出力';
console.log('testのログ', test, 2);

例えばtestの変数の中身を出力する場合に、console.logにtestだけでなく上記のようにtestの変数のログだよとか、プログラムの行数を書いておくと後で分かりやすかったりします。

他にも文字列以外にもjavascriptで扱える型をそのまま設定することができるので、数値だったり、配列だったり、オブジェクトだったりも設定できます。

console.logはデバッグでよく使用する

javascriptのconsole.logの使い方

プログラムのログとして使用することもあるかもしれませんが、どちらかというとデバッグで使用することが多いです。

デバッグは何かと言いますと、プログラムを動かした際に発生した不具合(バグ)を修正する作業のことをいいます。

 

実際にプログラミングをして頂くと分かるかと思いますが、何かしら不備があって動作しないことが多々あります。

 

これら不具合が出た場合に、どこが悪いのかどこを直せばいいのかを調査するためにこのconsole.logをよく使用します。

意図した動作しない場合に、プログラムのどの部分に不備があるのか調べる場合に便利なのです。

 

例えば、動いてほしい処理のところにconsole.logをいれることで、ここまで処理が動いたかの確認することもできたりします。

他には変数の中身によって処理が分岐する場合、本当はこっちの分岐に来てほしいところを違う分岐の処理をしてしまった場合に変数の中身をみたいことが多々あります。

 

このようにプログラムの動作の途中でどういった値を保持しているか、どこまで処理が動いているかを確認する際にconsole.logを挟むことによって状況を簡単に把握することが可能になります。

 

最後に

javascriptのconsole.logについて説明しました。

console.log自体をあまりプログラムのログ出力として使用することがあまりないです。
別のログ出力ライブラリーを使用するほうが便利なので。

とはいえ、先ほどお話したとおり、デバッグする際にめちゃくちゃ使用するのでどういう使い方をするか理解しておくと良いかと思います。

コメント

タイトルとURLをコピーしました