close

Template Engine での 使用 Express.js

Web 開発では、サーバーからのデータを Web ページに表示することは、インタラクティブで動的なユーザー エクスペリエンスを作成するために重要です。 ここで Template Engine 助け Express.js になります。 A は Template Engine 、サーバーからのデータを HTML コードに挿入することによって、動的な HTML テンプレートを作成できるツールです。

なぜ使用するのか Template Engine ?

Template Engine HTML マークアップをサーバーからのデータから分離するのに役立ちます。 これにより、コードの各行にデータを埋め込む必要がなく、HTML コードをより簡単に管理できるようになります。 代わりに、HTML コード内に「プレースホルダー」または「タグ」を作成し、 Template Engine 後でサーバー側のデータを埋め込みます。

Template Engine での 使用 Express.js

Express.js template engine Pug(旧名 Jade) や EJS(Embedded JavaScript) など、 さまざまな をサポートしています。 以下は、 での Pug と EJS の使用例です Express.js。

パグの使い方 Template Engine

Pug をインストールする: npm 経由でパッケージをインストールする必要があります pug。 

npm install pug --save

Configure Template Engine: アプリケーションの構成ファイル(例: app.js) で、Pug を として定義します template engine。 

app.set('view engine', 'pug');

Pug テンプレートの作成: views ディレクトリに Pug ファイルを作成します。 たとえば、次の index.pug ファイルを作成します。 

doctype html  
html  
  head  
    title My Express App  
  body  
    h1 Welcome to My Express App  
    p #{message}

ルート処理とデータ レンダリング: ルート処理では、 を template engine 使用してデータを に渡すことができます res.render()。 

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

EJSの使用 Template Engine

EJS のインストール: ejs npm 経由でパッケージをインストールします。 

npm install ejs --save

Configure Template Engine: template engine アプリケーションの構成で EJS を として定義します。 

app.set('view engine', 'ejs');

EJS テンプレートの作成: views ディレクトリに EJS ファイルを作成します。 たとえば、次の index.ejs ファイルを作成します。 

<!DOCTYPE html>  
<html>  
<head>  
  <title>My Express App</title>  
</head>  
<body>  
  <h1>Welcome to My Express App</h1>  
  <p><%= message %></p>  
</body>  
</html>

ルート処理とデータ レンダリング: ルート処理では、 を template engine 使用してデータを に渡します res.render()。 

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

 

結論

Template Engine in を使用すると、 Express.js 動的な Web ページを作成し、サーバーからの情報をユーザーのブラウザに表示できます。 Pug、EJS などを利用すると template engine 、より優れたユーザー エクスペリエンスを提供し、HTML コードとデータの管理を最適化する、インタラクティブで柔軟な Web ページを構築できます。