Suffix Official Blogサフィックス公式ブログ

こんにちは、WebチームのNです。
先日、複数ページで共通のJavaScriptファイルを読み込ませていたのですが、
その時出たエラーがきっかけで、エラーを出さない書き方を意識するようになりました。
最近JavaScript使う機会が増えてきたので、理解を深めるためにその時の対処したエラーを振り返ります。

エラーが出た時に書いていたのは、画面をスクロールに合わせて要素をフェードインさせるコードです。
ロジック自体はフェードインに限らず、スクロール絡みの要素全般に使えたので、
処理を共通のJavaScriptファイルにまとめて、全ページで読み込む構成にしていました。
しかし検証ツールを見てみると、一部ページで下記のエラーが出ていました。

▼エラーになるコード

const fadeElement = document.querySelector('.js-fade');
const graphElement = document.querySelector('.js-graph');

function showElement(element){
 element.classList.add('is-show');
}

showElement(fadeElement);
showElement(graphElement);

elementが定義されていないからclassList()プロパティにアクセスできないというエラーです。
原因はdocument.querySelector(.js-graph)で取得しようとしている要素が現在のページに無いからです。
取得対象の要素が存在しない状態で関数内の classList を呼び出そうとしていたため、エラーになっていました。
.js-graph が存在するページでは問題なく動作するので、要素が存在する場合のみ処理を実行するようにすればエラーは消えます。

▼エラーを解消したコード

const fadeElement = document.querySelector('.js-fade');
const graphElement = document.querySelector('.js-graph');

function showElement(element){
 if (element) {
  element.classList.add('is-show');
 }
}
showElement(fadeElement);
showElement(graphElement);

修正自体はシンプルですが、今まで要素が存在する前提でコードを書いていたことに気づきました。
他の人もファイルを編集するかもしれないので、今は値がnullの可能性も考慮してコードを書くようにしています。
TypeScriptならこういうミスを事前に気づきやすくなるので、TypeScriptも書けるように精進します。