Nodejs テンプレートは何をしますか?-フロントエンドQ&A-php.cn

Nodejs テンプレートは何をしますか?

王林

リリース： 2023-05-08 12:30:37

オリジナル

569 人が閲覧しました

Node.js テンプレートは Web アプリケーション作成の重要な部分であり、開発者が HTML、CSS、および JavaScript を管理およびレンダリングすることを容易にします。 Node.js テンプレートの目的は、データをアプリケーションの処理ロジックから分離し、インターフェイスから分離することです。この分離により、開発者はコードをより適切に管理し、変更やメンテナンスが容易になります。この記事では、Node.js テンプレートを詳しく見て、その用途と、それを使用して Web アプリケーションを構築する方法について説明します。

Node.js テンプレートとは何ですか?

Node.js テンプレートは、Web アプリケーションページにレンダリングする前に、コード内のデータを前処理できます。 Node.js テンプレートは通常、HTML、CSS、および JavaScript コードを含む文字列であり、特定の記号または構文を使用してプレースホルダーに置き換えられます。プレースホルダーは、特定の構文マーカー (通常は中括弧、不等号、パーセント記号などの記号) で構成されます。実行時に、プレースホルダーが実際のデータに置き換えられ、最終的なページコンテンツが生成されます。

Node.js テンプレートが必要な理由は何ですか?

従来の Web 開発では、アプリケーションのビジネスロジックを HTML および CSS と混合すると、コードが混乱して混乱する可能性があります。アプリケーションで HTML/CSS の変更または再構成が必要な場合、コードベース全体で変更を行う必要がある場合があり、これによりバグが発生したり、コードの保守が困難になる可能性があります。したがって、テンプレートエンジンを使用するとデータとページコードを分離できるため、コードの拡張と保守が容易になります。

Node.js テンプレートの使用法

Node.js のテンプレートエンジンにはさまざまなオプションがあり、それぞれに独自の構文と機能があります。ここでは、最も人気のある Node.js テンプレートエンジンとその使用法をいくつか紹介します。

EJS (Embedded JavaScript) は、JavaScript を使用して HTML コードに JavaScript コードを埋め込むことができる JavaScript テンプレートエンジンです。これにより、EJS は JavaScript を使用してデータベースクエリや計算などの他の機能を統合できるため、アプリケーションのインターフェイスを扱うときに特に便利になります。

EJS を使用する場合、JavaScript のような関数呼び出しを使用して HTML を出力できます。

const ejs = require('ejs');
const template = `<h1><%= message %></h1>`;
const data = {message: 'Hello EJS'};
const html = ejs.render(template, data);
console.log(html);

ログイン後にコピー

この例では、一部のテキストデータをテンプレート文字列で定義された変数に置き換えるだけです。

Handlebars

Handlebars は、HTML フラグメントを生成できる Mustache テンプレートに基づく JavaScript テンプレートエンジンです。ハンドルバーでは、{{}} 記号と # 記号を使用して変数を参照し、if ループや for ループなどの構造を制御できます。

以下は、記事リストを作成するための Handlebars テンプレートです。

<ul>
 {{ #each articles }}
  <li><a href="{{ url }}">{{ title }}</a></li>
 {{ /each }}
</ul>

ログイン後にコピー

この例では、 #each を使用して、articles 配列内の各記事に対応させ、記事のタイトルと URL を出力します。

Jade (現在は Pug と呼ばれています)

Jade (現在は Pug と呼ばれています) は、HAML に似たテンプレートエンジンです。 HTML の構文が簡素化され、コードがすっきりするため、Web アプリケーションの迅速な開発に最適です。

以下は、Pug で書かれた単純なフォームページです。

form(action="/submit-form", method="post")
  label(for="id-email") Email:
  input(name="email", id="id-email", type="email", required)
  br
  label(for="id-password") Password:
  input(name="password", id="id-password", type="password", required)
  br
  button(type="submit") Submit

ログイン後にコピー

この例では、インデントを使用して階層を表す方法を確認できます。

概要

テンプレートエンジンは、HTML、CSS、JavaScript を簡単に管理およびレンダリングできるため、Web アプリケーション構築の重要な部分です。テンプレートエンジンを使用すると、アプリケーションのロジックがインターフェイスから分離され、コードの作成と保守が容易になります。さまざまな Node.js テンプレートエンジンから選択でき、それぞれに独自の構文と機能があり、開発者はニーズに基づいていずれかを選択できます。

以上がNodejs テンプレートは何をしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。