無害(?)なエラー (EOTD No.5)

2 min read読了の目安(約2300字 2

こちらAmetaです!

Error Of The Day(EOTD)も二週目に突入しました。第5回目は、このエラーです!

本日のエラー

シチュエーション

このエラーはローカル環境のルートパス(index.html)を表示した際、コンソールに表示されました。

エラー場所をみてみるとpreview.jsの35行目。

preview.jsは投稿する前に添付した画像を確認できるプレビュー機能を実装したファイルです。

35行目を確認。。

//preview.js

document.getElementById('image').addEventListener('change', (e) => {

どうやら、この行でエラーが起きたようでした。

しかし、アプリケーションの動作には全く影響がない様子。どうしたものか。。。

考察

Uncaught TypeError: Cannnot read property addEventListener of null at ~

まず、エラー文の頭2単語。
"Uncaught" & "TypeError" とは何ぞや?調べてみました。

https://www.educative.io/edpresso/what-is-an-uncaught-typeerror-in-javascript

このページで2単語は以下のように説明されていました。


”Uncaught means that the error was not caught in the catch part of the try-catch block.”

"Uncaught"は通常処理(try)と例外処理(catch)の、例外処理でも捉えきれないエラー

“The TypeError object represents an error when a value is not of the expected type.”

"TypeError"は値が本来の形式で渡されていないエラー

というふうに意訳してみました。

結論としては、

Uncaught TypeError = 例外としても処理しきれていない、値の形式が間違ったエラー

UncaughtTypeError = Uncautght + TypeError

数式のMarkdownがオシャンティー。

以上の事を大枠として踏まえて、エラー文を改めて確認。

Uncaught TypeError: Cannnot read property addEventListener of null at ~

この場合の"値の形式が間違った"というのはnullの事を指しているっぽい。

だとすると、"例外としても処理しきれていない"というのはnullには形式が存在しないから?

addEventListener of null、つまりnullで使おうとしているプロパティaddEventListenerが動かない。この従属関係を"preview.js"の方で捜索。

//preview.js
document.getElementById('image').addEventListener('change', (e) => {

なるほど!

document.getElementByIdで指定している"image"のidがhtml内に存在していないということか!

試しに、"image"のidを要素に持たない他のページを開いてみると同じエラーが表示されました。

解決

解決策としては、

条件分岐を用いて、"image"のidを持たないファイルでは"preview.js"を読み込まないようにする。

ということで"preview.js"の1行目にifの条件式を追加!!

変更前

//preview.js

document.getElementById('image').addEventListener('change', (e) => {

変更後

//preview.js

if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {

//省略

document.getElementById('image').addEventListener('change', (e) => {

//省略

}

変更後...エラーは無事立ち去られました!

SOTD(Summary Of The Day)

今回のエラーはアプリケーションの動作には問題がありませんでした。
ただコンソールを開いたときに毎度毎度エラー文が表示されて気になるものでした。

そのようなケースは初めてでしたが、最終的に無事解決できて一安心。

エラー文の先頭にある数単語のカテゴリーを理解しておくだけでも、それに続くエラー文を紐解く上で良いヒントになってくれるなぁと思いました。今日の学びです。。