try で囲む範囲はどこまで広げてよいですか。

失敗しうる行と、その値をすぐ使う行までにします。関数まるごとを囲むと、catch に落ちたときにどの行で失敗したのかが分からなくなり、手当ての内容も決められません。逆に囲みが狭すぎて、失敗しうる行が try の外にあるのがいちばん多い間違いです。

catch で受け取ったエラーを console.log に出すだけでは足りませんか。

開発中の自分には足りますが、利用者には何も伝わりません。コンソールを開く人はほとんどいないので、画面に出ていなければ失敗は無かったことになります。この章の最後の回で、画面に出す形まで作ります。

finally に return を書いてもよいですか。

書けますが避けてください。finally の return は try や catch の return を上書きするので、try で返したはずの値が黙って消えます。finally には値を返さない後始末だけを置くのが安全です。

try catch finally｜コードで実践

このレッスンで分かること

try で囲んだ範囲の失敗を catch が受け取り、その先の処理が止まらなくなります

finally は成功でも失敗でも必ず走るので、後始末の置き場所になります

1 行の失敗で、下の処理がまとめて止まる

入門で扱った作品データは、自分の手で配列に書いたものでした。自分で書いた配列は形が崩れないので、失敗を考える必要がありませんでした。

実践では、作品データが文字列で外から届きます。途中で切れていることも、配列ではないものが来ることもあります。何も手当てをしていないと、その 1 行で例外が飛びます。

JavaScript

const text = '[{"id":1,"title":"プロフィールサイト"';
const works = JSON.parse(text);
console.log("ここには来ない");

例外が飛ぶと、その関数の残りは実行されません。呼び出し元へさかのぼりながら受け止める場所を探し、どこにも無ければページの JavaScript がそこで止まります。作品一覧が出ないだけのつもりが、あいさつも時計もフォームも動かない画面になります。

`try` で囲み、`catch` で受け取る

try { } の中で起きた例外は、すぐ下の catch (error) { } が受け取ります。受け取った時点で例外は止まり、catch を抜けたあとの行はふつうに動きます。

JavaScript

try {
  const works = JSON.parse(text);
  console.log(works.length);
} catch (error) {
  console.log(error.name); // SyntaxError
}

console.log("ここには来る");

受け取る error は Error オブジェクトです。中身の使い分けは次のとおりです。

プロパティ	中身	分岐に使ってよいか
`name`	エラーの種類の名前	使ってよい
`message`	人が読むための説明文	使わない
`stack`	どこで起きたかの経路	使わない

message の文言は処理系によって違います。同じ壊れた JSON でも、ある環境では「Unexpected end of JSON input」で、別の環境では「JSON Parse error」です。error.message === "..." で分岐を書くと、書いた環境でだけ動くコードになります。種類で分けたいときは name を見ます。

自分で throw した例外も、同じ catch が受け取ります。JSON としては読めるのに中身が期待と違う、という失敗はこれで扱えます。

JavaScript

try {
  const count = Number("たくさん");
  if (Number.isNaN(count)) {
    throw new TypeError("件数が数値ではありません");
  }
} catch (error) {
  console.log(error.name); // TypeError
}

`finally` は必ず走る

finally { } は、try が最後まで通っても catch に落ちても、必ず走ります。読み込み中の表示を消す、押せなくしたボタンを戻すといった、結果に関係なくやることをここに置きます。

JavaScript

function run(text) {
  try {
    console.log("1 try");
    return JSON.parse(text);
  } catch (error) {
    console.log("2 catch");
    return null;
  } finally {
    console.log("3 finally");
  }
}

run("[]") は 1、3 の順、run("こわれた") は 1、2、3 の順で出ます。try の中に return があっても、値を返す直前に finally が走ります。だから途中で返す関数の後始末は finally に置くのが確実です。同じ後始末を try の末尾と catch の末尾に 2 回書くと、あとで片方だけ直して片方が残る事故が起きます。

よくある間違い

失敗する行が try の外にある — 囲むのは失敗しうる行です。JSON.parse を外に出したまま、その下の行だけを囲んでも受け止められません。逆に囲みすぎもよくありません。関係のない処理まで入れると、どこで失敗したのかが catch から分からなくなります
catch を空にする — 画面は止まらなくなりますが、なぜ何も出ないのかが誰にも分からなくなります。動いているように見えて、失敗したという事実だけが消えます。受け取ったら必ずどこかに残します

このレッスンで分かること

try で囲んだ範囲の失敗を catch が受け取り、その先の処理が止まらなくなります

finally は成功でも失敗でも必ず走るので、後始末の置き場所になります

1 行の失敗で、下の処理がまとめて止まる

入門で扱った作品データは、自分の手で配列に書いたものでした。自分で書いた配列は形が崩れないので、失敗を考える必要がありませんでした。

JavaScript

const text = '[{"id":1,"title":"プロフィールサイト"';
const works = JSON.parse(text);
console.log("ここには来ない");

`try` で囲み、`catch` で受け取る

JavaScript

try {
  const works = JSON.parse(text);
  console.log(works.length);
} catch (error) {
  console.log(error.name); // SyntaxError
}

console.log("ここには来る");

受け取る error は Error オブジェクトです。中身の使い分けは次のとおりです。

プロパティ	中身	分岐に使ってよいか
`name`	エラーの種類の名前	使ってよい
`message`	人が読むための説明文	使わない
`stack`	どこで起きたかの経路	使わない

自分で throw した例外も、同じ catch が受け取ります。JSON としては読めるのに中身が期待と違う、という失敗はこれで扱えます。

JavaScript

try {
  const count = Number("たくさん");
  if (Number.isNaN(count)) {
    throw new TypeError("件数が数値ではありません");
  }
} catch (error) {
  console.log(error.name); // TypeError
}

`finally` は必ず走る

JavaScript

function run(text) {
  try {
    console.log("1 try");
    return JSON.parse(text);
  } catch (error) {
    console.log("2 catch");
    return null;
  } finally {
    console.log("3 finally");
  }
}

よくある間違い

失敗する行が try の外にある — 囲むのは失敗しうる行です。JSON.parse を外に出したまま、その下の行だけを囲んでも受け止められません。逆に囲みすぎもよくありません。関係のない処理まで入れると、どこで失敗したのかが catch から分からなくなります
catch を空にする — 画面は止まらなくなりますが、なぜ何も出ないのかが誰にも分からなくなります。動いているように見えて、失敗したという事実だけが消えます。受け取ったら必ずどこかに残します

try catch finally

1 行の失敗で、下の処理がまとめて止まる

`try` で囲み、`catch` で受け取る

`finally` は必ず走る

よくある間違い

要件

入出力例

ヒント

メモ

try catch finally

1 行の失敗で、下の処理がまとめて止まる

`try` で囲み、`catch` で受け取る

`finally` は必ず走る

よくある間違い

要件

入出力例

ヒント

メモ

try catch finally

1 行の失敗で、下の処理がまとめて止まる

try で囲み、catch で受け取る

finally は必ず走る

よくある間違い

要件

入出力例

ヒント

メモ

try catch finally

1 行の失敗で、下の処理がまとめて止まる

try で囲み、catch で受け取る

finally は必ず走る

よくある間違い

要件

入出力例

ヒント

メモ

`try` で囲み、`catch` で受け取る

`finally` は必ず走る

`try` で囲み、`catch` で受け取る

`finally` は必ず走る