【pug】javascriptを直接書く方法

htmlテンプレートにpugを選んだ場合、素のscriptを書こうとすると迷います。
今回は、pugでjavascriptを書く方法について記載します。

また、本記事で記述するコードは、以前投稿したコードです。
blog.websandbag.com

期待される出力結果

下記のように記述されれば結果として正しいです。

<html>
    <head>
        <script src="script.js"></script>
        <script>
            var value = new Value("<?php echo($value)?>")
        </script>
    </head>
    <body>
        <script>
            console.log(value.getValue());
        </script>
    <body>
</html>

実際のテンプレート

scriptタグ内の処理を書く場合は、処理の前に「|(パイプ)」を置くのが良いと思います。
先頭にパイプを記述することで、先頭にパイプがある続いた行のテキストはタグの内部扱いになります。

またプレーンテキストとインラインタグを共存させられるので、phpタグを挿入する場合にも有効です。

Plain Text – Pug

html
    head
        script(src="script.js")
        script
            | var value = new Value("<?php echo($value)?>")
    body
        script
            | console.log(value.getValue());

1行にする場合

下記のように、1行にすることもできます。
スクリプトの場合は数行に及ぶ場合もありますので、パイプで改行できるようにした方が現実的だと思います。

html
    head
        script(src="script.js")
        script var value = new Value("<?php echo($value)?>")
    body
        script console.log(value.getValue());