質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

1382閲覧

JavaScriptでエラーをキャッチできる場合とできない場合の違い

bowbow

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

3クリップ

投稿2023/01/29 16:17

前提

JavaScriptでエラーをキャッチしたいが,キャッチできる場合とできない場合がある.
(非同期,同期などという複雑な問題ではないと思われます.)

実現したいこと

キャッチできない理由を知り,キャッチできるようにコードを書き換えたい.

該当のソースコードと発生している問題・エラーメッセージ

JavaScritpt

1try { 2 aler(); //alertの「t」のつけ忘れ 3} catch (error) { 4 console.error("えらー:"+error); 5}

だと,コンソールに「えらー:ReferenceError: aler is not defined」が返ってくる.
=エラーがキャッチできている.

しかし,

JavaScritpt

1try { 2 alert(; //閉じカッコのつけ忘れ 3} catch (error) { 4 console.error("えらー:"+error); 5}

だと,「Uncaught SyntaxError: Unexpected token ';' 」が返ってくる.
=キャッチできていない.(ブラウザ?はキャッチしているが,上記コード上ではキャッチできていない.)

試したこと

上記のコードを実行し,コンソールの内容を見ました.

また,ここ↓も調べてみましたが,よく分かりませんでした.
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/try...catch
mozilla(上記)ではテキストエリアに前者のエラーも,後者のエラーもメッセージを出力します.
しかし,コンソールには前者のエラーは出力されますが,後者のエラーは何も表示されていません.
特別なエラー検知の仕組みを準備しているものと推測されますが,詳しいことはよく分かりません.

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

catchできない理由はエラーメッセージに表示されている通り、「シンタックスエラー(構文ミスによるエラー)だから」です。

  • 前者のエラーはaler()を実行しようとしたけどできなかったので、キャッチできました。
    • aler()という任意で定義したかもしれない関数を検索してみたけどなかったという感じです。
    • 処理上のエラーをプログラムで検知しています。
  • 後者のエラーはシンタックスエラーです、
    • つまりわかりやすく極端にいうと、それはJavaScriptのコードではありません。
    • alert(;なんていう文法はJavaScriptには存在しません。
    • よって、そもそもJavaScriptを書いていないので全体的にコードが機能していません(例えば、.jsというファイルの中に、pythonの文法で書いたらエラーになりますよね。そういう感じです)。
    • プログラム自体が動作していないのですから、try/catchどころの問題ではありません。
    • ブラウザ(開発者ツール)が「それはJavaScriptの文法とは違うから何もできないよ!!!」と警告してくれています。

ご質問の内容は後者のコードもtry/catchさせたいとのことですが、無理だと思います。
だってそのコードはJavaScriptではないのですから…!

投稿2023/01/29 17:09

編集2023/01/29 18:10
Cocode

総合スコア2314

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bowbow

2023/01/30 01:13

ありがとうございます。原理をやさしく解説していただきまして。 シンタックスエラーはtry...catch...ではキャッチされないのですね。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/try...catch 上記mozillaのページでは、「try...catch...」の機能の説明や実演と見せつつ、実は、try...catch...を使わず、エラーメッセージ「Error: Unexpected token ';'」を出力している( alert(;の場合 )・・・ということなのですね。 「try...catch...」以外に、エラー検知に使えるビルトインの仕組み等ありますでしょうか。
maisumakun

2023/01/30 02:27

そもそも、なぜシンタックスエラーをJavaScriptで検出したいのでしょうか? 利用者がJavaScriptを入力できるサイトを作っているのでなければ、作成時点で潰しておくべきものです。
bowbow

2023/01/30 05:12

お忙しいところお付き合いいただきありがとうございます。 「利用者がJavaScriptを入力できるサイトを作っている」ということです。 限定された環境で、特定の人が利用するサイトです。 前述のmozillaのページを作れれば、ほぼ目的達成です。 mozillaのページがどうなっているのかを探ってみます。 テキストエリアに入力された内容を構文解析するプログラムを独自に作っている?? または、 「それはJavaScriptの文法とは違うから何もできないよ!!!」という警告をブラウザから取得している?? かな...と思っています。
ypp

2023/01/30 05:59

それはevalを使用しているからです try { eval("alert(;"); } catch(e) { console.log("エラーメッセージ:", e); } これを実行すると分かります。
bowbow

2023/01/30 16:17

やってみました.evalの引数にしてやるとキャッチできるのですね. 上記のmozillaのページにもeval()が含まれていました(使われ方の詳細までは見られていませんが). 本を読んだり,ネット検索をしたりしても,なかなか説明が見つからなかったので,たいへん助かりました. ありがとうございました!!
bowbow

2023/02/03 10:22

これ↓でもキャッチできました。 try { Function("alert(;")(); } catch (e) { console.error("えらー:"+e); }
guest

0

try-catchはエラーなど例外処理が発生しても安全に動作させる(もしくは終了させる)仕組みです。したがって、そもそもが解釈できない文法エラーはその安全装置が作動しないのでcatchできません

投稿2023/01/30 00:18

yambejp

総合スコア114839

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bowbow

2023/01/30 01:21

ありがとうございます。 安全装置としてtry...catch...は使えないのですね。 webページ上で、JavaScriptのどんなエラーが起こったかをDBに送信するような仕組みを作ろうとした場合、使えそうな仕組みはありますか(曖昧な表現で申し訳ありません)。調べてみるべきキーワードなど教えていただけると幸いです。 (ちなみに使える言語・DBは、JavaScript、PHP、mysqlで、それ以上の深い機能は使えません。)
yambejp

2023/01/30 01:29

文法エラーの場合以下のいずれかが妥当でしょう ・エディタの文法エラーチェッカーをつかう ・WEBにある文法エラーチェッカーをつかう ・エラーが起きる前提でアップし、ブラウザの開発ツールでエラー発生行を確認する
guest

0

evalやFunctionで評価すれば良いかと思います

投稿2023/01/30 05:29

a.com

総合スコア871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bowbow

2023/01/30 16:10

確か,evalはエバリュエーション(評価)の頭文字でしたね. evalの引数にコードを入れて実行する用途で使ったことはありました. なぜ関数名がevalなのか不思議でしたが,やはり評価するためのものなのですね.元々.たぶん. 勉強になりました!! ありがとうございます.
guest

0

違いについては Cocode さんの回答があるので、以下の点だけ。

mozilla(上記)ではテキストエリアに前者のエラーも,後者のエラーもメッセージを出力します.

catch されていない例外やエラーを受け取る仕組みがあります。
https://developer.mozilla.org/ja/docs/Web/API/Window/error_event

投稿2023/01/30 01:39

int32_t

総合スコア20882

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bowbow

2023/01/30 05:15

ありがとうございます! このようなものがあったのですね。 道が開けた気がします!!! これから試してみます。とりいそぎお返事まで。
bowbow

2023/02/03 10:20

これ↓で試してみました。 <button id="btn">btn</button> <script> const btn = document.getElementById('btn'); window.addEventListener("error", function(){ console.log("えらー:"); }); btn.addEventListener('click', function(){ alert(); }); </script> 「aler();」 はキャッチできましたが、 「alert(;」はキャッチできませんでした。Uncaught SyntaxError となってしまいました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問