Express application genrator

Express アプリケーションジェネレータは、コマンド一発で Express アプリの骨組み(スキャフォールド)を自動生成する CLI ツールです。以下、初心者の方向けにステップごとに解説します。


1. インストール方法

  • Node.js 8.2.0 以上 をお使いの場合は、npx 経由で実行可能です。 npx express-generator これだけで最新バージョンのジェネレータを使えます。(expressjs.com)
  • Node.js が古い場合npx がない場合)は、グローバルにインストールして利用します。 npm install -g express-generator express [アプリ名] たとえば express myapp とすれば、新規フォルダ myapp にプロジェクトが生成されます。(expressjs.com)

2. オプション確認

ジェネレータが持つ主なオプションは以下のとおりです。実際の一覧は -h で確認できます。

express -h

主なオプション例:

  • -v, --view <engine> : テンプレートエンジン指定 (ejs, pug, hbs, twig, vash など)
  • -c, --css <engine> : CSS プリプロセッサ指定 (less, stylus, compass, sass)
  • --no-view : View テンプレートを生成しない
  • --git : .gitignore を自動追加
  • -f, --force : 空でないディレクトリにも強制生成 (expressjs.com)

3. プロジェクト生成の例

ここでは View に Pug、アプリ名を myapp に指定した例です。

express --view=pug myapp

実行すると、以下のように各種ファイル・フォルダが作成されます。(expressjs.com)

create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/bin/www
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/public/stylesheets/style.css
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/views/index.pug
create : myapp/views/layout.pug
create : myapp/views/error.pug


4. 依存パッケージのインストールと起動

生成後、プロジェクトディレクトリに移動して依存関係をインストールします。

cd myapp
npm install

  • Mac/Linux: DEBUG=myapp:* npm start
  • Windows (CMD): set DEBUG=myapp:* & npm start
  • Windows (PowerShell): $env:DEBUG='myapp:*'; npm start

起動後、ブラウザで http://localhost:3000/ を開くと、初期画面が表示されます。(expressjs.com)


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

デフォルトで以下の構造が作られます(Pug/CSSなしオプションなどによって多少変わります)。(expressjs.com)

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


6. カスタマイズと次のステップ

  • 生成されたファイルはあくまで「ひな形」です。必要に応じてフォルダ構成やミドルウェア設定を変更してください。
  • ルーティングやテンプレートエンジン、ミドルウェアの追加方法は公式ドキュメントの「Basic routing」や「Using template engines」を参照すると理解が深まります。

以上が Express application generator の基本的な使い方です。これを足がかりに、実際に手を動かしてみましょう!

サンプルアプリ

サンプルアプリとその作成のためのチュートリアルを作成したので、参考にしてください。