目次⇒ 例外処理とデバッグとは？ エラーの基本 try / catch の基本 throw の使い方 console を使ったデバッグ debugger の基本 実務でよくある例 よくある注意点 まとめ TOP
この記事では、JavaScript / TypeScriptで重要な 例外処理 と デバッグ について詳しく解説します。
プログラムを書いていると、入力ミス・想定外の値・通信失敗・コードの書き間違いなど、さまざまな原因でエラーが発生します。
そうしたときに必要になるのが、エラーを安全に受け止める考え方と、原因を順番に調べる力です。
この記事では、try / catch、throw、console.log、debugger などの基本を中心に、初学者の方にもわかりやすい形で整理していきます。
解説：
例外処理とは、プログラム実行中に起きた問題に対して、処理を止めずに安全に対応する仕組みのことです。
また、デバッグとは、エラーやバグの原因を調べて修正する作業全体を指します。
エラーを完全になくすことは難しいですが、起きたときにどう扱うかを知っておくと、プログラムはかなり安定します。
console.log('処理開始');
// ここで何か問題が起きるかもしれない
console.log('処理終了');問題が起きそうな場所を意識して、事前に確認する、失敗したときの処理を書く、原因を出力して調べることが大切です。
解説：
JavaScriptでは、コードに問題があるとブラウザのコンソールにエラーが表示されます。
まずは「どんな種類のエラーがあるか」をざっくり知っておくと理解しやすいです。
console.log(userName); // userName が未定義
この場合は、ReferenceError になります。
変数名の書き間違いや、まだ宣言していない変数を使ったときによく出ます。
const user = null;
console.log(user.name);
このような場合は、TypeError が発生します。
null や undefined に対してプロパティ参照やメソッド実行をしたときによく見かけます。
初学者のうちは難しく見えますが、まずは「どこで止まったか」を見るだけでも十分です。
解説：
エラーが起こる可能性のある処理を安全に囲みたいときは、try / catch を使います。
try の中でエラーが発生すると、処理は catch に移ります。
try {
const data = JSON.parse('{"name":"Taro"}');
console.log(data.name);
} catch (error) {
console.log('エラーが発生しました');
console.log(error);
}これにより、エラーが起きてもその場で止まるだけではなく、代わりの処理を書けるようになります。
try {
const user = JSON.parse(inputText);
result.textContent = user.name;
} catch (error) {
result.textContent = 'データの形式が正しくありません';
}ユーザーにとっては、コンソールエラーだけよりも、画面上でわかるメッセージが出るほうが親切です。
JSON文字列を読み込んで、成功時と失敗時の表示の違いを確認できます。
ここに結果が表示されます
解説：
throw は、自分で「ここはエラーとして扱いたい」と判断したときに使う構文です。
想定外の値が入ってきたときに、早めに異常へ気づけるようになります。
function divide(a, b) {
if (b === 0) {
throw new Error('0では割れません');
}
return a / b;
}このように書くことで、「計算はできないのにそのまま進んでしまう」状態を防げます。
try {
const result = divide(10, 0);
console.log(result);
} catch (error) {
console.log(error.message); // 結果 : 0では割れません
}throw は、入力チェックや関数の安全性を高めたい場面でよく使われます。
解説：
デバッグの基本は、まず今の値がどうなっているか確認することです。
そのときに最もよく使うのが console 系のメソッドです。
const count = 3;
console.log(count);最も基本的な出力方法です。変数の中身や処理の流れを確認したいときに使います。
const users = [
{ id: 1, name: 'Taro' },
{ id: 2, name: 'Hanako' }
];
console.table(users);配列やオブジェクトの一覧を見たいときは、console.table() が見やすくて便利です。
try {
throw new Error('想定外のエラーです');
} catch (error) {
console.error(error);
}エラーを目立たせたいときは、console.error() を使うと見分けやすくなります。
解説：
値の流れをもっと丁寧に追いたいときは、debugger を使う方法があります。
ブラウザの開発者ツールを開いた状態で debugger が実行されると、その場所で処理が一時停止します。
const price = 1200;
const tax = 0.1;
const total = price + price * tax;
debugger;
console.log(total);
一時停止した状態で、変数の値や処理の順番を確認できます。
「どこで値がおかしくなったのか」を探すときにとても便利です。
まずは console.log()、必要なら debugger という順で使い分けるとわかりやすいです。
解説：
ここでは、例外処理とデバッグが実際にどんな場面で役立つのかを見てみましょう。
実務では、事前チェック と エラー表示 と 原因調査 を組み合わせることが多いです。
try {
const user = data.user;
if (!user) {
throw new Error('user が存在しません');
}
console.log(user.name);
} catch (error) {
console.error(error.message);
}const name = input.value.trim();
if (name === '') {
console.log('未入力です');
}const items = [
{ id: 1, title: 'りんご' },
{ id: 2, title: 'みかん' }
];
console.table(items);このように、エラーが起きてから慌てるのではなく、途中の値を確認しながら原因を絞っていくのがデバッグの基本です。
解説：
例外処理やデバッグは便利ですが、使い方を間違えると原因が見えにくくなることがあります。
基本的な注意点を押さえておきましょう。
try {
riskyProcess();
} catch (error) {
console.log('失敗しました');
}
これだけだと、何が原因だったのか見えにくくなります。
少なくとも開発中は error の内容を確認する癖をつけると安心です。
デバッグ用の出力が多すぎると、必要な情報が埋もれたり、コードが読みにくくなったりします。
確認が終わったら整理する意識も大切です。
エラーの原因がわからないときは、いきなり全部を見ようとせず、入力値、条件分岐、返り値 などを順番に分けて確認していくと見つけやすいです。
例外処理とデバッグは、JavaScript / TypeScriptで安定したコードを書くために欠かせない基本です。
エラーが出たときに止まってしまうのではなく、どう受け止めて、どう調べるかがとても大切です。
例外処理とデバッグに慣れてきたら、次は次のようなテーマにも進みやすくなります。
最初は難しく感じても、「値を見る」「どこで止まったか見る」「小さく試す」を繰り返すだけで、デバッグはかなりやりやすくなります。