Express チュートリアル Part 2: スケルトンウェブサイトの作成

概要

この記事では Express Application Generator ツールを使用して「スケルトン」ウェブサイトを作成する方法を説明します。このツールには、サイト固有のルート、ビュー/テンプレート、およびデータベース呼び出しを追加できます。この場合は、このツールを使用して地域図書館ウェブサイト用のフレームワークを作成し、後でそのサイトに必要な他のすべてのコードを追加します。プロセスは非常に単純で、必要に応じてサイトのテンプレートエンジンと CSS ジェネレーターを指定して、新しいプロジェクト名を指定してコマンドラインでジェネレーターを呼び出すだけです。

次の節では、アプリケーションジェネレーターを呼び出す方法を示し、さまざまな ビュー/CSS オプションについて簡単に説明します。また、スケルトンウェブサイトの構造についても説明します。最後に、ウェブサイトを実行してそれが機能することを確認する方法を紹介します。

アプリケーションジェネレーターを使用する

Node 開発環境の設定の一部として、ジェネレーターをすでにインストールしているはずです。念のため、NPM パッケージマネージャを使用して、サイト全体にジェネレーターツールをインストールします。

npm install express-generator -g

ジェネレーターにはいくつかのオプションがあり、それらは --help (または -h) コマンドを使用してコマンドラインで表示できます。

> express --help

    Usage: express [options] [dir]

  Options:

        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
        --no-view        use static html instead of view engine
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain CSS)
        --git            add .gitignore
    -f, --force          force on non-empty directory
    -h, --help           output usage information

Express を使用して、current ディレクトリー内に、Jade ビューエンジンとプレーン CSS を使用したプロジェクトを作成するように指定できます（ディレクトリー名を指定した場合、その名前のサブフォルダー内にプロジェクトが作成されます）。

express

同時に、--view オプションを使用してビュー（テンプレート）エンジンを選択したり、--css オプションを使用して CSS 生成エンジンを選択したりすることもできます。

どのビューエンジンを使うべきか

Express Application Generator を使用すると、EJS、Hbs、Pug (Jade)、Twig、Vash など、一般的なビュー/テンプレートエンジンを多数設定できます。ただし、ビューオプションを指定しない場合はデフォルトで Jade が選択されます。 Express 自体は、一般的な他のテンプレート言語の多くに対応することができます。

一般的に、必要とするすべての機能を提供し、より早く生産的になることを可能にするテンプレートエンジンを選ぶべきです ー もしくは言い換えれば、同じ方法で、他のコンポーネントを選択するということです。テンプレートエンジンを比較する際に考慮すべき点がいくつかあります。

• 生産的になるための時間 - チームにすでにテンプレート言語の使用経験があるのであれば、その言語を使用することで、より早く成果を上げられるでしょう。そうでない場合は、候補となるテンプレートエンジンの学ぶ難易度を相対的に考えてみるべきです。
• 人気と活発さ — そのエンジンの人気度や、活発なコミュニティが存在するかどうかを確認してください。ウェブサイトの運用期間中に問題が発生した際、対応状況を取得できることが重要です。
• スタイル － テンプレートエンジンの中には、「通常の」 HTML 内に挿入されたコンテンツを示すために特定のマークアップを使用するものもあれば、別の構文を使用して HTML を構成するものもあります（たとえば、インデントとブロック名を使用するなど）。
• パフォーマンス/レンダリング時間。
• 機能 - あなたが見ているエンジンが利用可能な以下の機能を持っているかどうかを考慮する必要があります。
  • レイアウトの継承：ベーステンプレートを定義してから、特定のページに対して異なる部分だけを "継承" することができます。これは通常、必要なコンポーネントを多数含めるか、毎回テンプレートを最初から作成することによってテンプレートを作成するよりも優れた方法です。
  • "Include" の対応：他のテンプレートを含めることでテンプレートを構築することができます。
  • 変数およびループ制御構文が簡潔であること。
  • テンプレートレベルで変数の値を絞り込む機能。例えば、変数の値を大文字にしたり、日付値を書式化を行ったりすることが可能です。
  • HTML 以外の出力フォーマット (JSON や XML など) を生成する機能。
  • 非同期操作とストリーミングのサポート。
  • サーバーだけでなくクライアントでも使用できます。テンプレートエンジンをクライアント上で使用できる場合、これによりデータを提供し、レンダリングの全部または大部分をクライアント側で行うことができます。

このプロジェクトでは、Pug テンプレートエンジン (これは最近名前が変更された Jade エンジンです) を使用します。これは最も一般的な Express/JavaScript テンプレート言語の 1 つで、ジェネレーターがそのままサポートしているためです。

どの CSS スタイルシートエンジンを使うべきか

Express Application Generator を使用すると、最も一般的な CSS スタイルシートエンジン (LESS、SASS、Stylus) を使用するように構成されたプロジェクトを作成できます。

テンプレートエンジンと同様に、チームを最も生産的にすることができるスタイルシートエンジンを使用する必要があります。このプロジェクトでは、CSS 要件が他のものを使用することを正当化するのに十分に複雑ではないため、通常の CSS (デフォルト) を使用します。

どのデータベースを使うべきか

生成されたコードはデータベースを一切使用しません。 Express アプリケーションは、Node によってサポートされている任意のデータベースメカニズムを使用できます (Express 自体はデータベース管理のための特定の追加の動作や要件を定義していません)。

データベースと統合する方法については、後の記事で説明します。

プロジェクトを作成する

これから作成するサンプルのローカルライブラリーアプリでは、Pug テンプレートライブラリーを使用し、CSS スタイルシートエンジンを使用しないで、express-locallibrary-tutorial という名前のプロジェクトを作成します。

まず、プロジェクトを作成する場所に移動し、次に示すようにコマンドプロンプトで Express Application Generator を実行します。

express express-locallibrary-tutorial --view=pug

ジェネレーターはプロジェクトのファイルを作成 (そして一覧表示) します。

   create : express-locallibrary-tutorial\
   create : express-locallibrary-tutorial\public\
   create : express-locallibrary-tutorial\public\javascripts\
   create : express-locallibrary-tutorial\public\images\
   create : express-locallibrary-tutorial\public\stylesheets\
   create : express-locallibrary-tutorial\public\stylesheets\style.css
   create : express-locallibrary-tutorial\routes\
   create : express-locallibrary-tutorial\routes\index.js
   create : express-locallibrary-tutorial\routes\users.js
   create : express-locallibrary-tutorial\views\
   create : express-locallibrary-tutorial\views\error.pug
   create : express-locallibrary-tutorial\views\index.pug
   create : express-locallibrary-tutorial\views\layout.pug
   create : express-locallibrary-tutorial\app.js
   create : express-locallibrary-tutorial\package.json
   create : express-locallibrary-tutorial\bin\
   create : express-locallibrary-tutorial\bin\www

   change directory:
     > cd express-locallibrary-tutorial

   install dependencies:
     > npm install

   run the app (Bash (Linux or macOS))
     > DEBUG=express-locallibrary-tutorial:* npm start

   run the app (PowerShell (Windows))
     > $env:DEBUG = "express-locallibrary-tutorial:*"; npm start

   run the app (Command Prompt (Windows)):
     > SET DEBUG=express-locallibrary-tutorial:* & npm start

出力の最後には、依存関係（package.json ファイルに掲載されているもの）のインストール方法や、さまざまなオペレーティングシステム上でアプリケーションを実行する方法についての説明が提供されています。

スケルトンウェブサイトを実行する

これで、完全なスケルトンプロジェクトが完成しました。 ウェブサイトは実際にはそれほど多くは行っていませんが、それがどのように機能するかを示すために実行する価値があります。

1. まず、依存関係をインストールします (install コマンドはプロジェクトの package.json ファイルにリストされているすべての依存関係パッケージを取得します)

   bash

   cd express-locallibrary-tutorial
   npm install
   

2. その後、アプリケーションを実行します。

   • Windows では、次のコマンドを使用します。

     batch

     SET DEBUG=express-locallibrary-tutorial:* & npm start
     

   • Windows PowerShell では、次のコマンドを使用します。

     powershell

     $env:DEBUG = "express-locallibrary-tutorial:*"; npm start
     

     メモ: このチュートリアルでは、PowerShell コマンドについては扱いません（"Windows" のコマンドを紹介する場合、Windows のコマンドプロンプトを使用していることを想定しています。）

   • macOS または Linux では、次のコマンドを使用します。

     bash

     DEBUG=express-locallibrary-tutorial:* npm start
     

3. その後、ブラウザーに http://localhost:3000/ を読み込んでアプリにアクセスします。

次のようなブラウザーページが表示されるはずです。

おめでとうございます！これで、ポート番号 3000 経由でアクセス可能で正常に動作する Express アプリケーションが完成しました。

SET DEBUG=express-locallibrary-tutorial:* & npm start

> express-locallibrary-tutorial@0.0.0 start D:\github\mdn\test\exprgen\express-locallibrary-tutorial
> node ./bin/www

  express-locallibrary-tutorial:server Listening on port 3000 +0ms
GET / 304 490.296 ms - -
GET /stylesheets/style.css 200 4.886 ms - 111

ファイルの変更時にサーバーを再起動できるようにする

Express ウェブサイトに加えた変更は、現在のサーバーを再起動するまで表示されません。変更を加えるたびにサーバーを停止して再起動する必要があることはすぐに非常に苛立たしいものになるため、必要に応じてサーバーの再起動を自動化することに時間をかける価値があります。

この目的のための最も簡単なツールの 1 つが nodemon です。 これは通常「ツール」としてグローバルにインストールされますが、ここでは開発者の依存関係としてローカルにインストールして使用するので、プロジェクトを操作する開発者はアプリケーションをインストールするときに自動的に取得されます。スケルトンプロジェクトのルートディレクトリーで次のコマンドを使用します。

npm install --save-dev nodemon

プロジェクトの package.json ファイルだけでなく、自分のマシンにグローバルに nodemon をインストールする場合は、次のようにします。

npm install -g nodemon

プロジェクトの package.json ファイルを開くと、この依存関係を持つ新しいセクションが表示されます。

{
  "devDependencies": {
    "nodemon": "^3.1.10"
  }
}

このツールはグローバルにはインストールされていないので (パスに追加しない限り) コマンドラインから起動することはできませんが、NPM はインストールされているパッケージをすべて知っているので、NPM スクリプトから呼び出すことができます。package.json の scripts セクションを探してください。最初は、"start"で始まる1行のみが含まれています。その行の末尾にカンマを追加し、"devstart"と"serverstart"の行を追加して更新してください：

• Linux や macOS では、このスクリプトのセクションは次のようになります。

  json

  {
    "scripts": {
      "start": "node ./bin/www",
      "devstart": "nodemon ./bin/www",
      "serverstart": "DEBUG=express-locallibrary-tutorial:* npm run devstart"
    }
  }
  

• • Windows では、"serverstart" の値は（コマンドプロンプトを使用する場合）、同様に次のような形になります。
  bash

  "serverstart": "SET DEBUG=express-locallibrary-tutorial:* & npm run devstart"
  

これで、前回とほぼ同じ方法でサーバーを起動できるようになりましたが、devstart コマンドを使用します。

生成されたプロジェクト

これで、先ほど作成したプロジェクトを見ていきましょう。 作業を進めていく中で、このプロジェクトに少し手を加えていきます。

ディレクトリー構造

生成されたプロジェクトは、依存関係をインストールしたので、次のようなファイル構造になります (ファイルは "/" が前に付いていない項目です)。 package.json ファイルは、アプリケーションの依存関係とその他の情報を定義します。 また、アプリケーションのエントリーポイントである JavaScript ファイル /bin/www を呼び出す起動スクリプトも定義されています。 これにより、アプリケーションのエラー処理がいくつか設定され、その後 app.js が読み込まれて残りの作業が行われます。 アプリのルートは routes/ ディレクトリーの下の別々のモジュールに格納されています。 テンプレートは /views ディレクトリーの下に格納されています。

express-locallibrary-tutorial
    app.js
    /bin
        www
    package.json
    package-lock.json
    /node_modules
        [about 6700 subdirectories and files]
    /public
        /images
        /javascripts
        /stylesheets
            style.css
    /routes
        index.js
        users.js
    /views
        error.pug
        index.pug
        layout.pug

次のセクションでは、ファイルについてもう少し詳しく説明します。

package.json

package.json ファイルは、アプリケーションの依存関係とその他の情報を定義します。

{
  "name": "express-locallibrary-tutorial",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11"
  },
  "devDependencies": {
    "nodemon": "^3.1.10"
  }
}

scripts セクションは "start" スクリプトを定義します。これは、npm start を呼び出してサーバーを起動するときに呼び出すスクリプトです（このスクリプトは Express Application Generator で追加されいます）。スクリプトの定義から、これは実際に JavaScript ファイル ./bin/www を node で開始することがわかります。

このセクションは、すでにファイルの変更時にサーバーを再起動できるようにするで、devstart および serverstart スクリプトを追加して変更済みです。 これらを使用することができます（前述の通り、このバージョンのスクリプトは Linux および macOS 用です）。

{
  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www",
    "serverstart": "DEBUG=express-locallibrary-tutorial:* npm run devstart"
  }
}

依存関係には、express パッケージと選択したビューエンジン (pug) 用のパッケージが含まれます。 さらに、多くのウェブアプリケーションで役立つ次のパッケージがあります。

• cookie-parser: Cookie ヘッダーを解析し、req.cookies を生成するために使用されます (基本的に Cookie 情報にアクセスするための便利な方法を提供します)
• debug: 小さなノードデバッグユーティリティは、Node コアのデバッグ技術をモデルにしています
• morgan: Node 用の HTTP リクエストロガーミドルウェア
• serve-favicon: ファビコンを提供するためのノードミドルウェア (これはブラウザータブ内のサイト、ブックマークなどを表すために使用されるアイコンです)

生成されたプロジェクトに含まれるデフォルトのバージョンは、少し古くなっています。 package.json ファイルの dependencies セクションを、以下のテキストに置き換えてください。これは、この記事の執筆時点でこれらのライブラリーの最新バージョンを指定したものです。

{
  "dependencies": {
    "cookie-parser": "^1.4.7",
    "debug": "^4.4.1",
    "express": "^5.1.0",
    "http-errors": "~2.0.0",
    "morgan": "^1.10.0",
    "pug": "3.0.3"
  }
}

次に、以下のコマンドを使用して、インストール済みの依存関係を更新してください。

npm install

npm update --save

www ファイル

ファイル /bin/www がアプリケーションのエントリーポイントです。 これが最初に行うことは、express() アプリケーションオブジェクトを設定して返す「本物の」アプリケーションエントリーポイント (プロジェクトルート内の app.js) であるrequire() です。 require() は、JavaScript コードや JSON、その他のファイルを現在のファイルにインポートするための CommonJS ウェイ です。 ここでは、app.js モジュールを相対パスで指定し、オプションのファイル拡張子 (.js) を除外しています。

#!/usr/bin/env node

/**
 * Module dependencies.
 */

const app = require("../app");

このファイルのコードの残りの部分では、特定のポート (環境変数で定義されているか、変数が定義されていない場合は 3000 で定義されている) に設定された app を使用して Node HTTP サーバーをセットアップします。 今のところ、コードについて他に何も知る必要はありません (このファイル内のすべてが「定型句」です) が、興味があればお気軽にレビューしてください。

app.js

このファイルは、express アプリケーションオブジェクト (慣例では app という名前) を作成し、さまざまな設定とミドルウェアを使用してアプリケーションを設定してから、モジュールからアプリケーションをエクスポートします。以下のコードは、アプリオブジェクトを作成およびエクスポートするファイルの一部だけを示しています。

const express = require("express");

const app = express();
// …
module.exports = app;

上記の www エントリーポイントファイルに戻ると、このファイルがインポートされたときに呼び出し元に渡されるのは、この module.exports オブジェクトです。

app.js ファイルを詳しく見ていきましょう。まず、NPM を使用してアプリケーション用に以前にダウンロードした http-errors、express、morgan、cookie-parser など、require() を使用していくつかの便利な Node ライブラリーをファイルにインポートします。path は、ファイルとディレクトリーのパスを解析するためのコア Node ライブラリーです。

const createError = require("http-errors");
const express = require("express");
const path = require("path");
const cookieParser = require("cookie-parser");
const logger = require("morgan");

それから routes ディレクトリーから require() モジュールを呼び出します。これらのモジュール/ファイルには、関連する「ルート」 (URL パス) の特定のセットを処理するためのコードが含まれています。たとえばライブラリー内のすべての本をリストするためにスケルトンアプリケーションを拡張するときは、本関連のルートを処理するための新しいファイルを追加します。

const indexRouter = require("./routes/index");
const usersRouter = require("./routes/users");

次に、インポートした Express モジュールを使ってアプリオブジェクトを作成し、それを使ってビュー (テンプレート) エンジンを設定します。エンジンの設定には 2 つの部分があります。まず、 "views" の値を設定して、テンプレートが保存されるフォルダーを指定します (この場合はサブフォルダーの /views)。それから "view engine" の値を設定してテンプレートライブラリー (この場合は "pug") を指定します。

const app = express();

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug");

次の一連の関数は app.use() を呼び出してミドルウェアライブラリーをリクエスト処理チェーンに追加します。 例えば、express.json() と express.urlencoded() はフォームのフィールドを req.body に設定するのに必要です。 これらのライブラリーに加え、express.static ミドルウェアも使用します。これにより、Express はプロジェクトのルートディレクトリーにある /public ディレクトリー内のすべての静的ファイルを配信できるようになります。

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(express.static(path.join(__dirname, "public")));

他のすべてのミドルウェアがセットアップされたので、(以前にインポートした) ルート処理コードをリクエスト処理チェーンに追加します。 インポートされたコードは、サイトのさまざまな部分に特定のルートを定義します。

app.use("/", indexRouter);
app.use("/users", usersRouter);

ファイルの最後のミドルウェアは、エラーと HTTP 404 レスポンス用のハンドラーメソッドを追加します。

// 404 を捕捉して、エラーハンドラーへ転送
app.use((req, res, next) => {
  next(createError(404));
});

// error handler
app.use((err, req, res, next) => {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});

Express アプリケーションオブジェクト (app) が完全に設定されました。最後のステップはそれをモジュールのエクスポートに追加することです (これは /bin/www によってインポートされることを可能にするものです)。

module.exports = app;

ルート

ルートファイル /routes/users.js を以下に示します (ルートファイルは同様の構造を共有しているので、index.js も表示する必要はありません)。まず、express モジュールをロードし、それを使って express.Router オブジェクトを取得します。それからそのオブジェクトのルートを指定し、最後にモジュールからルーターをエクスポートします (これがファイルが app.js にインポートされることを可能にするものです)。

const express = require("express");

const router = express.Router();

/* GET users listing. */
router.get("/", (req, res, next) => {
  res.send("respond with a resource");
});

module.exports = router;

このルートは、正しいパターンの HTTP GET リクエストが検出されたときに必ず呼び出されるコールバックを定義します。一致パターンは、モジュールのインポート時に指定された経路 ('/users') と、このファイルで定義されているもの ('/') です。 つまり、このルートは /users/ の URL が受信されたときに使用されます。

上記の関心事の 1 つは、コールバック関数が 3 番目の引数 'next' を持ち、したがって単純なルートコールバックではなくミドルウェア関数であることです。このコードでは現在 next 引数を使用していませんが、'/' ルートパスに複数のルートハンドラーを追加したい場合、将来的には役に立つかもしれません。

ビュー (テンプレート)

ビュー (テンプレート) は /views ディレクトリー (app.js で指定されている) に保存され、ファイル拡張子 .pug が与えられます。Response.render() メソッドは、オブジェクトに渡された名前付き変数の値とともに指定されたテンプレートをレンダリングし、その結果をレスポンスとして送信するために使用されます。以下の /routes/index.js のコードでは、テンプレート変数 "title" を渡した "index" テンプレートを使用して、そのルートがどのようにレスポンスをレンダリングするかを確認できます。

/* GET home page. */
router.get("/", (req, res, next) => {
  res.render("index", { title: "Express" });
});

上記のルートに対応するテンプレートを以下に示します(index.pug)。構文については後で詳しく説明します。今のところ知る必要があるのは、(変数 'Express' を持つ) title変数がテンプレートの指定された場所に挿入されることだけです。

extends layout

block content
  h1= title
  p Welcome to #{title}

自分自身で挑戦

/routes/users.js に新しいルートを作成し、URL /users/cool/ に "You're so cool" というテキストを表示します。 サーバーを実行し、ブラウザーで http://localhost:3000/users/cool/ にアクセスしてテストしてください。

まとめ

これで、ローカルライブラリー用のスケルトンウェブサイトプロジェクトを作成し、それが Node を使用して実行されることを確認しました。最も重要なのは、プロジェクトの構造も理解しているので、ローカルライブラリーのルートとビューを追加するために変更を加える必要がある場所をよく理解していることです。

次に、図書館のウェブサイトとして機能するようにスケルトンを変更します。

関連情報

• Express application generator (Express ドキュメント)
• Using template engines with Express (Express ドキュメント)

• 前のページ
• Overview: Express ウェブフレームワーク (Node.js/JavaScript)
• 次のページ