ブラウザコンソールのエラーメッセージに物申す

2014年から 初心者向けの プログラミング（JavaScript）の講座をやっている。
説明用のブラウザにはGoogle Chromeを使ってきた。圧倒的なシェアを誇っているみたいだから。

エラーメッセージが意味不明

「何とかしてほしい！」と強く思うのが、「コンソール」に表示されるエラーメッセージだ。表示するエラーメッセージを考えた人は、自分が初心者だったころのことを完全に忘れているんじゃないだろうか。

とくに「わけがわからない」と思うのが、たとえば次のようなコードを実行したときに表示されるメッセージだ（「function f」のあとに間違えてaを書いちゃった）。

const v = f();
alert(`f()から返ってきた値は${v}です`);

function f a() {
  return 3;
}

このときGoogle Chromeのコンソールに表示されるメッセージは次の図のようになる。

「Uncaught SyntaxError: Unexpected identifier 'a'」

Uncaughtとはなんぞや。初心者がわかるわけがない。

Uncaughtだから、catchできなかったんだろうと、例外処理を知っていれば、まあ想像がつく。

「じゃあ、catchしてみるか」と思って次のようにコードを変えてみる。「構文エラーって例外でcatchできるんだろうか？　そんな話は聞いたことがないなあ〜」と思いつつ。

try {
  const v = f a();
  alert(`f()から返ってきた値は${v}です`);
}
catch (err) {
  alert("エラーが発生したので、処理を中断しました。");
}

function f() {
  return 3;
}

それでもメッセージは変わらない。

相変わらず Uncaught SyntaxError だ。

「おいおい、catchしようとしてもできないんだけど、Uncaughtとはなんだよ」

なんか勘違いしているのかと思ってChatGPTに聞いてみた。

私:
JavaScriptの構文エラーはcatchできるんですか？ 「Uncaught SyntaxError」というメッセージが出たので catch しようとしたのですが、できないみたいなのですが？

GPT:
「Uncaught SyntaxError」は、JavaScriptのコードがパースされる際に発生するエラーです。この種のエラーは、実際にコードが実行される前に発生しますので、通常のtry-catchブロックで捕捉することはできません。

例えば、以下のコードは構文エラーを起こします:

   const x = 10;
   if (x > 5) {
     console.log('xは5より大きいです');

このコードには閉じるカッコがないため、JavaScriptエンジンはこれをパースする際にエラーを発生させます。

もし、このような構文エラーをtry-catchブロックで捕捉しようとしても、構文エラー自体が発生する前にエラーを捕捉することはできません。

そのため、構文エラーはソースコードを修正することでのみ解決できます。エディタやIDEの構文チェック機能、またはLintツール（例: ESLint）を使用して、コードの構文エラーを事前に検出し修正することが推奨されます。

一方、ランタイムエラー（例: 参照エラー、タイプエラーなど）は、コードが実行される際に発生するエラーであり、これらのエラーはtry-catchブロックを使用して捕捉できます。

やっぱり、構文エラーは例外では処理しないよな〜。もっともな話だ。

私:
では、メッセージがおかしくないですか？　 "Uncaught SyntaxError" ではなくて "SyntaxError" にするべきではないですか？

GPT:
"Uncaught SyntaxError"というメッセージについて考えると、これは実際にはブラウザやJavaScriptのランタイムが提供しているメッセージの一部であり、そのエラーが捕捉されなかったこと（つまりtry-catchなどで捕捉されなかったこと）を指しています。

JavaScriptの構文エラー自体は実行前のパース段階で検出されるため、実行が開始される前にエラーが発生することが多いです。そのため、これらのエラーを通常のtry-catchブロックで捕捉することはできません。この背景を考えると、"Uncaught"という言葉が含まれるのは納得できるかもしれません。

しかしながら、このメッセージが混乱を引き起こす場合もあるかもしれません。実際には「捕捉できない」わけではなく、「通常の方法で捕捉できない」のが正確です。その意味で、"Uncaught"という言葉の使用が紛らわしいと感じる方もいるかもしれません。

しかし、このメッセージはブラウザやJavaScriptエンジンの実装に依存するもので、歴史的な背景や他のエラーメッセージとの整合性など、多くの要因が影響しています。現実の開発では、このメッセージを理解し、それに基づいて適切な対処をすることが大切です。

う〜ん、「この背景を考えると、"Uncaught"という言葉が含まれるのは納得できるかもしれません。」は嘘だろ。納得できねえよ。まあ、たしかにcatchはされていないけれどもな〜。「例外処理してない普通の文だって、catchされてねえだろ〜。それじゃ、ほとんどの文がuncaughtじゃねえかよ。」

なんでUncaughtなんてつけるのか、Chrominum Code Searchなるものが見つかったので、"Uncaught SyntaxError"で検索してみた（このサイトでいいのでしょうか？）。

ざっと見てみたところ、まずUncaughtかCaughtかで分けちゃっているように見えた。それが最初の分かれ道。caughtされていないから、uncaughtのようだ（本当に、ちょっと覗いてみただけなので、嘘かもしれません）。

UncaughtかCaughtは大問題？

処理系作る側からすると、UncaughtかCaughtは大問題なんだろうか。それで、Uncaughtが頭につくんだろうか。それとも、最初に書いた人がそういうコードを書いたから、ずっとそうなっている？

いずれにしろ、ユーザーにとってメッセージがわかりやすいかどうかなどという視点はまったく入っていないようだ。特に初心者には意味不明。

メッセージからUncaughtなんて全部取ってしまえばいいのに。"Syntax Error"のほうがよっぽどわかりやすい（それだと困ることあるかな？）。

エラーメッセージって、意味を伝えるためにあるんだよね？　意味伝わらない文字列書いといて意味あるの？

せめて、「初心者モード」を作るとかしてほしいな〜。最初はみんな初心者なのよ。その事実、忘れちゃう人多いみたいだけど。

ほかのブラウザでは

「ほかのブラウザではどうなるんだろう」と思って、一番最初のコードのファイルを他のブラウザで開いてみたら、Firefox、Edgeでは同じく「Uncaught SyntaxError」となった（後ろに続くメッセージは少し違うけれど）。

Safariでは次のように表示された。

SyntaxError: Unexpected identifier 'a'. Expected an opening '(' 
before a function's parameter list.

（構文エラー：予期されていない識別子 'a'。関数の引数リストの前には'('が
くるはずですが...。）

うわっ、わかりやすい。初心者向けにはSafariを使うほうがいいのかも...。

でも、Windowsで動かない...。最近の講座参加者は、7:3から8:2ぐらいで、macOSの人のほうが多いけれど、Windowsの方々を無視はできないな〜。悩ましい。