Pugの変数をJavaScriptの変数に変換！

こんばんは！光です。

大手グローバル企業でWebエンジニアをやっています。

Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。

経歴や実績、プロフィールはこちら！

今流行の仮想通貨を自動売買してみました！

リモートワークでおすすめのグッズ紹介してみました！

今回はこのような質問をいただきました。

Pugの変数をJavaScriptの変数に変換できないかなぁ…

たまにこういう場面ってあるんですよね。

そこで今回はこちらの質問について解説していきます！

環境

JS側の変数に代入する

全ページの共通処理で変数を使いたかったのですが、すべてのページにJSファイルを用意してそこで変数を定義するのは微妙。

HTMLに値セットしておくのはもっと微妙。

というわけでPugに変数を定義します。

やることは単純でscriptタグの中でPugの変数を展開してあげるだけです。

- var str = 'sample';

body
  script(type='text/javascript').
      const str = '#{str}';
      alert(str);

ただ、注意が必要なのは文字列にする場合はシングルクォートかダブルクォートで囲う必要があるところですね。

数値や真偽値の場合はそのままで問題なさそうです。

ここまでできればあとはJSで共通処理を呼び出して定義した変数を使うだけですね！

でもscriptタグを作ってその中で定義するっていうのが、なんとなく無理矢理感あって微妙な気がします。

もうちょっと良いやり方ないですかね…