こんばんは！光です。
大手グローバル企業でWebエンジニアをやっています。
Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。
今回はこのような質問をいただきました。
Pugの変数をJavaScriptの変数に変換できないかなぁ…
たまにこういう場面ってあるんですよね。
そこで今回はこちらの質問について解説していきます！
環境
- Pug
- JavaScript(ES6)
JS側の変数に代入する
全ページの共通処理で変数を使いたかったのですが、すべてのページにJSファイルを用意してそこで変数を定義するのは微妙。
HTMLに値セットしておくのはもっと微妙。
というわけでPugに変数を定義します。
やることは単純でscriptタグの中でPugの変数を展開してあげるだけです。
- var str = 'sample';
body
script(type='text/javascript').
const str = '#{str}';
alert(str);ただ、注意が必要なのは文字列にする場合はシングルクォートかダブルクォートで囲う必要があるところですね。
数値や真偽値の場合はそのままで問題なさそうです。
あとがき
ここまでできればあとはJSで共通処理を呼び出して定義した変数を使うだけですね！
でもscriptタグを作ってその中で定義するっていうのが、なんとなく無理矢理感あって微妙な気がします。
もうちょっと良いやり方ないですかね…
