PugでJavaScriptを埋め込む方法
2024-10-06
Jade（またはPug）は、HTMLテンプレートエンジンとしてNode.jsで広く使われています。インラインJavaScriptをレンダリングする方法は、以下のようにいくつかあります。
script タグを使用する
直接HTMLのscriptタグ内でJavaScriptコードを記述します。
script
console.log('Hello from inline JavaScript!');
- 記号を使ってJavaScriptコードを埋め込む
Jade/Pugのテンプレート内で、- 記号を使ってJavaScriptコードを埋め込むことができます。
p
| The current time is:
- var now = new Date();
| #{now.toLocaleTimeString()}
変数を定義して使用
JavaScriptコードで変数を定義し、テンプレート内でその変数を表示することができます。
script
var greeting = 'Hello, world!';
p
| #{greeting}
注意
- セキュリティ上のリスクを軽減するために、インラインJavaScriptを適切にエスケープしてください。
- 複雑なロジックや大量のJavaScriptコードは、別ファイルに分割して管理する方が適切です。
- インラインJavaScriptは、読みやすさやセキュリティの観点から、過度に使用しないことが推奨されます。
Node.js、Express、Pugの連携
Node.jsでExpressフレームワークを使用し、Pugテンプレートエンジンを組み合わせて、上記の方法でインラインJavaScriptをレンダリングすることができます。ExpressのテンプレートエンジンとしてPugを設定し、ビューファイル内でインラインJavaScriptを記述します。
例
// app.js
const express = require('express');
const pug = require('pug');
const app = express();
app.set('view engine', 'pug');
app.get('/', (req, res) => {
res.render('index ', {
message: 'Hello from Pug!'
});
});
app.listen(3000, () => {
console.log('Server listening on port 3000');
});
// index.pug
html
head
title My Pug App
body
p #{message}
script
console.log('Hello from inline JavaScript!');
script
console.log('Hello from inline JavaScript!');
p
| The current time is:
- var now = new Date();
| #{now.toLocaleTimeString()}
この例では、- 記号を使ってJavaScriptコードをテンプレート内に埋め込んでいます。nowという変数を定義し、その値をテンプレート内で表示しています。
script
var greeting = 'Hello, world!';
p
| #{greeting}
// app.js
const express = require('express');
const pug = require('pug');
const app = express();
app.set('view engine', 'pug');
app.get('/', (req, res) => {
res.render('index ', {
message: 'Hello from Pug!'
});
});
app.listen(3000, () => {
console.log('Server listening on port 3000');
});
// index.pug
html
head
title My Pug App
body
p #{message}
script
console.log('Hello from inline JavaScript!');
外部JavaScriptファイルを使用する
- JavaScriptコードを別のファイルに分割し、HTML
node.js express pug
