【解説】try-catch-finally文の基本的な使い方【JavaScript】

【解説】try-catch-finally文の基本的な使い方【JavaScript】

try-catch文を使えば、エラーが起きても処理を継続して行ってくれます。

基本的な使い方がこちら↓

try {

  // エラーが発生するかもしれない処理

} catch (エラーを引数で受け取る) {

  // エラーが発生した時にする処理

} finally {

  // エラー発生してもしなくても行われる処理

}

ようはtryの処理でエラーが起きたら、catchの処理が行われるということです。

本来ならエラーが起きたらその場で処理が止まるかと。
ただtry-catchを使えば継続して処理が行われます。

ジト

ちなみにエラーは例外とも呼ぶよ

try-catch-finally文を使った処理エラー例

try-catch-finally文を使ったエラーサンプル例がこちら↓

let fruit = 'フルーツ';

try {
  console.log(fffruit);
} catch (e) {
  console.log(e.message);
} finally {
  console.log('エラー起きても起きなくても行うよ');
}

fffruit is not defined
エラー起きても起きなくても行うよ

try文の中でわざと定義されてない変数を使用。

この場合try文でエラーがおきて、catch文の中の処理が行われます。

catch文にて引数にエラー内容を受け取り、コンソールでそのエラーのメッセージを出力。

そしてfinally文にて、エラーが起きようが起きまいが行われる処理がされました。

try-catch-finally文を使った処理成功例

try-catch-finally文を使ったエラーが起きなかったサンプルがこちら↓

let fruit = 'フルーツ';

try {
  console.log(fruit);
} catch (e) {
  console.log(e.message);
} finally {
  console.log('エラー起きても起きなくても行うよ');
}

フルーツ
エラー起きても起きなくても行うよ

この場合はエラーが起きないため、try文の処理が行われます。

そしてcatch分の処理は行われず。

最後にエラーが起きようが起きまいが発生するfinallyの処理が行われました。

なぜtry-catch文を使うのか？？

「そもそもエラーが起きない記述すれば良くない？」
と思いますよね。

ただ内容によっては、エラーを完全に防げないときがあるんですよね。

例えば登録してないユーザーがログインするときだったり、API通信をしたときに予期せぬサーバーエラーがでたりなど。

このような防ぎようがない内容に対して、try-catch文が使われます。

try-catch文のネスト

ちなみにtry-catch文はネストが可能です。

let fruit = 'フルーツ';

try {
  console.log(fffruit);
} catch (e) {
  console.log(e.message);
  try {
    console.log(fruit);
  } catch (e) {
    console.log(e.message);
  }
} finally {
  console.log('エラー起きても起きなくても行うよ');
}

fffruit is not defined
フルーツ
エラー起きても起きなくても行うよ

try-catchにて意図的にエラーを行う

ちなみにtryにてthrow new Error()を使えば、意図的にエラーを発生させてcatchさせることが可能です。

let fruit = 'みかん';

try {
  console.log(fruit);
  if (fruit === 'みかん') {
    throw new Error('意図的にエラーを発生させました');
  }
  console.log('オレンジ');
} catch (e) {
  console.log(e.message);
} finally {
  console.log('エラー起きても起きなくても行うよ');
}

みかん
意図的にエラーを発生させました
エラー起きても起きなくても行うよ

「意図的にエラーを発生させました」という文字を、catchの「e」で受け取ってコンソールで反映しています。

tryでエラーが発生したあとの処理（console.log(‘オレンジ’)）は行われません。

2024年8月17日 【解説】throw new error()の意味をまとめてみた【JavaScript】

注意：構文エラーの場合は処理が継続されない

注意点としてtry-catchを使ったとしても、構文エラーの場合は通常通りエラーがでてしまいます。

下記の感じで↓

try {
  console.log(;
} catch (e) {
  console.log(e.message);
} finally {
  console.log('エラー起きても起きなくても行うよ');
}

Uncaught SyntaxError: Unexpected token ';' 

というのも大まかにいうと「①JavaScriptを読み込み」→「②内容を解析」→「③try-catchの処理」の順で行われるため。

構文エラーの場合は、②の解析の段階でエラーが発生します。

つまりtry−catchが行われないので、通常通りのエラーが起こり処理が止まるので注意しましょう。

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙