JavaScriptのconsole.logとは？初心者向け完全ガイド

  • JavaScript
  • 関数
最終更新日:

この記事のポイント

プログラミングでは「今、この変数にはどんな値が入っているのか知りたい」「なぜエラーが起きているのか？」のように感じる場面が多々あります。

JavaScriptのconsole.logは、そんな疑問を解決してくれる強力な味方です。プログラムの動作を確認したり、問題を見つけたりするときに欠かせません。

この記事を読むと、次のような知識が身に付きます。

  • console.logの基本的な役割
  • console.logの活用場面
  • 文字列・変数・配列・オブジェクトの出力方法やコード例
  • 実践で使える活用テクニック

console.logを使いこなせるようになると、プログラミングでの問題解決がとてもスムーズになります。ぜひ、この機会にマスターしてしまいましょう。

目次

console.logの基本

console.logは、JavaScriptプログラミングにおいて最も重要なデバッグツールの一つだといえます。

プログラムの内部の様子を画面に表示してくれる、プログラムの動作確認や問題の特定に欠かせない機能です。コードの動作状況を把握するため、日常的に使います。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

console.logの役割と使用場面

console.logは主に、プログラムが実行されている最中に変数の値やメッセージを確認するために使います。

特にプログラムがうまく動かないときの原因を探ったり、想定通りにプログラムが動いているかを確認したりする場面で、特に有用です。

具体的にいうと、計算結果が正しいかチェックしたり、条件分岐が適切に動作しているかを検証したりする場合です。

let animal = "ネコ"; console.log("好きな動物は" + animal + "です");







出力結果
好きな動物はネコです
このプログラムでは、animalという変数に「ネコ」という文字を入れて、それを文章と組み合わせて表示しています。
console.logを使うことで、プログラムがどんな結果を作り出しているかを確認できるのです。
開発者ツールでの確認方法
console.logで表示した内容は、ブラウザの「開発者ツール」という画面で確認することができます。
Google ChromeやFirefoxなどのブラウザでは、キーボードのF12キーを押すか、画面を右クリックして「検証」を選ぶと開発者ツールが開きます。
その中にある「Console」というタブをクリックすると、console.logで表示した内容を見ることができます。
ちなみに、実際にJavaScriptコードを試すには、HTMLファイルを作成する必要があります。メモ帳などで<script>タグ内にJavaScriptコードを書き、「test.html」のような名前で保存し、ブラウザで開くことで確認できます。
実際に確認してみましょう。

  
console.log("ブラウザのコンソールに表示されます");
let count = 5;
console.log(count);

  


  







出力結果
ブラウザのコンソールに表示されます
5
console.logの基本的な使い方
console.logは、JavaScriptで扱うほぼすべてのデータを表示することができる、とても便利な機能です。
文字列、数値、変数、配列、オブジェクトなど、さまざまな種類のデータを画面に表示して確認することができます。
ここでは、よく使われる基本的な表示パターンについてくわしく見ていきましょう。
文字列や数値を出力する
最もシンプルな使い方として、文字列や数値をそのまま出力する方法があります。文字列を表示したいときはクォーテーション（" "や' '）で囲み、数値はそのまま書きます。

  
console.log("トラ");
console.log(123);
console.log("価格は" + 500 + "円です");

  


  







出力結果
トラ
123
価格は500円です
最初に「トラ」という文字列、次に123という数値、最後に文字列と数値を組み合わせた「価格は500円です」という文章が表示されています。
"価格は" + 500 + "円です"の部分では、+演算子で文字列と数値をつなげています。JavaScriptでは、文字列と数値を+でつなぐと、数値が自動的に文字列に変換されて結合されます。
つまり「価格は」「500」「円です」の3つが順番に結合され、1つの文章「価格は500円です」になるのです。
変数や配列を出力する
変数や配列の中身を確認したいような場合にも、console.logはかなり便利です。
変数名をそのまま指定するだけで、その変数に入っている内容が表示されるからです。
配列の場合は、全ての要素が一覧で表示されるので、配列にどんなデータが入っているかを簡単に確認できます。

  
let favoriteAnimal = "ウサギ";
let animals = ["イヌ", "ネコ", "ハムスター"];
console.log(favoriteAnimal);
console.log(animals);

  


  







出力結果
ウサギ
['イヌ', 'ネコ', 'ハムスター']
配列の内容は、角括弧[]で囲まれて表示されていることが確認できますね。
オブジェクトを出力する
JavaScriptのオブジェクトをconsole.logで表示すると、プロパティとその値がまとめて表示されます。
また、ブラウザのコンソールではオブジェクトの内容を展開して詳細を確認できるため、複雑なデータ構造の把握がしたいときに便利です。

  
let pet = {
  name: "シロ",
  type: "イヌ",
  age: 3
};
console.log(pet);

  


  







出力結果
{name: 'シロ', type: 'イヌ', age: 3}
オブジェクトの内容は、波括弧{}で囲まれて表示されていることが確認できますね。プロパティ名と値がペアで表示されている点も、あわせて認識しておきましょう。
console.logでの改行
console.logを使うときの改行の仕組みを理解しておくと、より見やすいデバッグ情報を作ることができます。
基本的に、console.logは1回呼び出すごとに自動的に改行してくれますが、場合によっては改行の動作を調整したい場合もあります。
改行がどのように働くかを正しく理解して活用しましょう。
console.logが自動で改行する仕組み
console.logは、1回の関数呼び出しにつき1行の出力を行い、自動的に改行を追加してくれます。複数のconsole.log文を実行すると、それぞれが別の行に表示されることが確認できます。
これまでのコード例の出力結果を見返しても、そうなっていますよね？

  
console.log("1匹目：ライオン");
console.log("2匹目：ゾウ");
console.log("3匹目：キリン");

  


  







出力結果
1匹目：ライオン
2匹目：ゾウ
3匹目：キリン
改行しない出力を行うには
では改行しないためにはどうすればいいのでしょうか？
JavaScriptのブラウザ環境では、console.logは常に改行されるため、同一行に複数の値を出力したい場合は、1つのconsole.log内で文字列を結合する方法を使います。
応用的な話をすると、Node.js環境ではprocess.stdout.writeを使うことで改行なしの出力も可能です。
ブラウザでは文字列を組み合わせる方法が一般的なので、押さえておきましょう。

  
let animal1 = "パンダ";
let animal2 = "コアラ";
console.log(animal1 + " と " + animal2);

  


  







出力結果
パンダ と コアラ
console.logの活用テクニック
console.logにはより効率的にデバッグを行うための高度な使い方があります。
複数の値を同時に出力したり、大きなオブジェクトを完全に表示したり、見やすい形式でフォーマットしたりといったテクニックを身につけることで、開発作業の効率が大幅に向上するでしょう。
複数の引数を同時に出力
console.logは複数の値を一度に受け取ることができ、カンマで区切って指定した値をまとめて出力できます。
この機能により、変数名と値を同時に表示したり、関連する複数の情報をまとめて確認したりといったことが可能です。文字列を結合するよりも簡潔にコードを書くことができます。

  
let animalName = "クマ";
let animalAge = 8;
console.log("動物名:", animalName, "年齢:", animalAge);

  


  







出力結果
動物名: クマ 年齢: 8
console.logに複数の引数を渡すと、自動的にスペースで区切られて表示されます。
省略しないでオブジェクトや配列を表示
大きなオブジェクトや配列は、通常のconsole.logでは内容が省略される場合があります。
JSON.stringifyというメソッドを使用することで、オブジェクトの全内容を文字列として完全に表示できます。

  
let zoo = {
  mammals: ["ライオン", "トラ", "ヒョウ"],
  birds: ["ワシ", "フクロウ"]
};
console.log(JSON.stringify(zoo, null, 2));

  


  







出力結果
{
  "mammals": [
    "ライオン",
    "トラ",
    "ヒョウ"
  ],
  "birds": [
    "ワシ",
    "フクロウ"
  ]
}
JSON.stringifyを使うことで、オブジェクトの構造が階層的に表示され、どんなデータが入っているかを詳細に確認できます。
今回の例だと、オブジェクトは大きくないため、その恩恵を感じにくいですが複雑なデータ構造を理解する際には非常に役立ちます。
もう少しJSON.stringify()についてくわしく知りたいという方もいるかもしれません。その方向けにもう少し踏み込んだ説明をしておきましょう。
JSON.stringify()は、オブジェクトを見やすい文字列形式に変換する機能です。最後の2は「インデント（字下げ）を2文字分にする」という意味で、これにより階層構造がわかりやすく表示されます。
フォーマット指定で見やすく出力
console.logでは、プレースホルダーという仕組みを使って、値を整形して出力できます。%sは文字列、%dは数値を表し、第1引数のテンプレート文字列に続けて値を指定します。

  
let petName = "ポチ";
let petWeight = 15;
console.log("ペットの名前: %s, 体重: %d kg", petName, petWeight);

  


  







出力結果
ペットの名前: ポチ, 体重: 15 kg
この例では、%sの部分にpetNameの値が、%dの部分にpetWeightの値が自動的に入れ込まれて表示されています。
%sと%dは、いわば「ここにこの種類の値を入れてください」という目印です。
このフォーマット機能を使うことで、決まった形式でデータを表示できるので、デバッグ情報の見やすさが向上するといったメリットがあります。
console.logを使う際の注意点
console.logは開発段階では非常に有用なツールですが、使用する際にはいくつかの重要な注意点があります。
特に本番環境でのセキュリティやパフォーマンスへの影響を考慮し、適切な使い方を心がけましょう。
本番コードにconsole.logを残さない
本番環境にconsole.logが残っていると、機密情報の漏洩やパフォーマンスの低下を引き起こす可能性があります。
セキュリティ上のリスクとなる理由は、ユーザーがブラウザの開発者ツールから内部情報を見ることができてしまうためです。
また、大量の出力処理がアプリケーションの動作速度に悪影響を与える場合もあるということを覚えておきましょう。

  
let userInfo = {name: "タナカ", id: 12345};
console.log("ユーザー情報:", userInfo);

  


  







出力結果
ユーザー情報: {name: 'タナカ', id: 12345}
デバッグ専用として活用する
console.logは開発・テスト段階でのデバッグ作業に限定して使用することを強く推奨します。
コードの動作確認や問題の特定が完了したら、該当するconsole.log文は削除するか、開発環境でのみ実行されるよう条件分岐で制御することが必要です。
開発環境のときだけconsole.logが実行されるように条件を付けている例です。

  
process.env.NODE_ENV = 'development';
if (process.env.NODE_ENV === 'development') {
  console.log("デバッグ: アヒルのデータを処理中");
}

  


  







出力結果
デバッグ: アヒルのデータを処理中
よくある質問（Q&A）
Q: console.logが表示されないときの対処法は？ 
A: ブラウザの開発者ツール（F12キー）でConsoleタブが選択されているか確認してください。また、JavaScriptエラーが発生している可能性もあるため、Errorメッセージもチェックしましょう。
また、HTMLファイル内の<script>タグにJavaScriptコードが正しく記述されているかも確認が必要です。
Q: 変数の値が[object Object]と表示される理由は？ 
A: オブジェクトを文字列結合で表示しようとした際に発生します。console.log(obj)のように直接出力するか、JSON.stringifyを使用して内容を確認できます。
Q: 配列の要素数を簡単に確認する方法は？ 
A: 配列名.lengthプロパティを使用します。console.log(animals.length)のように記述すると、配列の要素数が表示されます。

  
let pets = ["イヌ", "ネコ", "ウサギ"];
console.log(pets.length);

  


  







出力結果
3
Q: console.logとalertの使い分けは？ 
A: console.logは開発者向けのデバッグ情報表示に使用し、alertはユーザーへの重要な通知に使用します。console.logはブラウザのコンソールにのみ表示され、一般ユーザーには見えません。
Q: 関数の実行順序を確認するには？ 
A: 各関数の開始と終了時点でconsole.logを配置し、関数名や処理段階を出力します。タイムスタンプも併用すると実行時間の把握に役立ちます。

  
function feedAnimal() {
  console.log("給餌開始: ライオンにエサを与える");
  console.log("給餌完了");
}
feedAnimal();

  


  







出力結果
給餌開始: ライオンにエサを与える
給餌完了
関数の最初と最後にconsole.logを置くことで、プログラムがどの順番で実行されているかを確認できます。
まとめ
この記事では、JavaScriptのconsole.logについて、詳しく解説してきました。
console.logは、プログラムの動作確認や問題の解決を行うための重要な機能です。これを使いこなせるようになると、プログラミングでの疑問や困りごとをスムーズに解決できるようになります。
console.logが活躍する場面を振り返っておきましょう。
console.logが活躍する場面
    

  • 変数にどんな値が入っているかを確認したいとき
    • 

  • プログラムがエラーになる原因を探したいとき
    • 

  • 配列やオブジェクトの中身をくわしく見たいとき
    • 

  • 関数が正しい順番で実行されているかをチェックしたいとき
    • 

  • 計算結果が期待通りになっているかを確認したいとき
    • 

console.logを使う上で押さえておきたいポイントは次の通りです。
重要なポイント
    

  • 文字列、数値、変数、配列、オブジェクトといったデータを表示できる
    • 

  • ブラウザの開発者ツールのConsoleタブで結果を確認できる
    • 

  • 複数の値を同時に表示したり、JSON.stringifyで詳細表示したりできる
    • 

  • 本番環境では必ずconsole.log文を削除する
    • 

  • プレースホルダーやフォーマット指定で見やすい出力ができる
    • 

console.logは、特に初学者の方にとって、エラーの原因特定や変数の値の確認において、欠かせない機能になるはずです。
適切な使い方がわかれば、JavaScriptの学習効率は格段に向上し、問題解決能力も大幅に向上するでしょう。
ぜひ、今回の記事を足がかりに継続的な学習でプログラミングスキルをどんどん向上させていってください。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. ナレッジ
  3. JavaScriptのナレッジ記事一覧
  4. JavaScriptのconsole.logとは？初心者向け完全ガイド