NodejsでHTMLを動的に変更する方法-フロントエンドQ&A-php.cn

NodejsでHTMLを動的に変更する方法

PHPz

リリース： 2023-04-26 09:56:19

オリジナル

773 人が閲覧しました

Web アプリケーションが成熟し、発展するにつれて、バックエンドアプリケーションを構築するために Node.js を使用し始める開発者が増えています。 Node.js は、高性能でスケーラブルな Web アプリケーションを構築するためのオープンソースのサーバーサイド JavaScript 環境です。 HTML を生成できるテンプレートエンジンなど、非常に便利なモジュールとライブラリがいくつか提供されています。

この記事では、Node.js を使用して HTML を動的に変更する方法について説明します。まず、一般的に使用されるテンプレートエンジンをいくつか紹介し、次に Node.js でそれらを使用する方法について説明します。最後に、これらのテクニックをより深く理解し、実践するのに役立ついくつかの実践的な例を示します。

一般的に使用されるテンプレートエンジン

テンプレートエンジンを使用し始める前に、さまざまなテンプレートエンジンの違いとそれぞれの長所と短所を理解する必要があります。一般的に使用されるテンプレートエンジンの一部を次に示します。

EJS: EJS は、JavaScript 構文を使用して HTML コードに動的データを埋め込むのに役立つ JavaScript ベースのテンプレートエンジンです。その主な利点は、学習と使用が簡単であり、クライアント側とサーバー側のレンダリングにも使用できることです。
Handlebars: Handlebars は、Handlebars 構文を使用して HTML コードに動的データを埋め込むことができる、もう 1 つの JavaScript ベースのテンプレートエンジンです。その主な利点は、クライアント側とサーバー側の両方のレンダリングに使用できるため、優れた互換性があり、非常に優れたパフォーマンスを発揮することです。
Jade: Jade は、インデントとスペースを使用して HTML コードに動的データを埋め込むのに役立つ文字ベースのテンプレートエンジンです。その利点は、構文が簡潔であり、メンテナンスが容易であることです。

Node.js でのテンプレートエンジンの使用

さまざまなテンプレートエンジンについて理解したので、それらを使用して HTML を動的に変更できるようになります。 Node.js でテンプレートエンジンを使用するための手順をいくつか示します。

テンプレートエンジンをインストールする: まず、選択したテンプレートエンジンをインストールする必要があります。この例では、テンプレートエンジンとして EJS を使用します。 EJS をインストールするには、次のコマンドを実行します。

npm install ejs --save

ログイン後にコピー

Express アプリケーションの構成: アプリケーションを作成するには、Node.js の Express フレームワークを使用します。 Express の使用を開始するには、Express をインストールし、アプリケーションで設定する必要があります。サンプルコードは次のとおりです。

const express = require('express');
const app = express();

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

app.get('/users', (req, res) => {
  const users = [
    { name: 'Alice', email: 'alice@example.com' },
    { name: 'Bob', email: 'bob@example.com' },
    { name: 'Charlie', email: 'charlie@example.com' },
  ];
  res.render('users', { users });
});

app.listen(3000, () => {
  console.log('listening on port 3000');
});

ログイン後にコピー

このアプリケーションでは、アプリケーションのビューディレクトリとビューエンジンを設定し、「ユーザー」用の名前付きビューをレンダリングして渡す単純なルートハンドラーを提供します。「users」という名前の配列を含むビューへのオブジェクト。

ビューファイルの作成: 次に、「users.ejs」という名前のビューファイルを作成する必要があります。このファイルには動的データと HTML コードが含まれます。サンプルコードは次のとおりです。

<!doctype html>
<html>
  <head>
    <title>Users</title>
  </head>
  <body>
    <h1>Users</h1>
    <ul>
      <% users.forEach(user => { %>
        <li><%= user.name %> - <%= user.email %></li>
      <% }); %>
    </ul>
  </body>
</html>

ログイン後にコピー

このビューファイルでは、EJS テンプレートエンジンの構文を使用して動的データを埋め込みます。 forEach ループを使用して users 配列をループし、HTML コード内の <% %> タグを使用して JavaScript コードを実行しました。ユーザーデータを埋め込むために <%= %> タグも使用します。

アプリケーションの実行: 最後に、アプリケーションを実行する必要があります。アプリケーションを実行するには、次のコマンドを実行します。

node app.js

ログイン後にコピー

次に、ブラウザを開いて http://localhost:3000/users にアクセスします。 3 人のユーザーが含まれるページが表示され、それぞれに名前と電子メールアドレスが含まれているはずです。

概要

この記事では、Node.js とテンプレートエンジンを使用して HTML を動的に変更する方法について説明しました。一般的に使用されるテンプレートエンジンをいくつか紹介し、EJS を使用してそれらを組み合わせる方法を示しました。これらのテクノロジーを使用すると、Web アプリケーションから動的 HTML を簡単に生成し、強力なユーザーエクスペリエンスを提供できます。

以上がNodejsでHTMLを動的に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。