JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのconsole.log()メソッドとは？基本の使い方と実行例をわかりやすく解説

JavaScriptのconsole.log()メソッドは、ブラウザの開発者コンソールにメッセージや値を出力するために使用される、最も基本的かつ頻繁に使われるデバッグ用メソッドです。

文字列だけでなく、数値・オブジェクト・配列など、あらゆる型のデータを出力できるため、変数の中身を確認したり、プログラムの動作を検証したりする際に欠かせません。

基本構文

console.log(出力したい値);

引数には、出力したいメッセージや変数、オブジェクトなどを指定します。カンマ区切りで複数の値を渡すことも可能です。

コード例

以下は、console.log()メソッドを使ってオブジェクトと文字列をコンソールに出力するサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1>console.log() Example</h1>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックするとコンソールに結果が表示されます</h3>
<script>
    let test = {
        a:22,
        b:'HELLO',
        c:44,
    }
    console.log(test);
    console.log('HELLO WORLD');
</script>
</body>
</html>

実行結果

JavaScriptのconsole.log()メソッドとは？基本の使い方と実行例をわかりやすく解説

「CLICK HERE」ボタンをクリックすると、以下のようにコンソールへ出力されます。

JavaScriptのconsole.log()メソッドとは？基本の使い方と実行例をわかりやすく解説

コードの解説

  • console.log(test)：プロパティ a、b、c を持つオブジェクト test の中身全体をコンソールに出力します。オブジェクトは展開して各プロパティの値を確認できます。
  • console.log('HELLO WORLD')：文字列「HELLO WORLD」をそのままコンソールに出力します。

コンソールの表示方法

出力結果を確認するには、Google Chrome や Firefox などのブラウザで開発者ツールを開きます。Windows の場合は「F12」キーまたは「Ctrl + Shift + I」、Mac の場合は「Command + Option + I」を押し、「Console（コンソール）」タブを選択してください。

このようにconsole.log()はシンプルながら非常に強力なツールです。日々の開発やデバッグ作業で積極的に活用しましょう。

  1. 【初心者向け】JavaScriptでオブジェクトのディープクローンを作成する方法を実例付きで解説

    はじめにJavaScriptでは、単純な代入（=）やObject.assign()などによるコピーはシャローコピー（浅いコピー）となり、元のオブジェクトとプロパティへの参照が共有されてしまいます。そのため、一方を変更するともう一方にも影響が及びます。これを防ぐには、参照関係まで完全に切り離したディープクローン（深いコピー）を作成する必要があります。本記事では、JSON.parse(JSON.stringify()) を使ったシンプルな方法で、オブジェクトのディープクローンを作成する例を紹介します。ディープクローンのサンプルコード以下のコードでは、ボタンをクリックすると元のオブジェクト obj

  2. DOM要素を取得してconsole.logでコンソールに出力する方法【JavaScript入門】

    JavaScriptでDOMに関連する変数をコンソールに表示したい場合、document.getElementById()を使用して対象の要素を取得し、その結果をconsole.log()で出力します。この記事では、実際のコード例を使って、DOM要素をコンソールにログとして表示する手順をわかりやすく解説します。コード例以下は、テキスト入力フィールドのDOM要素を取得してコンソールに表示するサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>