jQuery コンソール|console.log()の使い方

どうもかわうそです！

『jQuery コンソール|console.log()の使い方 』を動画も交え解説します！

Contents

そもそもコンソールとは
console.log()でコンソール画面に出力
コンソール画面の確認方法
コンソール画面の使い方

そもそもコンソールとは

まず、ブラウザにはコンソールという機能があります。”入出力装置”や”入出力画面”なんて言ったりしますが、意味が分からないですよね。

結論、変数やオブジェクト、文字列などなどを、console.log()によって確認できる場所ということです。

正直、めっちゃ使います！

変数の中身を確認したり、プログラムが意図した設計通りに動いているか調べたり、指定した要素が思った通りに取得できているかなど、使用頻度はとても多いです。

さっそくconsole.log()を使って、コンソール画面に出力してみましょう。

console.log()でコンソール画面に出力

jQueryを読み込んでいる以外は、何も書かれていないindex.htmlを用意しました。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body></body>
</html>
<script>
  $(function(){
    console.log("かわうそです");
  });
</script>

<!DOCTYPE html>

<head>

</head>

</html>

$(function(){

console.log("かわうそです");

});

</script>

scriptタグ内にはjQueryで

$(function(){
  console.log("かわうそです");
});

$(function(){

console.log("かわうそです");

});

と記述しました。ではコンソール画面を確認してみましょう。

と、console.log()の中身 “かわうそです” が確認できましたね。

もちろん文字列ではなく、数字でもokです！

$(function(){
  console.log(1);
});

$(function(){

console.log(1);

});

計算だってできます。

$(function(){
  console.log(1+5);
});

$(function(){

console.log(1+5);

});

と出力されましたね。
文字列と数字で色を変えてくれるので、分かりやすいですね。

次は変数を出力してみましょう。

$(function(){
  var kawauso = "かわうそです";
  console.log(kawauso);
});

$(function(){

var kawauso = "かわうそです";

console.log(kawauso);

});

と、変数kawausoの中身 “かわうそです” が出力されました。

jQueryオブジェクトだって取得できます。
head要素のhtmlの情報を変数に格納して出力してみます。

$(function(){
  var kawauso = $('head').html();
  console.log(kawauso);
});

$(function(){

var kawauso = $('head').html();

console.log(kawauso);

});

head要素が持つhtml情報

<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

1 2	<meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

を出力できましたね!

もちろん、変数を使わずに

$(function(){
  console.log($('head').html());
});

$(function(){

console.log($('head').html());

});

この記述でもokです。

さらに、head要素自体を出力できたりもします。

$(function(){
  var kawauso = $('head');
  console.log(kawauso);
});

$(function(){

var kawauso = $('head');

console.log(kawauso);

});

ちょっと分かりにくいですが、動画のように情報が格納されていることが分かりますね。

このようにconsole.log()の中身に知りたい情報をぶち込むと、コンソール画面で確認ができちゃうんです！

続いて各ブラウザ、googlechrome、firefox、edge、Internet Explorerでのコンソール画面確認方法を紹介します。

コンソール画面の確認方法

google chrome

[timeline]
[tl label=’STEP.1′ title=’f12でデベロッパーツールを開く’][/tl]
[tl label=’STEP.2′ title=’consoleをクリック’][/tl]
[tl label=’STEP.3′ title=’コンソール画面が開く’][/tl]
[/timeline]

ショートカットキー
ctrl+shift+J

firefox

[timeline]
[tl label=’STEP.1′ title=’f12で開発者ツールを開を開く’][/tl]
[tl label=’STEP.2′ title=’コンソールをクリック’][/tl]
[tl label=’STEP.3′ title=’コンソール画面が開く’][/tl]
[/timeline]

ショートカットキー
ctrl+shift+K

edge

ショートカットキー
ctrl+shift+J

Internet Explorer

どのブラウザも基本はf12で開発者ツールを開き、コンソール画面を開くタブをクリックで統一されています。

エラーやアクセスログが表示される場合もありますので、console.log()だけの情報を見たい場合は、動画のように画面の絞り込みをかけると見やすくなります！

次はコンソール画面の使い方を説明します。

コンソール画面の使い方

今まではconsole.log()を使って、コンソール画面に出力をしていました。

今度はコンソール画面を直接操作して、コンソール画面に出力する方法をお伝えします。

ブラウザはgoogle chromeで説明しますね。
functionの中に書いたconsole.log()は消すかコメントアウトしておいてください。

これでコンソール画面に何も表示されないはずです。

$(function(){
　function(){ 
    //コメントアウトか消しておいてください。
  }
});

$(function(){

　function(){

//コメントアウトか消しておいてください。

}

});

コンソール画面に出力する

コンソール画面にフォーカスをすると、エディタのようにコードを入力できます！

console.log()を使って、出力してあげましょう。

コンソール画面で変数を出力してみる

今度は変数を使ってみましょう。

shift+Enter

で改行入力ができます。

コンソール画面でalertを実行してみる

alertも出せちゃいますね！

コンソール画面からhtmlを編集してみる

$('body').text('かわうそです');

1	$('body').text('かわうそです');

を書いて、bodyタグに文字を書いてみましょう。

どうやらコンソールからHTMLの情報も操作もできるみたいです！

すごいですねコンソール！

console.log()を使用したエラー特定やデバッグの方法は別の記事で解説したいと思います。