Express.jsの開発を始めるまでのローカル準備テンプレ

Express.jsの開発を始めるまでのローカル準備テンプレ

October 30, 2020

完全な自分用備忘録。

前提：Node.js はインストール済みとする。

まず、Express のアプリ開発用スペースとして、適当なディレクトリを作る。ここでは、express_workspace とする。

１．ジェネレータでスケルトンを作成 #

Express.js 公式の参考ページ：https://expressjs.com/ja/starter/generator.html

ジェネレータを利用してスケルトンを作成するために、express-generator というパッケージをインストールしておく。express_workspace 上で、以下を実行。

npm install express-generator

（npm のバージョンが 5.0 以降だと、npm install はデフォルトでモジュールを package.json の dependencies（依存関係）リストに追加する。それ以前のバージョンの npm だと、依存関係リストに追加するためには -save オプションを明示しなければいけない。npm のバージョンが古い場合は、-save オプションをつけて「npm install express -save」と実行する。）

上記実行後、カレントディレクトリに node_modules と package-lock.json が作られている。

（なお、公式サイトの手順に従うと、-g のオプションをつけてグローバル環境にインストールしているが、ローカルで済むものは極力ローカルへのインストールにしておきたいため、ここではグローバルのオプションはつけないで実行。）

（ジェネレータの機能は、Express ３系までは標準搭載されていたが、４系では別パッケージとして分離されたため、このように別途インストールが必要になった。）

インストールできたことを確認する。

./node_modules/.bin/express -h

ヘルプ一覧が表示されれば、インストールされているということ。

（公式サイトの手順に従い、express-generator をグローバルでインストールした場合は自動的にパスが通るため、express までのパスを記述しなくても「express -h」だけで実行可能。）

インストールした express-generator を使って、アプリケーション・スケルトンを作成する。

ここではテンプレートエンジンには EJS、CSS プリプロセッサには LESS を指定。これは各自の好みに応じて。

（オプションを付けないと、Node.js のデフォルトで、テンプレートエンジンは Pug（旧 Jade）、CSS のプリプロセッサは無し（素の CSS）になる。）

./node_modules/.bin/express --view=ejs --css=less myapp

カレントディレクトリに myapp が作成される。myapp に移動後、npm install を実行し、依存するモジュールをインストールする。

cd myapp
npm install

（EJS テンプレートエンジンを使うのに必要なパッケージである「ejs」や、LESS のコンパイラパッケージである「less-middleware」はこのとき自動的にインストールされるので、個別インストールは不要。）

npm install 実行後、最終的に myapp の構成は以下のようになっている。

myapp
├── app.js
├── bin
│   └── www
├── node_modules
│   └── (many modules)
├── package-lock.json
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.less
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.ejs
    └── index.ejs

２．サーバを立ち上げて確認する #

以下を実行。

npm run start

http://localhost:3000 にアクセスすると、Hello World のページが表示される。サーバを停止するには「control + C」を押す。

（npm run start を実行すると、package.js の中の scripts 部分にある start の内容が実行される。以下の部分。）

"scripts": {
  "start": "node ./bin/www"
}

（つまり npm run start は、「node ./bin/www」とコマンドしているのと同じこと。そのまま「node ./bin/www」と入力してサーバを立ち上げることもできる。）

（start コマンドとして定義している場合は、run を省略して、npm start で実行することもできる。逆に、start ではない名称でコマンドを登録した場合は、run を省略することはできない。）

３．共通レイアウトを使用できるようにする #

テンプレート部分に共通レイアウトを適用できるよう、express-ejs-layouts を使用する。

参考：https://www.npmjs.com/package/express-ejs-layouts

まずはインストール。

npm install express-ejs-layouts

app.js を編集して、express-ejs-layouts を適用する。

上段でモジュールを require しているところに下記を追加。

var expressLayouts = require('express-ejs-layouts');

中段で app.use している部分に下記を追加。require した express-ejs-layouts を実行する。

app.use(expressLayouts);

views ディレクトリ直下に「layout.ejs」を作成し、共通テンプレート部分を記載のうえ、個別に読み込ませる部分に<%- body %>と書く。以下は例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="/stylesheets/style.css" />
    <title><%= title %></title>
  </head>
  <body>
    <%- body %>
  </body>
</html>

４．ファイル変更時にサーバを自動再起動させる #

参考（次のページ内の「ファイルの変更時にサーバの再起動を有効にする」という部分）：https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website

nodemon をインストール。

npm install nodemon

package.json を編集して、npm run devstart と入力した際に nodemon で起動させるようにする。scripts 部分を以下のように更新。

// 更新前
  "scripts": {
    "start": "node ./bin/www"
  },

// 更新後
  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  },

５．再度サーバを立ち上げて確認する #

サーバを立ち上げて確認する。以下を実行。

npm run devstart

nodemon を利用して立ち上げることで、サーバを立ち上げたままファイルを更新した際にも、画面をリロードすれば、更新後のファイルを読み込んで表示するようになっている。

以上 #

あとは開発していくだけ。