Express/express-generator

Express-Generator ハンドブック

このハンドブックでは、Node.js フレームワークである Express を使用して、アプリケーションの基本構造を迅速に生成するためのツール「express-generator」の使い方を解説します。

必要条件

以下の環境が必要です：

• Node.js (バージョン16以上を推奨)
• npm または yarn

Express-Generator のインストール

まず、express-generator をインストールします。

npm install express-generator

インストール後、以下のコマンドで正しくインストールされたかを確認します。

npx express --version
4.16.1

新しいプロジェクトの作成

以下のコマンドで新しい Express プロジェクトを作成します。

express --view=pug my-app

このコマンドは、my-app/ という名前のディレクトリにプロジェクトを作成します。--view=pug オプションはビューエンジンとして Pug を使用することを指定しています。他のビューエンジン（例: EJS, Handlebars）を指定することもできます。

オプション一覧

オプション	説明
!-c または --view=<engine>	ビューエンジンを指定します（dust,ejs,hbs,hjs,pug,twigまたはvash、デフォルトは pug）。
--git	.gitignore ファイルを作成します。
--force	既存のディレクトリに対しても強制的に生成します。
--no-view	ビューエンジンなしでプロジェクトを生成します。
-v または --view	使用するビューエンジンを指定します。
-c または --css	使用するCSSプリプロセッサを指定します（以下詳細）。

-v/--view オプション

-v または --view オプションを使用して、使用するビューエンジンを指定できます。以下は対応するビューエンジンの例です。

値	説明
pug	デフォルトのビューエンジン。簡潔なインデントベースのテンプレートエンジン。
[ejs]	JavaScript に馴染みがあり、HTMLとJSの組み合わせで記述可能なビューエンジン。
hbs	Handlebars。Mustache ベースのビューエンジンで、テンプレートの再利用が容易。
twig	PHPのTwigに似たテンプレートエンジンで、高い柔軟性と拡張性を提供。
nunjucks	Jinja2（Python）に似た強力なテンプレートエンジン。
mustache	シンプルで論理を持たないテンプレートエンジン。
none	ビューエンジンを使用せず、APIサーバーとして利用する場合に選択。

例

EJS を使用する場合

express --view=ejs my-app

-c/--css オプション

-c オプションを使用すると、CSSプリプロセッサを指定してプロジェクトを生成できます。以下は対応する値の例です。

-c/--css オプション

値	説明
css	標準のCSSファイルを使用します（デフォルト）。
sass	Sass（.scssファイル）を使用します。
less	Lessを使用します。
stylus	Stylusを使用します。

例

Sass を使用する場合

express --css=sass my-app

生成されるディレクトリ構造

express-generator で生成されたプロジェクトの構造は以下の通りです：

my-app/
├── app.js
├── bin/
│   └── www
├── public/
│   ├── images/
│   ├── javascripts/
│   └── stylesheets/
├── routes/
│   ├── index.js
│   └── users.js
├── views/
│   ├── error.pug
│   ├── index.pug
│   └── layout.pug
├── package.json
└── ...

このディレクトリ構造は、ルート定義、ビュー、静的ファイルが分離されており、アプリケーション開発に適した設計になっています。

依存パッケージのインストール

プロジェクトディレクトリに移動し、必要な依存パッケージをインストールします。

cd my-app
npm install

アプリケーションの起動

以下のコマンドでサーバーを起動します。

npm start

ブラウザで http://localhost:3000 にアクセスすると、初期設定された Express アプリが表示されます。

基本的なカスタマイズ

ルーティングの追加

新しいルートを追加するには、routes/ ディレクトリに新しいファイルを作成します。

1. routes/products.js を作成します：

   routes/products.js

   import express from 'express';
   const router = express.Router();
   
   router.get('/', (req, res) => {
     res.send('Product List');
   });
   
   router.get('/:id', (req, res) => {
     res.send(`Product ID: ${req.params.id}`);
   });
   
   export default router;
   

2. app.js にルートを登録します：

   app.js

   import productsRouter from './routes/products.js';
   app.use('/products', productsRouter);
   

これで、/products および /products/:id にアクセス可能になります。

ビューの編集

views/ ディレクトリ内のテンプレートを編集することで、アプリケーションの見た目をカスタマイズできます。

例

views/index.pug を以下のように変更します：

views/index.pug

extends layout

block content
  h1= title
  p Welcome to the updated Express application!

静的ファイルの利用

public/ ディレクトリに CSS、画像、JavaScript ファイルを配置することで、アプリケーションで使用できます。

例

public/stylesheets/style.css を作成：

public/stylesheets/style.css

body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
}

これを Pug テンプレートでリンクします：

link(rel='stylesheet', href='/stylesheets/style.css')

その他のビューエンジン

Express は他のビューエンジンにも対応しています。例えば、EJS を使用する場合は以下のように設定します。

1. EJS をインストールします：

   npm install ejs
   

2. app.js を編集してビューエンジンを EJS に変更します：

   app.js

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

3. views/ ディレクトリ内にファイルを .ejs 拡張子で作成します。

まとめ

express-generator は、Express アプリケーションの基本構造を迅速に生成するための便利なツールです。-v や -c オプションを活用して、ニーズに応じたカスタマイズを行い、効率的にアプリケーションを構築してください。