JavaScriptのデバッグ方法は？コンソールを活用して問題を解決しよう

ウェブサイトを作るとき、JavaScriptはとても大切な役割を果たします。
例えば、ウェブページに動きをつけたり、ユーザーの入力に反応したりするのにJavaScriptが使われます。

しかし、プログラムは複雑で、思った通りに動かないこともあります。
そんなとき、何が問題で、どうやってその問題を解決したらいいのか迷うこともあるでしょう。

そんな時に役立つのが、デバッグという方法です。
デバッグとは、プログラムの問題を見つけて修正することを指します。

JavaScriptで問題が起きたときには、デバッグを行うことで問題を解決できます。
しかし、そのためには、デバッグの方法を正しく理解し、適切に使うことが重要です。

この記事では、JavaScriptで問題が起きたときに使えるデバッグの方法を説明します。
具体的には、以下のことについて学びます。

これらの方法をマスターすれば、あなたもJavaScriptの問題を自信を持って解決できるようになるでしょう。

この記事を書いた人

• 未経験からWebエンジニアとして転職成功（年収 30% アップ）
• 現役のフルスタックエンジニアとして活躍中
• 開発チームリーダーとして複数プロジェクトをリード
• 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ

問題を見つける: エラーメッセージを読む

JavaScriptで問題が起きたとき、一番最初にすることは、エラーメッセージを理解することです。
エラーメッセージは、何が問題で、どこで問題が起きているのかを教えてくれます。
コンソールで見られるエラーメッセージを読んで、何が問題なのかを見つけましょう。

たとえば、「Uncaught ReferenceError: XYZ is not defined」というエラーメッセージが出たとします。

Uncaught ReferenceError: XYZ is not defined
   at <anonymous>:1:1

これは、「XYZ」というものが定義されていないという意味です。
このエラーメッセージを見ることで、XYZが何かを調べ、それがどこで使われているかを見つけることができます。

エラーメッセージには、問題が起きた行の番号やエラーの種類が書いてあります。
これらの情報を使って、問題が何で、どこにあるのかを見つけましょう。
エラーメッセージは問題を解決するための大切なヒントです。

具体例1: ReferenceError – 定義されていない変数を使用している

以下のコードを実行すると、エラーメッセージが出ます。

console.log(XYZ);

エラーメッセージは以下のようになります。

Uncaught ReferenceError: XYZ is not defined
   at <anonymous>:1:13

このエラーメッセージを見ると、XYZが定義されていないということがわかります。
つまり、XYZという変数がどこにも定義されていないということです。

具体例2: TypeError – 関数を呼び出しているが、関数ではない

以下のコードを実行してみましょう。

const XYZ = 123;
XYZ();

すると、以下のようなエラーメッセージが出ます。

Uncaught TypeError: XYZ is not a function
   at <anonymous>:2:1

このエラーメッセージを見ると、XYZが関数ではないということがわかります。
このように、関数ではないものを関数として呼び出すと、TypeErrorが出ます。

具体例3: SyntaxError – 文法が間違っている

以下のコードを実行してみましょう。

const XYZ = 123;
console.log(XYZ;

すると、以下のようなエラーメッセージが出ます。

Uncaught SyntaxError: missing ) after argument list
   at <anonymous>:2:13

このエラーメッセージを見ると、XYZの後ろにカッコがないということがわかります。
SyntaxErrorは、文法が間違っているときに出ますので、書き方が合っているか？といった基本的なことを確認しましょう。

問題を深堀りする: デバッガーを使う

デバッガーとは？

問題を特定したら、次はその問題を深く理解するためにデバッガーを使います。
デバッガーは、ブラウザに付属している便利なツールで、コードを一行ずつ実行して問題を見つけることができます。

デバッガーを使うと、コードが実行される一連の流れを見ることができます。
それぞれのステップで、変数にどのような値が入っているのかを確認できます。
例えば、「XYZ is not defined」というエラーが出たとき、デバッガーを使うことでXYZがどのタイミングでどのような値になるべきだったのかを追うことができます。

さらに、デバッガーには「ブレークポイント」という機能があります。
ブレークポイントを設定すると、その行でコードの実行が一時停止します。
これによって、そのタイミングでの変数の値を見たり、その後どう動くべきだったのかを見ることができます。

デバッガーを使う

デバッガーを使うには、以下のようにします。

具体的な使い方については、外部サイトとはなりますが、以下のサイトが画像付きとても参考になりますので、ぜひご覧ください。

https://qiita.com/nekoneko-wanwan/items/02aed17773833c3ad3b2

問題を追跡　- ログメッセージの使い方

問題を特定し、理解したら、次にすることは、その問題を追跡することです。
それを助けるのが、ログメッセージの追加です。
ログメッセージを追加すると、コードが動いているときに何が起きているのかを見ることができます。

ログメッセージには、変数の値や、ある条件がどう評価されたかという情報を入れることができます。
例えば、以下のようなコードを書くことができます。

console.log('XYZの値:', XYZ);

これによって、「XYZ」の値がコンソールに表示されます。
コードが動いているときに何が起きているのかを見ることで、問題を見つけやすくなります。

console.log()の使い方

console.log()は、コンソールにメッセージを表示するための関数です。
これはご存じの方も多いかもしれませんね。

console.log()は、以下のように使います。

console.log(メッセージ);

メッセージには、文字列や変数を入れることができます。
例えば、以下のように書くことができます。

console.log('XYZの値:', XYZ);

この場合、XYZの値がコンソールに表示されます。

console.error()の使い方

console.error()は、コンソールにエラーメッセージを表示するための関数です。
console.log()と異なり、エラーメッセージは赤色で表示されます。

console.error()は、以下のように使います。

console.error(エラーメッセージ);

エラーメッセージには、文字列や変数を入れることができます。

実践的には、よく非同期処理のエラーハンドリングで使われます。

fetch('https://example.com')
  .then(response => response.json())
  .then(data => {
    console.log('データを取得しました:', data);
  })
  .catch(error => {
    console.error('データの取得に失敗しました:', error);
  });

この場合、データの取得に失敗したときに、エラーメッセージがコンソールに表示されます。

console.table()の使い方

console.table()は、コンソールにテーブルを表示するための関数です。

console.table()は、以下のように使います。

console.table(テーブル);

テーブルには、オブジェクトや配列を入れることができます。
例えば、以下のように書くことができます。

const data = [
  { name: 'A', value: 100 },
  { name: 'B', value: 200 },
  { name: 'C', value: 300 },
];
console.table(data);

この場合、以下のようなテーブルがコンソールに表示されます。

もちろんconsole.log()でもオブジェクトや配列の中身を表示することができますが、console.table()の方が見やすいですね。
あまり使っている人は見かけませんが、便利なのでぜひ使ってみてください。

console.time()とconsole.timeEnd()の使い方

console.time()とconsole.timeEnd()は、コンソールに処理時間を表示するための関数です。
どうも処理が遅い…と感じたときに、どの処理が遅いのかを知るために使います。

console.time()とconsole.timeEnd()は、以下のように使います。

console.time('タイマー名');
// 処理
console.timeEnd('タイマー名');

タイマー名は、console.time()とconsole.timeEnd()で同じ名前を指定する必要があります。

例えば、以下のように書くことができます。

console.time('fetch');
fetch('https://example.com')
.then(response => response.json())
.then(data => {
console.log('データを取得しました:', data);
})
.catch(error => {
console.error('データの取得に失敗しました:', error);
})
.finally(() => {
console.timeEnd('fetch');
});

この場合、データの取得にかかった時間がコンソールに表示されます。

データを取得しました: {name: "A", value: 100}
fetch: 0.123ms

console.trace()の使い方

console.trace()は、コンソールにスタックトレースを表示するための関数です。

console.trace()は、以下のように使います。

console.trace();

例えば、以下のように書くことができます。

function funcA() {
  funcB();
}
function funcB() {
funcC();
}
function funcC() {
console.trace();
}
funcA();

少し複雑ですが、上記ではfuncA()がfuncB()を呼び出し、funcB()がfuncC()を呼び出しています。

この場合、funcC()の中でconsole.trace()を呼び出しているので、funcC()の呼び出し元であるfuncB()とfuncA()の情報がコンソールに表示されます。

Trace
    at funcC (<anonymous>:10:13)
    at funcB (<anonymous>:6:3)
    at funcA (<anonymous>:2:3)
    at <anonymous>:14:1

このように、関数の呼び出し元を辿ることができるため、どこで関数が呼び出されているのかを知ることができます。

まとめ

JavaScriptのデバッグは、問題を見つけて解決するための大切な工程です。
エラーメッセージの読み方、デバッガーの使い方、ログメッセージの追加方法を学ぶことで、あなたも問題を自信を持って解決できるようになるでしょう。

プログラミングの問題を解決するのは難しいかもしれませんが、焦らずに一つひとつ取り組んでいきましょう。
最初は時間がかかるかもしれませんが、経験を積むことでスキルが上がり、問題解決も早くなるでしょう。
上記のヒントを使って、あなたのデバッグ力をアップさせましょう！

フロントエンドに興味がある方におすすめの記事

フロントエンドに興味があるけど、何から勉強したらいいか分からないですよね。

そんな方には勉強方法を丁寧にわかり易く解説している以下の記事がおすすめです！

読んでいただければ、ゼロからフロントエンドエンジニアになる方法がわかります。

Muscle Coding

【2024年】フロントエンドエンジニアへのロードマップ【完全版】 | Muscle Coding 未経験からフロントエンジニアを目指すための学習ロードマップです。フロントエンドエンジニアとして就職・転職するまでに必要な学習内容をギュッとまとめました！おすすめ…