👀

JavaScriptを一から理解する: console.log()

2022/02/01に公開

はじめに

はじめまして、Doxperと申します。
今回はJavaScriptでのconsole.log()メソッドについて学びます。

この記事でできるようになること

console.log()を理解し、使えるようになります。

対象読者

  • エンジニアを目指している同士
  • JavaScriptの基礎を身につけたい方
  • 過去にプログラミング学習に挫折した方
  • プログラミング言語は他に触ったことがない方

JavaScript console.log()

JavaScriptを開発したことがある方は一度は見たことがあるのではないでしょうか?
最近のブラウザは全てデバッグ用のウェブコンソールを備えています。
console.log()メソッドは主にこれらのコンソールにメッセージを書き込むために使われます。

手順

今回はGoogle Chromeを使用します。

  • ブラウザを起動します
  • 何もないところで右クリック
  • Inspect(検証)を選択

コンソール
Inspectを選択

コンソール
Consoleを選択

console.log()構文

console.log()メソッドの構文は以下の通りです。

console.js
// console.log(参照したい変数または値);
let num = 26; 
console.log(num) // 26

簡単に上記のコードを説明すると、まずは変数numを宣言し、初期値として26を代入します。
そしてconsole.log()メソッドで変数numを参照するように指定しました。

その他の例

console.log() は変数以外のものも参照することができます。
例えば、次のコードでは文字列を渡しています。

console.js
console.log('Hello, Zenn') // => Hello, Zenn

変数以外を渡しても問題なくコンソールにアウトプットされます。
もちろん数値を渡すことも可能です。

console.js
console.log(777) // => 777

おわりに

いかがでしたでしょうか?
ざっとですが、今回はJavaScriptでよく使うconsole.log()についてご紹介いたしました。

これらの例からわかるように、console.log()メソッドを使用すると簡単に変数内部の値を参照することが可能です。
そのため小さなコードをテストしたり、デバッグしたりするのに非常に便利なツールとなっております。
今回の記事では触れませんでしたが、consoleオブジェクトはconsole.log()メソッド以外にも様々なメソッドを持っています。詳しく知りたいかたはこちらの記事をご覧下さい。

また、記事について間違っている点やよりよい表現などの提案などありましたらご気軽にコメントいただけますと幸いです。

それではまた次回の記事でお会いしましょう👋

参考文献

JavaScript Tutorial
Learn JavaScript Programming

Discussion