Zenn
🧎‍♂️

ejsでincludeで読み込んだファイルがエラーになったとき

2024/11/06に公開
JavaScript
ejs
マークアップ
tech

EJS で class が原因のエラー解消方法と対処法

EJS（Embedded JavaScript）を使ったテンプレートエンジンで、特定の引数を渡した際にエラーが発生することがあります。今回は、class という引数名を渡した際に発生したエラーとその解決方法について解説します。

エラーの概要

以下のコードで class というプロパティを引数として include メソッドに渡した際に、予期せぬエラーが発生しました。

<%- include('../components/_illust.ejs', { class: "illust-01", position: "left-top" }) %>
<%- include('../components/_illust.ejs', { class: "illust-02", position: "right-top" }) %>

エラーメッセージ：

Unexpected token ')' in /path/_illust.ejs while compiling ejs

このエラーは、class という名前が原因で発生している可能性がありました。

原因の調査

JavaScriptでは、class は予約語の一つで、クラス宣言に使用されます。テンプレートエンジンの EJS では JavaScript の構文を解析しているため、class という名前のプロパティが誤って解釈され、エラーを引き起こしていたと考えられます。そこで、class の代わりに className というプロパティ名を使用することで解決を試みました。

解決策

class の代わりに className を使用し、エラーが解消されるか確認しました。

<%- include('../components/_illust.ejs', { className: "illust-01", position: "left-top" }) %>
<%- include('../components/_illust.ejs', { className: "illust-02", position: "right-top" }) %>

結果：この変更により、エラーが解消されました。

まとめとポイント

EJSや他のテンプレートエンジンでは、予約語を避けるために引数名に工夫を加える必要がある場合があります。もし類似のエラーが発生した際には、以下の点を確認してください。

  1. 予約語の確認：JavaScriptやテンプレートエンジンにおいて、予約語に該当するプロパティ名は避けるようにしましょう。
  2. 代替のプロパティ名：class であれば className、for であれば htmlFor など、代替のプロパティ名を用いることで、エラーを回避できます。
  3. エラーメッセージの把握：エラーが発生した際には、エラーメッセージをしっかり確認し、コードの該当部分を読み返すことが問題解決の近道です。

おわりに

今回のケースでは、class を className に変更するという小さな修正で問題が解決しましたが、テンプレートエンジンを扱う際にはこのような名前の問題が起こり得るため、引数名の選定には気を配ると良いでしょう。この記事が、EJS を使う際の参考になれば幸いです。

Discussion