JavaScript初めの一歩！console.logの表示方法と使い方

console.logの表示方法と使い方

このページではJavaScriptの開発を進めてい中で重要な「console.log（コンソール）」の表示方法と使い方を解説させていただきます。

説明に使う開発環境

ブラウザ	GoogleChrome
テキストエディタ	Visual Studio Code
OS	Mac

console.logを表示する「コンソール画面」の開き方

01.GoogleChromeを立ち上げ

02.Chromeの画面を右クリック →「検証」をクリック

04.「コンソール」をクリック（英語表記の時は「console」となっています）

05.コンソールの画面を開くと下記のようになります⬇︎

お使いのパソコンによって、色や形が若干異ります。

console.logの使い方

次にhtmlのファイルを使って「console.logの使い方」を解説していきます。

HTMLの準備は事前に行っておいてください。もし、HTMLファイルを制作してブラウザで確認する方法がわからない場合はこちらの動画をご確認ください。

1.JavaScriptでconsole.logに表示する内容を入力

HTMLのbodyの中に、下記のJavaScriptコードを入力し、保存を行なってください。

<body>
    <script>
        console.log('ここに表示したい内容を入力してください');
    </script>
</body>

2.コンソールの画面を開く

コンソールの画面を開いてください。すでに開いている方は、Chromeの更新を行ってください。

そうすると、コンソールの画面に下記のように表示されると思います。

「ここに内容を入力してください」と表示されていると思います。

下記のように''（シングルクォーテーション）の中のテキストを変えていただくと、コンソールに好きな文字を表示することができます。

console.log('ここに表示したい内容を入力してください');
↓
console.log('こんにちは');
↓
console.log('今日はいい日です');

3.計算を行い、結果を表示することもできる

計算機のように、計算を行うことができます。

ただし、その場合は''（シングルクォーテーション）を外して入力を行ってください。

console.log(1 + 1); //足し算
console.log(10 - 1); //引き算
console.log(12 * 12); //掛け算
console.log(12 / 2); //割り算

4.代入した変数の中身を表示することができる

let a = 'こんにちは';//aに「こんにちは」を代入
console.log(a); //aに代入されている情報をコンソールで確認する

コンソールはどういう時に利用するのか？？

JavaScriptで開発を進めていく中で、コンソールは

情報が取得できているのか？
処理がしっかり出来ているのか？

などを確認する時に利用します。

例えば、htmlの#boxの中に入力されている「こんにちは」をJavaScriptで「こんばんは」に変更しようとしたのですが、なぜかうまくいきません。。

<div id="box">こんにちは</div>
<script>
    const $box = document.getElementById('boz');
    $box.textContent = 'こんばんは';
</script>

こんな時、コンソールで実際に代入された$boxの情報を確認してみると下記のように「null」と表示されました。

「null」と記載されていた場合は、取得したい情報が「見つからない」時などに表示されます。

要は「$boxがありません！」と言ってきてるのです。。ですが、HTMLの中には確実に#boxが存在ます。

#boxを指定ているJavaScriptの箇所をよ〜く見てみると、入力のミスが見つかりました。

#boxと入力するはずが#bozとなっていました。

const $box = document.getElementById('boz');//←間違えてる
↓
const $box = document.getElementById('box');//←修正
console.log($box);

修正を行い、コンソールで再度確認してみると、しっかり情報を取得できていることが確認できました！

コンソールで見つけたエラーを解消してから、改めて下記のコードを記載し#boxの中の「こんにちは」を「こんばんは」とJavaScriptで指定！

<div id="box">こんにちは</div>
<script>
    const $box = document.getElementById('box');
    $box.textContent = 'こんばんは';
</script>

これで無事に処理ができました！

と、こんなふうにコンソールを使ってどこにエラーが出て処理ができていないのかを探すことができるのです！

そのほかにもいろんな使い方がありますが、基本的にはこのようなチェックが中心に使われています。

今の段階でよくわからなくても、勉強を進めていく中でコンソールの存在意義がどんどん実感できるようになっていくと思います！

WePuri

ワードプレス教室