Pugファイルの中で宣言した変数
- const sample = #{sampleFromServer}
これを別ファイルのJavaScriptで使いたいという場面は多々あるのではないでしょうか?
よくある方法として下記を見受けます。
// PUGファイル内でidをキーにdataを持つ
script(src='sample.js' id='sampleValue' data=#{sampleValueFromServer})
// JavaScriptファイル内で読み込む
const param = JSON.parse(document.getElementById('sampleValue').getAttribute('data'));
ですが、これでは少し複雑すぎる気がします。
もっと簡単にしましょう。
// PUGファイル内で変数を宣言
script.
const sample = !{JSON.stringify(sampleValueFromServer)};
// 変数宣言より後でJavaScriptファイルを読み込む
script(src='./path/to/file.js');
// JavaScriptファイル内で使う
console.log(sample);
これだけで十分です。
ただ、どちらの方法も開発者モードでソースを確認すると表示されてしまうので取り扱いには注意するようにしましょう。