エラーの種類 (SyntaxError, ReferenceError など)

JavaScriptでは、プログラムの実行中に発生するエラーを適切に処理することが重要です。エラーにはいくつかの種類があります。

• SyntaxError: 文法が正しくない場合に発生します。例えば、括弧が閉じられていない場合や構文に誤りがあるときに発生します。

  let x = ; // SyntaxError: Unexpected token ';'

• ReferenceError: 存在しない変数にアクセスしようとした場合に発生します。

  console.log(y); // ReferenceError: y is not defined

• TypeError: 値のデータ型が正しくない操作を行おうとした場合に発生します。例えば、数値に対して文字列操作を行おうとしたときなどです。

  let num = 5;
  num.toUpperCase(); // TypeError: num.toUpperCase is not a function

• RangeError: 値が許容範囲を超えた場合に発生します。例えば、無限に近い数値を扱おうとする場合などです。

  function recurse() {
    recurse(); // RangeError: Maximum call stack size exceeded
  }
  recurse();

try...catch構文

エラーが発生する可能性があるコードには、try...catch 構文を使ってエラーハンドリングを実装します。これにより、エラーが発生した際にプログラムがクラッシュするのを防ぎ、適切に処理することが可能です。

• 基本的な使い方

  try {
    let result = 10 / 0;
    console.log(result); // 無限大になるがエラーではない
  
    let undefinedVariable;
    console.log(undefinedVariable.someProperty); // TypeError: Cannot read property 'someProperty' of undefined
  } catch (error) {
    console.error('エラーが発生しました:', error.message);
  } finally {
    console.log('エラー処理が完了しました。');
  }

  • try ブロック内でエラーが発生すると、catch ブロックに制御が移り、エラーメッセージが処理されます。
  • finally ブロックは、エラーの有無に関わらず、常に実行される部分です。

デバッグの基本（console.log, ブラウザのデバッガ）

JavaScriptでエラーを見つけて修正するために、デバッグの基本的な手法を使います。

• console.log() を使ったデバッグconsole.log() を使うことで、変数の値やプログラムの実行状況を確認できます。これにより、エラーが発生している箇所や原因を特定しやすくなります。

  let a = 10;
  console.log('変数aの値:', a); // 出力: 変数aの値: 10

• ブラウザのデバッガツール モダンなブラウザには開発者ツールが組み込まれており、コードのステップ実行や変数の状態を詳細に確認することができます。

  • ブレークポイントの設定: ブラウザの開発者ツールを使ってコードの特定の行にブレークポイントを設定し、コードがその行に到達したときに実行を一時停止させることができます。これにより、各ステップごとに変数の状態を観察することが可能です。
  • ステップ実行: ブレークポイントで停止した後、コードを1行ずつ実行して挙動を確認することで、どこで問題が発生しているのかを詳しく追跡することができます。

• console.error(), console.warn(), console.table()

  • console.error(): エラーメッセージをコンソールに表示します。視覚的にエラーを強調するために使用します。

    console.error('エラーが発生しました！');

  • console.warn(): 警告メッセージを表示します。

    console.warn('これは警告です。');

  • console.table(): オブジェクトや配列のデータを表形式で表示するのに便利です。

    let people = [
      { name: '太郎', age: 25 },
      { name: '花子', age: 22 }
    ];
    console.table(people);

エラー処理のまとめ

エラー処理は、プログラムの信頼性を高めるために重要です。try...catch 構文を使って予期しないエラーに対処し、console.log や開発者ツールを活用することで、問題の原因を特定しやすくなります。これらのテクニックを使いこなして、エラーに強い堅牢なコードを書くことを目指しましょう。