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
。
Configure Template Engine: アプリケーションの構成ファイル(例: app.js
) で、Pug を として定義します template engine。
Pug テンプレートの作成: views
ディレクトリに Pug ファイルを作成します。 たとえば、次の index.pug
ファイルを作成します。
ルート処理とデータ レンダリング: ルート処理では、 を template engine 使用してデータを に渡すことができます res.render()
。
EJSの使用 Template Engine
EJS のインストール: ejs
npm 経由でパッケージをインストールします。
Configure Template Engine: template engine アプリケーションの構成で EJS を として定義します。
EJS テンプレートの作成: views
ディレクトリに EJS ファイルを作成します。 たとえば、次の index.ejs
ファイルを作成します。
ルート処理とデータ レンダリング: ルート処理では、 を template engine 使用してデータを に渡します res.render()
。
結論
Template Engine in を使用すると、 Express.js 動的な Web ページを作成し、サーバーからの情報をユーザーのブラウザに表示できます。 Pug、EJS などを利用すると template engine 、より優れたユーザー エクスペリエンスを提供し、HTML コードとデータの管理を最適化する、インタラクティブで柔軟な Web ページを構築できます。