【JavaScript】開いてるページに指定のIDやclassがなくてエラーになる時の対処法

プログラミング

この記事は、JavaScriptで開いているWEBページに、指定のIDやクラスがなくてエラーになり、そこで処理が止まってしまうという時の対処法について書いています。

分かりにくいので、ざっくりいうと、JavaScriptファイルでdocument.querySelector(“#result”)などの記述をしているけど、開いているWEBページはid=”result”の要素がなくてエラーになってしまうという感じです。

これ、最初どうしたらいいんだろうとすごく悩んだんですが、ネットでよい回答を見つけることができなかったので、同じく悩んでいる人の参考になると良いです。




JavaScriptで開いてるページに指定のIDやclassがなくてエラーになる時の対処法

JavaScriptで、開いてるWEBページに指定のIDやclassがなくてエラーになる時の対処法として、以下の3つを紹介します。

  • ①ファイルを分ける（htmlファイルに直書きする）
  • ②try catch構文でエラーを流す
  • ③if文で条件分岐する

どれもちょっとした記述が増えるだけで簡単に対処できます。

①ファイルを分ける（htmlファイルに直書きする）

これはタイトルの通りですが、JavaScriptファイルを分けて対処する感じです。

HTTPリクエストが増えてしまうというデメリットはありますが、サイトの規模や必要性に応じて対応してもらえれば。

ちなみに、HTTP/2なら問題ないですね。

もう一つは、htmlファイル内にscriptを直書きすることです。

JavaScriptのコードがhtmlファイル内にあるのはあまり推奨されていませんが、状況で…。

②try catch構文でエラーを流す

try-catch構文と言われる処理の仕方で、以下のような使い方をします。

try {
　// ここに処理を書く
　const result = document.querySelector("#result");
　result.textContent = "テキスト";
} catch(e) {
　// エラーになった時の処理を書く
　console.log(e);
}

必要な処理をtryの中に書いて、その処理がエラーになったらcatchの中の処理にうつります。

ちなみにcatch(e)の「e」にはエラー内容が入ってきます。

引数なので、eじゃなくてもなんでもいいです。

というか、エラー内容が不要であれば、「(e)」のかっこごと省いても問題ありません。

try {
　// ここに処理を書く
　const result = document.querySelector("#result");
　result.textContent = "テキスト";
} catch {}

エラーでその後のJavaScriptの記述が止まらないようにしたいだけなら、上記の書き方でOKです。

③if文で条件分岐する

最後はif文で「その要素があれば処理を実行する」ように条件分岐させる方法です。

具体的には以下のような感じです。

if (document.querySelector("#result")) {
　// ここに処理を書く
  const result = document.querySelector("#result");
  result.textContent = "テキスト";
}

上記のif()の中で、指定した要素が取得できればtrueが返ってきて、if文の中の処理が実行されます。

JavaScriptで開いてるページに指定のIDやclassがなくてエラーになる時の対処法：まとめ

最後に対処法をもう一度まとめておきます。

  • ①ファイルを分ける（htmlファイルに直書きする）
  • ②try catch構文でエラーを流す
  • ③if文で条件分岐する

上記3つが、 JavaScriptで、開いてるWEBページに指定のIDやclassがなくてエラーになる時の対処法でした。

ほかに「こんなやり方があるよ」というのがあれば、ぜひ教えてください！