ふりぶろぐ
Web Engineer's Blog
JavaScript

Pugの変数をJavaScriptの変数に変換!【Pug×JS】

Pug × JavaScript
りーふ

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

と思ったのでやってみました!

環境
  • Pug
  • JavaScript(ES6)

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

そこでPugに変数を定義して、それをJSで使えないかと考えました。

実際にやってみるとそんなに難しくはなかったです。

JS側の変数に代入する

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

- var str = 'sample';

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

ただ、注意が必要なのは文字列にする場合はシングルクォートかダブルクォートで囲う必要があるところですね。
数値や真偽値の場合はそのままで問題なさそうです。

あとがき

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

でもscriptタグを作ってその中で定義するっていうのが、なんとなく無理矢理感あって微妙な気がします。
もうちょっと良いやり方ないですかね…

ABOUT ME
りーふ
たまにブログを書いてるWebエンジニア。 サーバーサイドメインでインフラとフロントエンドもたまにやります。 Javaが得意。 Play Frameworkが好き。 本業は迷惑をかけない程度に手を抜くスタイル。 意識高い系は苦手。