JavaScriptをConsole上で実行し、ログを表示する方法/Console.logの使い方

IT

個人的にはテキストに書いてそのまま実行できるalertのほうが親しみやすいと思うんですが、JavaScriptの入門書ではConsoleを起動してそこにログを表示するやりかたが人気です。ここではコンソールを表示する方法と、logメソッドについて書いています。

Advertisements

コンソールの起動方法

そもそもコンソールとは何か? という話なんですが、開発者用のデバッグツールで、簡単なプログラムをテストしたり、ブラウザ上で変数の値を確認したり、発生したエラーを探索したりするのに使います。

コンソールの起動/Chrome
Ctrl+Shift+J(Windows)
Command+Option+J(Mac)

コンソールの起動/Firefox
Ctrl+Shift+K(Windows)
Command+Option+K(Mac)

コンソールの起動/Edge or Internet Explorer
F12Ctrl+2(Windows)

コンソールの起動/Safari
Command+Option+C(Mac)
※「環境設定」→「詳細」→「メニューバーに”開発メニュー”を表示」にチェック後

コンソールに書いてみる

こんな感じの画面が出たでしょうか?(下はChromeのコンソール)
console
では、とりあえずコンソールに何か表示してみることにします。

ログ表示
Console.log(内容);
console2

console.log(‘Hello work’)
コンソール「Hello work」ログを表示する)と入力します

console3

入力した文字列が表示されました

console4

大文字だとうまくいきません

コンソールに読んでみる

いまいちよくわからないので、今度はhtmlにconsole.logを記載したものを読み取ってみようと思います。次のような単純なコードをテキストに書いて、拡張子をhtmlにしてから読み取ります。scriptタグで囲った中にあるのが、JavaScriptのコードです。

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>jstest</title>
<script>console.log('jstest')</script>
</head>
<body>
<p>jstest</p>
</body>
</html>

その状態でコンソールログを立ち上げてみると、jstest.html:6とついた状態で、入力したログが表示されます。
console6
この6というのは、
console5
htmlの上から6行目という意味です。コードの中でscriptの位置を変えてみると、数字の変化が確認できます。
console7

エラーを出してみる

ここまではちゃんと動いていましたが、コードが間違っていた場合コンソールログはどうなるのか?

<script>console.lof('jstest')</script>

先ほどのコードから1文字間違えたものを作って、再びhtmlで読み込んでみると、タイプミスしている、という内容が表示されます。
console10
これはつまり、実際のプログラムをコンソールで読んでも、どこでエラーが発生しているか表示されるという意味です。

変数を表示する

今度は先に変数を作り、その変数の合計を表示してみます。

<script>
let a = 1
let b = 2
console.log(a+b)
</script>

console11
変数の合計が表示されました。
ということは、コードを書いていて途中で変数の値がわからなくなった場合などは、consoleに出力すればその時点での値を確認できることになります。

以上です。
なんとなーくconsoleのデバッグツールとしての使い方も伝われば幸いですが、よくわからないでも「コンソールに文字が出せる」ことさえわかればこの記事的にはOKです。

JavaScriptの使い方・メソッド・プロパティまとめ
HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。

コメント