はじめに
前回の投稿でExpressの雛形を生成しました。
今回は新規ページ（Hello World）を作成します。
環境
OS:Windows 10 Pro 64bit
node.js:v12.16.1
npm:v6.13.4
Express:v4.16.1
jsファイル作成
routesフォルダにhello.jsを作成します。
hello.js
varexpress=require('express');varrouter=express.Router();router.get('/',function(req,res,next){res.render('hello',{msg:'Hello World'});});module.exports=router;ejsファイル作成
viewsフォルダにhello.ejsを作成します。
hello.ejs
<!DOCTYPE html><html><head><metacharset="utf-8"><title>Hello World</title></head><body><%=msg%></body></html>app.jsの修正
ルート直下にあるapp.jsに次の2行を追加します。
var hello = require('./routes/hello');
app.use('/hello', hello);
app.js
varcreateError=require('http-errors');varexpress=require('express');varpath=require('path');varcookieParser=require('cookie-parser');varlogger=require('morgan');varindexRouter=require('./routes/index');varusersRouter=require('./routes/users');varhello=require('./routes/hello');// ←追加varapp=express();// view engine setupapp.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',hello);// ←追加// catch 404 and forward to error handlerapp.use(function(req,res,next){next(createError(404));});// error handlerapp.use(function(err,req,res,next){// set locals, only providing error in developmentres.locals.message=err.message;res.locals.error=req.app.get('env')==='development'?err:{};// render the error pageres.status(err.status||500);res.render('error');});module.exports=app;以上で追加作業は終わりです。サーバーを実行して動作確認をします。
動作確認
コマンドプロンプトで次のコマンドを実行します。
npm start
ブラウザで「http://localhost:3000/hello」にアクセスします。
次のキャプチャが表示されればOKです。
まとめ
このような流れでページ追加をすることが出来ます。