Pug と Express で動的 HTML を提供する-jsチュートリアル-php.cn

Serving Dynamic HTML With Pug And Express

シングルページアプリケーションが普及する前は、開発者がクライアントに送信する前にサーバー側でページをレンダリングできるため、Pug のようなテンプレート言語が非常に人気がありました。 Express は、Node.js の最も人気のあるバックエンドアプリケーションフレームワークです。軽量で、偏見がなく、使用が最小限であることを誇りに思っています。このガイドでは、Express.js サーバーアプリケーションから Pug を使用して動的 HTML を提供する方法を学習します。

パグはどうやって動くの？

HTML は書くのが面倒な場合があります。この言語は「コンポーネント」などの機能をサポートしていないため、JavaScript などの外部ツールに依存しない限り、コードの重複が発生する可能性があります。

Pug は、HTML の記述を容易にするテンプレートエンジンです。 Pug を使用すると、コードを分割して、好きなだけ場所で「コンポーネント」を再利用できます。構文に関しては、Pug は終了タグの代わりにインデントを使用するため、従来の HTML とは異なります。 HTML では、次のような要素を定義します:

<div class='hello'>This is something worth noting</div>

ログイン後にコピー

しかし、Pug では次のように要素を定義します。

div(class='hello') This is something worth noting

ログイン後にコピー

タグ名は左側に定義されており、その属性は括弧内にあります。タグは、その隣のスペースによってコンテンツと区切られます。 Pug トランスパイラーは、コードをブラウザーが認識する適切な HTML コードにトランスパイルします。子要素はインデントによって定義されます。これは、メインタグ内に div を入れたい場合は、次のようなことを行うことを意味します:

main
div Hello from the children of planet Earth!

ログイン後にコピー

Pug と Express の統合

Express.js プロジェクトに Pug を追加するには、選択したパッケージマネージャーで Pug をインストールするだけです。この例では、NPM を使用しています:

npm i pug

ログイン後にコピー

これにより、package.json ファイル内の依存関係のリストに Pug が追加されます。ここで、ビューエンジンを pug に設定する必要があります。そのため、プロジェクトのエントリファイル (通常は main.js、app.js、または Index.js ) で、express を適切にインポートし、set メソッドを使用してアプリケーション設定を構成します。

import express from 'express';
const app = express();

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

ログイン後にコピー

ビューエンジンを 'pug' に設定すると、Express にテンプレートエンジンとして Pug を使用するように指示します。したがって、応答オブジェクトで render メソッドを呼び出すときは、Express がレンダリングする有効な「ビュー」を渡す必要があります。 Express のビューは、プロジェクトのルートディレクトリ内の特別なビューディレクトリに配置する必要があります。ビューディレクトリを作成していない場合は、次のようにして作成できます:

mkdir views
# Make sure you are in your project root

ログイン後にコピー

準備が整ったので、Pug での最初のビューの作成に進みましょう。

Express プロジェクトでの基本的な Pug の使用法

views/index.pug ファイルを作成し、次の内容をそれに追加します:

html
  head
    title Welcome to my website
  body
    div Hello World

ログイン後にコピー

index.pug ファイルの準備ができたので、それをルート上のクライアントに提供する必要があります。プロジェクトのエントリファイルに移動し、views/index.pug ファイルをレンダリングしてクライアントに返す get リクエストハンドラーを定義します。

app.get("/", (req, res) => {
  res.render("index.pug");
});

ログイン後にコピー

localhost: を開くと、画面に「Hello World」というメッセージが表示されるはずです。 get メソッドのコールバック関数では、最も単純な形式での res.render の使用法がわかります。 render メソッドの構文を以下に示します。

res.render(view [, locals] [, callback]);

ログイン後にコピー

まず、ビューがあります。これは、単純にレンダリングしたい .pug ファイルのパスです。 Express は、views ディレクトリを基準にして .pug ファイルを検索することに注意してください。したがって、views/layouts/main.pug に Pug ファイルがある場合は、ルート内でビューを設定するときに、それをlayouts/main として参照する必要があります。

app.get("/", (req, res) => {
  res.render("layouts/main");
});

ログイン後にコピー

次に、ローカル変数は、補間のために指定されたビューに渡される必要があるローカル変数を定義するプロパティを持つオブジェクトです。コールバックが提供される場合、レンダリング操作から得られる HTML はクライアントに送信されません。代わりに、次のようにコールバック関数のパラメータを介してアクセスできます。

app.get("/", (req, res) => {
  res.render("index.pug", {}, (err, html) => {
    console.log(html);
  });
});

ログイン後にコピー

クライアントが '/' に get リクエストを行っても、応答は送信されません。代わりに、html がサーバーコンソールに記録されます。 send メソッドを使用して、HTML をクライアントに手動で送信できます:

res.send(html)

ログイン後にコピー

動的HTMLページの構築

さあ、物事を次のレベルに引き上げる時が来ました。 Pug を使用してデータを補間して動的コンテンツをその場で作成する方法を学びます。 Pug では、文字列補間は #{} という構文を使用して行われます。コンパイル時に、#{} は実際の値に解決されます。以下にその例を示します。

// greet.pug
html
  head
    title Welcome to my website
  body
    div Hello #{name}

ログイン後にコピー

上記のコードブロックでは、name は render メソッドに渡されたローカルオブジェクトの実際の値に置き換えられます。名前が定義されていない場合、エラーはスローされません。ここで実際に動作しています。

app.get('/greet', (req, res) => {
    const {name} = req.query;
    res.render('greet.pug', {name})
})

ログイン後にコピー

クライアントが /greet?name=David にアクセスすると、次の HTML が返されます

<html>
  <head>
    <title>Welcome to my website</title>
  </head>
  <body>
    <div>Hello David</div>
  </body>
</html>

ログイン後にコピー

The string interpolation syntax (#{}), is escaped by Pug. This is useful in situations where the content comes from users. If you want Pug is render the string as is without escaping, you'll need to use the !{} syntax.

- var example = <strong>very risky</strong>
div !{example}

ログイン後にコピー

Tags and Tag Intepolation in Pug

Pug provides a handy syntax for tag interpolation #[], which you can use like this:

Basic Tag Interpolation: You can interpolate a tag directly within text.

p This is a #[strong very important] message.

ログイン後にコピー

This will render as:

<p>This is a <strong>very important</strong> message.</p>

ログイン後にコピー

Interpolating with Variables: You can also interpolate tags with variables.

- var username = 'John' 
p Hello, #[strong #{username}]!

ログイン後にコピー

You don't have to worry about self-closing tags, because Pug knows what tags are self closing. But if you really need to self-close a tag, you can append the / character to the end of the tag like this:

div/

ログイン後にコピー

To save space, You can use the : shorthand instead of indentation to specify nested tags.

label: input(type='text' name='username')

ログイン後にコピー

The code block above is just as valid as:

label
    input(type='text' name='username')

ログイン後にコピー

Using JavaScript in Pug

In the last code block, notice the use of the var keyword from JavaScript to create a variable. Pug allows you to insert valid JavaScript code on any line that starts with an -. For example, you can create an array and iterate over it to render a list of items. Pug has its native syntax for this, but in this example, you can use JavaScript.

html
  head
    title Welcome to my website
  body
    div List of items 
    - var items = ['milk', 'peas', 'bread']
    - items.forEach((item)=>{
      li #{item}
    - })

ログイン後にコピー

Study the previous example. Notice how Pug and JavaScript are combined. The forEach method is not part of the Pug API, it belongs to JavaScript. Likewise, the string interpolation symbol is not part of the #{} JavaScript API. The lines with valid JavaScript code are marked with the - symbol. On the second to last line, there is no - symbol, because that is Pug code.

Iteration and conditionals with Pug

For common things like conditionals and iteration, Pug provides its syntax that you can use instead of JavaScript. The most popular keyword for iteration in Pug is each. each must come in the form each VARIABLE_NAME of JS_EXPRESSION. Here's how you can use it:

each item in ['milk', 'peas', 'bread']
   li #{item}

ログイン後にコピー

When dealing with objects, the expected format for each is each VALUE, KEY OF JS_EXPRESSION. For example:

each val, key in {1:'milk', 2:'peas', 3:'bread'}
  #{key} : #{val}

ログイン後にコピー

You can use the if syntax to handle conditionals. Here's an example:

╴ var loggedIn = false

if !loggedIn
    p Sorry you cannot access this item because you're not logged in

ログイン後にコピー

Conversely, Pug has an unless keyword that you can use like this:

unless loggedIn
    p Sorry you cannot access this item because you're not logged in

ログイン後にコピー

Advanced Techniques with Pug

Pug offers many features beyond just string interpolation and conditionals. If you are working on a large website, you might need to use advanced features that Pug provides, such as layouts and partials.

Using Layout files for consistent page structure

Layout files allow you to define a common structure for your pages and extend it in other templates, ensuring consistency across your website. Here's an example of how you can use layout files.

//- views/layout.pug
html
  head
    title My Website Title
  body
    header
      h1 My Website
    block content
    footer
      p Footer content

ログイン後にコピー

Notice the block keyword in the code block above. A block in a layout file acts as a placeholder. Each block must have a name. In this example, block is defined as content. Whenever you want to use your layout file, you use the extends syntax to tell Pug that a template should include a layout.

//- views/index.pug
extends layout

block content
  p Welcome to the homepage!

ログイン後にコピー

In this example, index.pug extends the layout.pug template, which provides the page's base structure, including the header and footer. The block content line defines a block named content where the indented paragraph "Welcome to the homepage!" is inserted. When index.pug is rendered, the final HTML will look this this:

<html>
  <head>
    <title>My Website Title</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
    </header>
    <p>Welcome to the homepage!</p>
    <footer>
      <p>Footer content</p>
    </footer>
  </body>
</html>

ログイン後にコピー

Using Partials for Reusable Components

Partials are reusable pieces of templates that can be included in other templates, which helps to keep your code DRY (Don't Repeat Yourself). You can create partials in Pug with the include syntax.

//- views/partials/sidebar.pug
aside
  p This is the sidebar content.

ログイン後にコピー

In sidebar.pug defines a partial template for a sidebar with an aside element containing a paragraph of text.

//- views/layout.pug
html
  head
    title My Website Title
  body
    include partials/sidebar
    block content
    footer
      p Footer content

ログイン後にコピー

In layout.pug, a layout template is created with a basic HTML structure. It includes the header and sidebar partials using the include keyword, places a block content placeholder for dynamic content, and adds a footer with a paragraph of text. The final render should look something like this:

<html>
  <head>
    <title>My Website Title</title>
  </head>
  <body>
    <header></header>
    <aside>
      <p>This is the sidebar content.</p>
    </aside>
    <p>Welcome to the homepage!</p>
    <footer>
      <p>Footer content</p>
    </footer>
  </body>
</html>

ログイン後にコピー

Tips for optimizing Pug templates

1. Use partials and layouts wherever you can: Using partials, layouts, and helpers in Pug enhances template organization and efficiency. Partials are reusable snippets that prevent code repetition, while layouts provide a consistent structure for pages by defining common elements and extending them in individual templates.

2. Minimize the use of inline JavaScript: When writing your templates, try to use inline JavaScript sparingly. Adding huge blocks of JavaScript to your code can create issues with debugging and maintainability.

One way to reduce inline JavaScript is through the use of helpers. Helpers, defined in the server-side code, allow dynamic content within templates. You can pass a helper function to a template using the locals method on the express app.

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

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

app.locals.formatDate = function(date) {
  return new Date(date).toLocaleDateString();
};

app.get('/', (req, res) => {
  res.render('index', { title: 'Home', currentDate: new Date() });
});

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

ログイン後にコピー

With the formatDate helper function set, you can use it in your Pug template like this:

p Welcome to the homepage!
p Today's date is #{formatDate(currentDate)}

ログイン後にコピー

Conclusion

In this guide, you learned how to serve dynamic HTML with Pug and Express. We covered basic Pug syntax, integrating Pug with Express, building dynamic pages, and advanced techniques like using layout files and partials.

Templating engines are very powerful especially when building a server-side web application. They are great for Search Engine optimization too because unlike single-page applications, the content is rendered on the server on each request.

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