お問い合わせ
お問い合わせ
ホーム > JavaScript > JavaScriptのconsole.log()とは？使い方を初心者向けに解説

JavaScriptのconsole.log()とは？使い方を初心者向けに解説

JavaScript
JavaScriptのconsole.log()を使ってコンソールでプログラムの動作を確認しているイメージ
JavaScriptのconsole.log()でコンソールへログを出力し、変数や処理結果を確認しながらデバッグを行う様子をイメージしたアイキャッチ画像です。

JavaScriptを学び始めると、最初に目にする関数の一つがconsole.log()です。

チュートリアルやサンプルコードでは頻繁に登場しますが、「何のために使うのか」「画面には何も表示されないのはなぜか」と疑問に感じることも少なくありません。

この記事では、console.log()の基本から実践的な使い方、デバッグでの活用方法まで、初心者にもわかりやすく解説します。

console.log()とは？

console.log()とは、値やメッセージをブラウザの開発者ツール（コンソール）へ出力するためのJavaScriptの関数です。

プログラムが正しく動いているか確認したり、変数の中身を調べたりするときに利用します。

例えば、以下のコードを実行すると文字列がコンソールへ表示されます。

console.log("こんにちは");

実行結果

こんにちは

画面（Webページ）には何も表示されません。

表示されるのは、ブラウザの開発者ツール（Developer Tools）のConsoleタブです。

console.log()を使う理由

初心者は「画面に表示されないなら何の意味があるのか」と感じるかもしれません。

しかし、実際の開発では非常に重要な役割があります。

主な用途は次のとおりです。

  • 変数の値を確認する
  • 計算結果を確認する
  • 処理が実行されたか確認する
  • エラーの原因を調査する（デバッグ）

つまり、プログラムの動きを確認するための道具として利用します。

console.log()の基本的な使い方

文字列を表示する

最も基本的な使い方です。

console.log("Hello World");

実行結果

Hello World

数値を表示する

数値もそのまま表示できます。

console.log(100);

実行結果

100

変数を表示する

変数の中身を確認する場面は非常に多くあります。

const name = "山田";

console.log(name);

実行結果

山田

計算結果を表示する

計算が正しく行われているか確認できます。

const total = 100 + 250;

console.log(total);

実行結果

350

複数の値を表示する方法

カンマ区切りで複数指定できます。

const name = "佐藤";
const age = 28;

console.log(name, age);

実行結果

佐藤 28

デバッグ時によく利用する書き方です。

オブジェクトを表示する

オブジェクトの中身も確認できます。

const user = {
  name: "田中",
  age: 30,
};

console.log(user);

実行結果

{name: "田中", age: 30}

ブラウザでは展開してプロパティを確認できるため、大量のデータを扱う際にも便利です。

配列を表示する

配列もそのまま確認できます。

const fruits = ["りんご", "みかん", "バナナ"];

console.log(fruits);

実行結果

["りんご", "みかん", "バナナ"]

処理が実行されたか確認する

ある処理が本当に実行されているか確認したい場合にも利用します。

console.log("処理開始");

const total = 10 + 20;

console.log("処理終了");

実行結果

処理開始
処理終了

このように途中へconsole.log()を入れることで、どこまで処理が進んだか確認できます。

デバッグでの活用例

例えば、計算結果がおかしい場合を考えてみます。

const price = 1000;
const tax = 0.1;

const total = price + price * tax;

console.log(total);

実行結果

1100

もし期待した結果にならない場合は、途中の値を確認できます。

const price = 1000;
const tax = 0.1;

console.log(price);
console.log(tax);

const total = price + price * tax;

console.log(total);

このように少しずつ値を確認すると、原因を見つけやすくなります。

デバッグについて詳しく知りたい場合は、「JavaScript初心者が最初につまずく「エラーメッセージ」の読み方と対処法」の記事も参考になります。

ブラウザでconsole.log()を見る方法

Google Chromeを例にすると、次の手順で確認できます。

  1. Webページを開く
  2. F12キーを押す
  3. 「Console」タブを開く
  4. console.log()の出力が表示される

Macの場合は以下のショートカットでも開けます。

Command + Option + I

console.log()は削除したほうがいい？

開発中は問題ありませんが、本番公開時には不要なconsole.log()は削除することが一般的です。

理由は次のとおりです。

  • コンソールが不要な情報で見づらくなる
  • 内部情報が表示される可能性がある
  • 保守性が低下する

デバッグが終わったら削除する習慣を付けると、コードを整理しやすくなります。

console.log()とalert()の違い

初心者が混同しやすいのがalert()です。

項目console.log()alert()
表示場所コンソールダイアログ
処理停止しないOKを押すまで停止
用途デバッグユーザーへの通知

alert()は利用者向け、console.log()は開発者向けという違いがあります。

console.log()使用時の注意点

本番環境へ残さない

不要なログは削除しましょう。

個人情報を表示しない

パスワードや個人情報などを出力すると、情報漏えいにつながる可能性があります。

出力しすぎない

大量のログは必要な情報を探しにくくします。

必要な場所だけで使用することが大切です。

よくある質問

console.log()は画面に表示されますか？

いいえ。

ブラウザのコンソールへ表示されます。

console.log()は必ず必要ですか？

必須ではありません。

ただし、JavaScript開発では最も基本的なデバッグ方法の一つです。

console.log()は本番でも動きますか？

動作します。

ただし、多くの場合は不要なので削除して公開します。

まとめ

console.log()は、JavaScriptで最も基本的なデバッグ用の関数です。

画面には表示されませんが、変数や計算結果、処理の流れを確認できるため、開発効率を大きく向上させます。

初心者のうちは積極的に活用し、プログラムがどのように動いているかを確認しながら学習を進めることが大切です。

関連記事