Node.js と Express.js を使用した Web サイトの構築

この記事では、Node.js と Express.js を使用した Web サイトの構築について詳しく説明します。 Express.js は、Node.js 上に堅牢でスケーラブルな Web アプリケーションを作成するための重要なフレームワークです。今日は、ルーティング、ミドルウェア、テンプレート エンジン、およびCookieセッション。

コンセプトのハイライト:

app.use(コールバック)
app.use(パス, コールバック)
取得、投稿、配置、削除
エクスプレスミドルウェア
スタック内の次のミドルウェアを呼び出す
Express Router の使用
Cookie セッション管理ミドルウェア
テンプレート変数
EJS

1.app.use(コールバック)

Express.js の app.use(callback) メソッドは、ミドルウェア関数をマウントするために使用されます。このミドルウェアは、HTTP メソッドや URL に関係なく、アプリケーションに対して行われるすべてのリクエストに対して実行されます。

例) この例では、ミドルウェアは受信リクエストごとに実行され、メッセージをコンソールに記録します。

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

app.use((req, res, next) => {
  console.log('Middleware running for every request.');
  next();
});

2.app.use(パス、コールバック)

この方法では、特定のルートにミドルウェアをマウントできます。ミドルウェアは、リクエストが指定されたパスと一致する場合にのみ実行されます。

例) この例では、ミドルウェアは /users で始まるルートに対してのみトリガーされます。

app.use('/users', (req, res, next) => {
  console.log('Middleware only for /users route.');
  next();
});

3. 取得、投稿、挿入、削除

これらのメソッドを使用すると、特定のルートで特定の HTTP メソッド (GET、POST、PUT、DELETE など) を処理できます。ここで Web アプリケーションの動作を定義します。

例) 各メソッドは、ユーザー管理のための CRUD 操作 (作成、読み取り、更新、削除) の異なる部分を処理します。

app.get('/users', (req, ress) => {
  res.send('Fetching all users');
});

app.post('/users', (req, res) => {
  res.send('Creating a new user');
});

app.put('/users/:id', (req, res) => {
  res.send(`Updating user with ID: ${req.params.id}`);
});

app.delete('/users/:id', (req, res) => {
  res.send('Deleting user with ID: ${req.params.id}`);
});

4. エクスプレスミドルウェア

Express.js のミドルウェア関数は、リクエスト (req) オブジェクトとレスポンス (res) オブジェクトにアクセスでき、コードを実行したり、変更を加えたり、リクエストとレスポンスのサイクルを終了したりできます。

主な特徴:

• コードの実行: 任意のロジックまたは操作を実行できます。
• リクエスト/レスポンスの変更: ミドルウェアは、ヘッダーを更新したり、req にデータを追加したり、res オブジェクトを変更したりできます。
• リクエスト/レスポンス サイクルの終了: ミドルウェアはデータをクライアントに送り返し、サイクルを終了できます。

例) この例では、ミドルウェアがカスタム データをリクエスト オブジェクトに追加し、ルート ハンドラーがそれにアクセスします。

app.use((req, res, next) => {
  req.customData = 'Some custom data';
  next();
});

app.get('/', (req, res) => {
  res.send(`Data from middleware: ${req.customData}`);
});

5. 次のミドルウェアの呼び出し

上記の例では、 next() を使用して、次のミドルウェアまたはルート ハンドラーに制御を渡します。 next() を呼び出さないと、サイクルが先に進まないため、リクエストはハングします。

例) これにより、各ミドルウェアがチェーン内の次のミドルウェアに制御を渡すことができます。

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

app.use((req, res, next) => {
  console.log('Middleware running for every request.');
  next();
});

6. Express Routerの使用

Express Router は、モジュール型アプリケーションでルートを整理するための優れたツールです。これは、ルートをより小さく管理しやすい部分に分割するのに役立ちます。

例) この例では、ルーターは /users にマウントされており、/users/profile へのリクエストはルーターのルートによって処理されます。

app.use('/users', (req, res, next) => {
  console.log('Middleware only for /users route.');
  next();
});

7. Cookieセッション管理ミドルウェア

セッションと Cookie の処理は、ユーザーの認証と状態を管理するために非常に重要です。 Express.js は、セッション データを管理するためのミドルウェアを提供します。

例) Express-session を使用して、セッションを初期化し、ユーザーのセッション全体でアクセスできるセッション データを設定します。

app.get('/users', (req, ress) => {
  res.send('Fetching all users');
});

app.post('/users', (req, res) => {
  res.send('Creating a new user');
});

app.put('/users/:id', (req, res) => {
  res.send(`Updating user with ID: ${req.params.id}`);
});

app.delete('/users/:id', (req, res) => {
  res.send('Deleting user with ID: ${req.params.id}`);
});

8. テンプレート変数

テンプレート エンジンを使用してビューをレンダリングする場合、変数を渡してコンテンツを動的に生成できます。たとえば、EJS では、レンダリングのために変数をビューに渡すことができます。

例) この例では、タイトル変数とメッセージ変数を EJS テンプレートに渡します。

app.use((req, res, next) => {
  req.customData = 'Some custom data';
  next();
});

app.get('/', (req, res) => {
  res.send(`Data from middleware: ${req.customData}`);
});

9. EJS (埋め込みJavaScript)

EJS は、HTML を記述し、HTML 構造内に JavaScript を直接埋め込むことができる人気のテンプレート エンジンです。シンプルですが強力で、動的 Web ページ用の Express.js とうまく統合されます。

例) 構文は、JavaScript 式を HTML に挿入するために使用されます。

app.use((req, res, next) => {
  console.log('First middleware');
  next();
});

app.use((req, res, next) => {
  console.log('Second middlware');
});

以上がNode.js と Express.js を使用した Web サイトの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。