console.log()とは、一番最初に覚えなければならないもので、今後もずっとお世話になる味方です。
嬉しい時も辛い時も、いつでもそばにいる存在。
そして僕たちを絶対に裏切らない。
それがconsole.log()、決してお世辞ではありません。
console.log()を使うことで、様々なデータの情報を得ることができます。
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽのhtmlファイルにコピペするだけで結果を確認することができます！
それでは本文へ、レッツゴー！
console.log()とは？
まず記述方法から。
console.log('何かしらの文字列');
console.log(何かしらの変数);
console.log(何かしらの数字);こう書くことで、「何かしら」の情報を教えてくれるといったものです。
文字列だけは”（クォーテーション）で囲んであげます。
ただの文字列は、クォーテーションで囲むというルールがあります。
百聞は一見にしかず！
サンプルコードをコピペしてブラウザを開いてみましょう！
サンプルコード
console.log()でいろんな要素を確認しているサンプルコードです。
<script>
const str = '文字ですよ';
const num = 12;
const arr = [1, 2, 3, 4, 5];
console.log(str);
console.log(num);
console.log(arr);
// 直接テキストなど入れてもOK
console.log('テキストを入れる場合はクオーテーション で囲む');
// 変数とテキストを組み合わせてもOK
console.log('変数numの値は' + num + 'です。');
// いろいろごちゃごちゃプロパティとか使ってもOK
console.log('変数arrの配列に格納された要素の数は' + arr.length + 'です。');
</script>さて、ブラウザを開いてプレビュー見ても画面が真っ白ですね！
consoleの確認方法を見ていきましょう。
consoleの確認方法
consoleは検証ツールで確認することができます。
検証ツール上部の「console」をクリックすると、そこにconsole.log()で出力したものが出てきます。
console.log()で出力したもの以外にも、JavaScriptで発生しているエラーなども教えてくれる超優れものです。
console.log()っていつ使うの？
これからずっと、頻繁に使いまくります。
もはや菓子折りでは足りないレベルです。
どんな時に使うのでしょうか？
① 動作確認するときにとりあえず使う
記述したコードが正常に動作するか確認したいとき、とりあえず
console.log('OK');なんて書いたりして、イベントが適切に動作しているか確認することができます。
また何かしら変数宣言した際、希望した値が取得できているかも確認することができます。
②「あれ、なんだっけこれ」ってときにとりあえず使う
変数宣言をしてからそれにいろんな処理を行なっていくと、一体その変数が今何を指しているのかわからなくなったりすることがあります。
そんな時にもとりあえず使うことで、今その変数が何を指しているのかを確認することができます。
③ エラーが出たときにもまず使う
何かしら記述していて思うように動作してくれなかった際、どこまでが適切に動作していて、どこが原因でエラーになっているのか、しらみつぶしにconsole.log()で確認していくことで、原因究明をすることができます。
多分このパターンが一番多くなります！
consoleに出力されたはいいけど、いろいろ書いてあってよくわからないよ
最初のうちは分からなくてOKです。
「ふーん、こんなものがあるんだ」程度で問題ありません。
今後console.log()をずっと使っていくわけですが、使っていくうちに、最低限知りたい情報を知ることは、すぐにできるようになります。
これを繰り返していくうちに、徐々に見る力が身についていきます。
頑張りすぎは禁物、軽い気持ちでやっていきましょう！
