3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【PUG】Pugファイルで宣言した変数を別ファイルのJSで読み込む

Last updated at Posted at 2021-06-29

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);

これだけで十分です。
ただ、どちらの方法も開発者モードでソースを確認すると表示されてしまうので取り扱いには注意するようにしましょう。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?