概要
Expressアプリをexpress-generatorを使用して作成する。
viewsはejs
実装手順
前提条件
npm, Node.js, express-generatorをインストールしていること。
expressプロジェクトの作成
express --view=ejs HelloWorld
express --view=ejs HelloWorldでテンプレートエンジンにejsを指定して、HelloWorldプロジェクトを作成する。
プロジェクトディレクトリが作成されたら、そのディレクトリに移動してnpm installを実行する。
依存パッケージがインストールされる。
新たなルーティングの追加とviewsの追加
既存のapp.jsにルーターを定義してルーティングの追加をする。
js app.js
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 helloRouter = require('./routes/hello'); // 追加
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('/hello', helloRouter); // 追加
// 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;
つづいて、新規ファイルhello.jsを作成する。
js hello.js
var express = require('express')
var router = express.Router()
router.get('/', function(req, res, next) {
res.render('hello', { title: 'hello, world.'})
})
module.exports = router
最後に静的ページをviewsディレクトリに作成する。
html hello.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
</body>
</html>
以上でnpm startすることで、ブラウザからlocalhost:3000/helloにアクセスするとHello,world.が表示される。
簡単な解説
app.jsに追加した部分
js app.js
// hello.jsをインポートしている。
// app.jsから呼び出せるようにしているイメージ
var helloRouter = require('./routes/hello'); // 追加
// "/hello"にアクセスされた際に、上記でインポートしたhelloRouterの処理を実行する。
app.use('/hello', helloRouter); // 追加
作成したhello.js
js hello.js
var express = require('express')
var router = express.Router()
// このファイルの処理が呼び出された際に、"/"にアクセスしてきた場合に実行される。
// hello.ejsをレンダ―する。
// その際に、titleに`hello, world`を格納して渡している。
router.get('/', function(req, res, next) {
res.render('hello', { title: 'hello, world.'})
})
module.exports = router
最後に静的ファイルhello.ejs
html hello.ejs
<!DOCTYPE html>
<html>
<head>
<!-- titleに格納された値をtitleとする。 -->
<title><%= title %></title>
</head>
<body>
<!-- titleに格納された値をh1タグ内に表示する。 -->
<h1><%= title %></h1>
</body>
</html>
まとめ
なんとなく理解していたexpressプロジェクトの作成方法をまとめてみた。
ここから、typescriptの導入だったり、ログ出力、importの使用などを進めていきたい。
疑問点、ご指摘等ありましたらコメントお願いいたします。