JavaScriptでブラウザのコンソールにログを出力する方法を初心者向けに徹底解説

1. console.logとは何か

1. console.logとは何か

JavaScriptのconsole.log()は、ブラウザのコンソールに文字や数字、計算結果などを表示するための命令です。初心者でも簡単に使えて、プログラムの動作確認に欠かせません。例えば、計算結果を確認したいときに便利です。

console.log("こんにちは、JavaScriptの世界！");

こんにちは、JavaScriptの世界！

2. 数字や計算結果を表示する

2. 数字や計算結果を表示する

文字だけでなく、数字や計算結果もconsole.log()で確認できます。たとえば、簡単な足し算の結果を表示することも可能です。

let a = 10;
let b = 5;
console.log("a + b =", a + b);

a + b = 15

3. 変数や文字列の組み合わせを表示する方法

3. 変数や文字列の組み合わせを表示する方法

文字列と変数を組み合わせて表示することもできます。プログラム内で動的に値を確認したいときに便利です。

let name = "太郎";
let age = 20;
console.log("名前は " + name + "、年齢は " + age + "歳です。");

名前は 太郎、年齢は 20歳です。

4. 複数の値を同時に表示する

4. 複数の値を同時に表示する

console.log()では、カンマ,を使って複数の値を同時に表示することも可能です。複数の情報を一度に確認できるので便利です。

let x = 7;
let y = 3;
console.log("xの値:", x, "yの値:", y);

xの値: 7 yの値: 3

5. console.logで配列やオブジェクトを確認する

5. console.logで配列やオブジェクトを確認する

JavaScriptでは配列やオブジェクトもconsole.log()で確認できます。プログラムの状態を理解するために非常に役立ちます。

let fruits = ["リンゴ", "バナナ", "オレンジ"];
console.log("フルーツ一覧:", fruits);

let person = {name: "花子", age: 25};
console.log("人物情報:", person);

フルーツ一覧: ["リンゴ", "バナナ", "オレンジ"]
人物情報: {name: "花子", age: 25}

6. console.logを使ったデバッグの基本

6. console.logを使ったデバッグの基本

プログラムが正しく動かないとき、console.log()を使うと原因を特定しやすくなります。途中の変数の値や処理の順序を確認することで、問題点を見つけられます。

let score = 90;
if (score > 80) {
  console.log("点数が80点より大きいです。");
} else {
  console.log("点数が80点以下です。");
}

点数が80点より大きいです。

7. console.errorやconsole.warnの活用

7. console.errorやconsole.warnの活用

console.log()のほかに、console.error()やconsole.warn()もあります。エラーや注意を表示するときに使うと、よりわかりやすくデバッグできます。

console.warn("これは警告メッセージです。");
console.error("これはエラーメッセージです。");

これは警告メッセージです。
これはエラーメッセージです。

8. console.logを使った初心者向けのコツ

8. console.logを使った初心者向けのコツ

初心者でも使いやすくするコツとしては、console.log()で表示する文字にラベルをつけることです。何を表示しているのか明確になるので、後で見返すときに便利です。

let temperature = 25;
console.log("現在の気温:", temperature, "度");

現在の気温: 25 度

まとめ

まとめ

本記事では、JavaScriptを使ってブラウザのコンソールにログを出力する方法について、初心者向けにわかりやすく解説しました。console.log()を使えば文字列や数字、変数の値、計算結果、配列やオブジェクトなどを簡単に表示でき、プログラムの動作確認やデバッグに非常に役立ちます。また、複数の値を同時に表示したり、文字列と変数を組み合わせて表示したりすることで、情報を整理して確認することも可能です。console.error()やconsole.warn()を活用することで、エラーや警告を明示的に表示でき、初心者でも効率的にデバッグ作業を行えるようになります。さらに、ラベル付きで値を表示する習慣をつけると、コードを見返したときに何が出力されているのかすぐに理解できます。これらの知識は、JavaScriptの学習において不可欠な基本テクニックであり、ブラウザでの動作確認やWebアプリ開発の際にも役立つスキルです。

サンプルコードで振り返る

基本的なconsole.log()の使い方を振り返ります。文字列や数字、変数を表示する例です。

let name = "太郎";
let age = 20;
let score = 85;
console.log("名前:", name, "年齢:", age, "点数:", score);

let fruits = ["リンゴ", "バナナ", "オレンジ"];
console.log("フルーツ一覧:", fruits);

let person = {name: "花子", age: 25};
console.log("人物情報:", person);

if (score > 80) {
  console.log("点数は80点より大きいです。");
} else {
  console.log("点数は80点以下です。");
}

console.warn("これは警告メッセージです。");
console.error("これはエラーメッセージです。");

名前: 太郎 年齢: 20 点数: 85
フルーツ一覧: ["リンゴ", "バナナ", "オレンジ"]
人物情報: {name: "花子", age: 25}
点数は80点より大きいです。
これは警告メッセージです。
これはエラーメッセージです。