この記事ではNode.jsのフレームワークであるExpressの導入方法を解説します。
OSはMacを前提として進めていきます。
準備
まずPCにNode.jsとnpmをインストールしておいてください。
一先ずHello Worldしてみる
インストール
まずアプリケーションディレクトリを作成して、作成したディレクトリに移動します。
今回はsample-appというディレクトリを作成します。
mkdir sample-app
cd sample-app
次にnpm initでpackage.jsonを作成します。
npm init
対話式で入力していきますが、ほとんどエンターでOKです。
メインファイルの名前を変更したい場合はentry pointで任意の名前を入力してエンターを押してください。
今回はapp.jsとしました。
entry point: (index.js) app.js
最後にこれで良いか聞かれますのでyesと入力し、エンターで完了します。
{
"name": "sample-app",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) yes
最後にExpressをインストールします。
npm install express --save
メインファイルの作成
npm initのentry pointで指定した名前（今回はapp.js）で以下のようにメインファイルを作成します。
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Hello World!`)
})
サーバーの起動
下記コマンドを実行するとポート3000番でローカルサーバーが立ち上がりますのでhttp://localhost:3000にアクセスします。
node app.js
Hello World!と画面に表示されていれば成功です。
停止する場合はCtrl+Cを入力します。
Express Generatorでアプリを作成する
Express Generatorを使うとアプリケーションに必要なルーティング・テンプレートエンジンの設定、ディレクトリの作成などを自動で行ってくれます。
Webアプリの作成は通常こちらを使うと良いでしょう。
Express Generatorのインストール
まずグローバルでExpress Generatorをインストールします。
npm install -g express-generator
-hオプションでコマンドオプションを確認できます。
express -h
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 add view support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
--no-view use static html instead of view engine
-c, --css add stylesheet support (less|stylus|compass|sass) (defaults to plain css)
--git add .gitignore
-f, --force force on non-empty directory
-h, --help output usage information
アプリケーションの作成
先ほど作成したsample-appディレクトリの中身を一旦全て削除して、下記コマンドを実行します。
テンプレートエンジンはejsを指定しています。
express --view=ejs
create : public/
create : public/javascripts/
create : public/images/
create : public/stylesheets/
create : public/stylesheets/style.css
create : routes/
create : routes/index.js
create : routes/users.js
create : views/
create : views/error.ejs
create : views/index.ejs
create : app.js
create : package.json
create : bin/
create : bin/www
最後にディレクトリ名を指定すると指定したディレクトリを作成し、その中に必要なファイルも作成されます。
express --view=ejs myapp
create : myapp/
create : myapp/public/
create : myapp/public/javascripts/
create : myapp/public/images/
create : myapp/public/stylesheets/
create : myapp/public/stylesheets/style.css
create : myapp/routes/
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/views/
create : myapp/views/error.ejs
create : myapp/views/index.ejs
create : myapp/app.js
create : myapp/package.json
create : myapp/bin/
create : myapp/bin/www
次にnpm installで必要なモジュールをインストールします。
npm install
added 54 packages, and audited 55 packages in 612ms
found 0 vulnerabilities
起動
下記コマンドでサーバーを起動します。
DEBUG=sample-app:* npm start
http://localhost:3000にアクセスして下記画像の画面が表示されれば成功です。
新しいページを作成
デフォルトでは/と/usersページが作成されていますが、新しく/shopsというページを作成してみたいと思います。
まず/routes/index.jsを複製して同じ階層にshops.jsというファイルを作成します。res.render()の第一引数にレンダリングするejsファイル名、第二引数に渡す値をjsonで記述します。
var express = require('express');
var router = express.Router();
router.get('/', function (req, res, next) {
res.render('shops', { title: 'Shops' });
});
module.exports = router;
次に/views/index.ejsを複製して同じ階層にshops.ejsを作成します。
中身はそのままでOKです。
最後にapp.jsに以下のハイライト部分（2行）を追記します。
var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");
var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");
var shopsRouter = require("./routes/shops");
var app = express();
// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
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);
app.use("/shops", shopsRouter);
// catch 404 and forward to error handler
app.use(function (req, res, next) {
next(createError(404));
});
// error handler
app.use(function (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");
});
module.exports = app;
これでファイルの編集は完了しましたのでCtrl+Cで一旦サーバーを停止して、DEBUG=sample-app:* npm startで再度サーバーを起動します。
http://localhost:3000/shopsにアクセスして/でExpressだった文字がShopに変わっていれば成功です。
注意点
ファイルを変更してから反映するためには一度サーバーを停止してから再度起動して、ブラウザもリロードしなければいけません。
開発中にこの一連の作業を毎回するのは面倒ですがpm2とBrowsersyncを使用すると、この作業を自動化できます。
詳しくは下記記事をご覧ください。