Zenn
🧚‍♀️

JavaScriptのヒアドキュメントで</script>が引っかかる場合の対処法

2022/06/28に公開
JavaScript
ヒアドキュメント
tech

JavaScriptでヒアドキュメント

ヒアドキュメントって便利ですよね・・・。
複数行の文字列は昔は改行文字を踏まえながら+=を繰り返したりしてましたが、
最近は複数行取り扱う場合は大抵どの言語でもヒアドキュメントを使ってます。
さて、そんなヒアドキュメントをJavaScriptでも使用することができます。
試しにJavaScriptの中でHTMLをヒアドキュメントで書いてみます。

const html = `
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Example</title>
        ${header}
    </head>
    <body>
        <div id="mobile" style="width: 600px;height:400px;"></div>
        <div id="pc" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            ${script}
        </script>
    </body>
    </html>        
`;

これは私のサイトのコードの一部ですが、上記のままだとエラーになります。
</script>タグのせいでヒアドキュメントが途中で止まってしまうからです。
ヒアドキュメントの中で</script>タグを使うには次のようにします。

</script>タグを無効化する

const html = `
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Example</title>
        ${header}
    </head>
    <body>
        <div id="mobile" style="width: 600px;height:400px;"></div>
        <div id="pc" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            ${script}
        </${""}script>
    </body>
    </html>        
`;

ポイントは</${""}script>です。
</script>タグは例えヒアドキュメントの中でも終了タグと見なされてしまい、
Unterminated template literal.Vetur(1160)のようなコンパイルエラーとなります。
${""}で空文字を挟んでタグを無効化すると、ヒアドキュメントとして機能するようになります。

補足

JavaScriptのヒアドキュメントはES６以降でないと使えません。

参考

teratail:jsヒアドキュメント内のscriptタグで閉じられてしまう

Discussion