デザイン部のmoです。
今回はプログラムが上手く動作しているか確認するconsole.logについて書きます。
console.logとは
console.logは、プログラム中の変数の確認や、不具合が起きた時にデバッグするのに不可欠な機能です。
ブラウザのコンソール上にメッセージを表示して確認することができます。
開発ツールを開く
console.logの出力内容を見るには開発ツールのコンソールで確認します。
ここではGoogle ChromeのDeveloper Toolsを例にとって説明していきます。
FireFoxやMicrosoft Edgeでも使い方や表示は殆ど同じです。
【開き方】
- 右クリックの「検証」(Windows、Mac)
- 「F12キー」(Windows)
- 「Option + Command + I」(Mac)
console.logの使い方
文字を出力してみる
// 文字列を出力
console.log(‘こんにちは’);
計算してみる
// 計算して出力
console.log(2+3);
文字列として出力してみる
// 文字列して出力
console.log(‘2+3’);
シングルクォートの役割
console.logを使うと、()内に書かれたパラメータがコンソールに出力されます。
そのパラメータをテキストとしてそのまコンソールに出力させたいときは、テキストの前後にシングルクォート(‘ ‘)をつけて囲みます。
また()内のパラメータをシングルクォートで囲まないは場合は(2+3)のように書くと数式として扱われパラメータに書かれた内容を計算して出力してくれます。
まとめ
今回は、console.logの役割と具体的な使い方を書いてみました。
正しい値が出力されているか確認したり、不具合の原因を突き止めたりする際に役立つことがわかりました。
不具合が出たら、console.logで変数の中身を確認してみましょう。
console.logを使いこなせるかどうかで、実装のスピードは変わります。
積極的に利用するようにしましょう。
文：デザイン部 mo
