JavaScript

JavaScript console.log の使い方

更新日:

前回の記事で、文字を表示させるために alert と console.log について使っていました。

プログラムを開発していく中で、プログラム中の変数の値を確認することはすごくたくさんあるので、その際に alert や console.log を使うわけですが、alert はあまり使われません。1つの内容を確認するために OK ボタンをマウスで押さなければならないので、実行確認修正、また実行確認修正、と繰り返し開発しているときに、OKボタンを毎度押すのが面倒になるからです。

対して console.log は、非常によく使います。実行したら、ざーっとたくさんの情報を連続して出力できるからです。

なので console.log の使い方をより学んでおきます。

動作確認環境を整える

前回同様にファイルを用意しましょう。

index.html

index.js

index.html を開き、GoogleChrome の[開発者ツール]で動きを確認してみてください。WindowならF12キー、Macなら Command+Option+I キーで開けることができます。

 

console.log にはいくつパラメータをわたしてもよい。

condole.log の動きを確認していきます。

index.js を書き換えてブラウザをリロードしてみてください。

[開発者ツール]の[Console] の出力内容はこのような表示になります。

配列を渡す

JavaScript の配列を表示させてみましょう。

配列とか、変数とか、の詳しいことは、また別の記事で紹介しますが、今は配列はどのように console.log で表示できるか、というところを説明しておきます。
JavaScriptの配列は、[] このような記号で表現できますので、次のように書くことができます。

出力内容は下記の通りになります。

GoogleChrome では、表示の値をクリックすると中身を展開表示することができて、より細かい表示ができます。上は普通の表示で、下は細かい表示の内容です。

__proto__ というものが表示されていますが、説明も理解も難しすぎるので、いまはおいておいてください。ずっとおいておいても大丈夫なものです。

オブジェクトを渡す

オブジェクトを表示させてみます。
配列と同様にオブジェクトについて、詳しいことは、また別の記事で紹介します。今の所は console.logでの表示がこうなる、ってことを紹介しておきます。

出力結果と展開した内容は次の通り。

こちらも、__proto__ については、配列のところと同じくです。

まとめて表示できる

まとめ表示してしまいましょう。

出力はこのようなものです。

まとめ

まとめると、console.log ができることは次のようなものです。

・console.log は、さまざまな値を表示できる
・console.log は、複数の値を同時に表示することが

他にも、console.log には多くの機能がありますが、基本的かつ実用的な機能としは、このようなことを理解しておけば十分です。あとは応用になります。

そういえば、次の記事で、console.log をより便利にする機能として テンプレートストリング(テンプレートリテラル)の紹介もしていますので、ご参照ください。

追記

続きを書きました。

JavaScript console.log の使い方 プロ級編


応用編ですが、応用しすぎて、ガリガリコードを書くハードワーク的な仕事現場でしか役に立たないかも。

-JavaScript

Copyright© プログラミングアカデミー ゼロプラスワン , 2024 All Rights Reserved Powered by STINGER.