JavaScriptのテンプレートリテラルはJSPファイルの中では使えないのでその解決策

2022年9月28日 最終更新日時 : 2024年6月19日 山崎講師山崎講師

ふと気になったので実験してみました。
JavaScriptのテンプレートリテラルとJSPのELはどちらも同じ表記（${}）を使いますね。

正確には、

JavaScriptのテンプレートリテラルでは${変数名}

JSPのELでは${式}

でちょっと違うのですが、式は変数名で構成されることもあるので同じと考えたいと思います。

もしも、変数名が衝突したらどうなるのか？
気になったので実験してみました。


すると、JSPファイルではJavaScriptのテンプレートリテラルが無効のようですね。
一つ賢くなりました。

考えてみればJSPはServletに変換されて実行されるので当然と言えるかもしれません。

＜HTMLの中ではテンプレートリテラルは有効＞

<!DOCTYPE html>
<html>
    <head>
        <title>HTML page</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <script>
            let age = 19;
            alert(`I am ${age} years old.`);
        </script>
    </body>
</html>

＜JSPの中ではテンプレートリテラルは無効＞

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <script>
            let age = 19;
            alert(`I am ${age} years old.`);
        </script>
    </body>
</html>

念のためJSPをサーブレットに変換して確かめてみます。

例えば56行目を見ると${age}の部分をELとして評価しようとしているのが見て取れます。

package org.apache.jsp;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.jsp.*;

public final class newjsp_jsp extends org.apache.jasper.runtime.HttpJspBase
    implements org.apache.jasper.runtime.JspSourceDependent {

  private static final JspFactory _jspxFactory = JspFactory.getDefaultFactory();

  private static java.util.List<String> _jspx_dependants;

  private org.glassfish.jsp.api.ResourceInjector _jspx_resourceInjector;

  public java.util.List<String> getDependants() {
    return _jspx_dependants;
  }

  public void _jspService(HttpServletRequest request, HttpServletResponse response)
        throws java.io.IOException, ServletException {

    PageContext pageContext = null;
    HttpSession session = null;
    ServletContext application = null;
    ServletConfig config = null;
    JspWriter out = null;
    Object page = this;
    JspWriter _jspx_out = null;
    PageContext _jspx_page_context = null;

    try {
      response.setContentType("text/html;charset=UTF-8");
      response.setHeader("X-Powered-By", "JSP/2.3");
      pageContext = _jspxFactory.getPageContext(this, request, response,
      			null, true, 8192, true);
      _jspx_page_context = pageContext;
      application = pageContext.getServletContext();
      config = pageContext.getServletConfig();
      session = pageContext.getSession();
      out = pageContext.getOut();
      _jspx_out = out;
      _jspx_resourceInjector = (org.glassfish.jsp.api.ResourceInjector) application.getAttribute("com.sun.appserv.jsp.resource.injector");

      out.write("\n");
      out.write("<!DOCTYPE html>\n");
      out.write("<html>\n");
      out.write("    <head>\n");
      out.write("        <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n");
      out.write("        <title>JSP Page</title>\n");
      out.write("    </head>\n");
      out.write("    <body>\n");
      out.write("        <script>\n");
      out.write("            let age = 19;\n");
      out.write("            alert(`I am ");
      out.write((java.lang.String) org.apache.jasper.runtime.PageContextImpl.evaluateExpression("${age}", java.lang.String.class, (PageContext)_jspx_page_context, null));
      out.write(" years old.`);\n");
      out.write("        </script>\n");
      out.write("    </body>\n");
      out.write("</html>");
    } catch (Throwable t) {
      if (!(t instanceof SkipPageException)){
        out = _jspx_out;
        if (out != null && out.getBufferSize() != 0)
          out.clearBuffer();
        if (_jspx_page_context != null) _jspx_page_context.handlePageException(t);
        else throw new ServletException(t);
      }
    } finally {
      _jspxFactory.releasePageContext(_jspx_page_context);
    }
  }
}

解決策

この問題を解決するには、JavaScriptのテンプレートリテラル内でEL式を適切にエスケープします。

以下のコードの19行目の\${age}がそうです。(Windows環境ではバックスラッシュが円マークで表示されます)

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <script>
            let age = 19;
            alert(`I am \${age} years old.`);
        </script>
    </body>
</html>

以上、「JavaScriptのテンプレートリテラルはJSPファイルの中では使えないのでその解決策」でした。

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
対象読者
新入社員
前の記事
robocopyコマンドでバックアップのバッチファイルを作成する方法(Windowsのコマンド・プロンプト)
2022年9月20日
次の記事
EclipseでJavaを学ぶ人のための参考資料
2022年11月5日