IDEには、好みがあると思いますが一つの選択肢としてVisual Studio選びました。
Visual studio 2019には、node.jsを開発するためのテンプレートが用意されています。
基本のNode.js Express アプリケーションを選択します。
プロジェクト名を決定します。
C:.
│ app.js
│ ExpressApp5.njsproj
│ package-lock.json
│ package.json
│ README.md
│
├─public
│ └─stylesheets
│ main.css
│
├─routes
│ index.js
│ users.js
│
└─views
error.pug
index.pug
layout.pug
上記のようなフォルダとファイルが作成されます。
app.js
'use strict';
var debug = require('debug');
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function (req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function (err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function (err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
app.set('port', process.env.PORT || 3000);
var server = app.listen(app.get('port'), function () {
debug('Express server listening on port ' + server.address().port);
});
必要なモジュールをrequireで読み込んでいる。
viewsにある....pugは、pugをHTML化している。
Pugとは. HTMLを書くためのテンプレートエンジンです。
app.set('view engine', 'pug');
実行すると
layout.pug
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/main.css')
body
block content
index.pug
extends layout
block content
h1= title
p Welcome to #{title}
実行時には、下記のようなHTMLが生成される。
index.html
!DOCTYPE html>
<html>
<head>
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/main.css">
</head>
<body>
<h1>Express</h1>
<p>Welcome to Express</p>
</body>
</html>
index.pubを描画するためのindex.jsを見てみましょう。
index.js
'use strict';
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function (req, res) {
res.render('index', { title: 'Express' });
});
module.exports = router;
res.render('index', { title: 'Express' });は、index.pubにタイトルを渡し描画とています。
Pugの中にjsをコーディングすると
index.pug
extends layout
block content
h1= title
p Welcome to #{title}
- for(var i=1;i<=6;i++)
- var t="H"+i
#{t} #{t} の文字の大きさ
{t}は、変数を描画するときに使います。
次にlayout.pugを変更しbootstrap4を使えるようにします。
layout.pug
doctype html
html(lang="ja")
head
title= title
meta(name="viewport", content="width=device-width, initial-scale=1.0")
link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" ,crossorigin="anonymous")
script(src="https://code.jquery.com/jquery-3.3.1.slim.min.js", integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo", crossorigin="anonymous")
script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1",crossorigin="anonymous")
script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js", integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM",crossorigin="anonymous")
body
block content
bootstrap4に必要なものは、CDNから取得します。
index.pugをbootstrap4に変更します。
index.pug
extends layout
block content
.container.m-1
.jumbotron
h1= title
p Welcome to #{title}
- for(var i=1;i<=6;i++)
- var t="H"+i
#{t} #{t} の文字の大きさ
実行すると
コンテナとジャンボトロンが実装できました。
次にボタンを描画します。
index.pug
extends layout
block content
style.
.bsz {
width: 137px;
height: 70px;
font-size: small;
margin: 2px !important;
}
.container.m-1
.jumbotron
h1= title
p Welcome to #{title}
- for(var i=1;i<=6;i++)
- var t="H"+i
#{t} #{t} の文字の大きさ
.container.mt-4.body-content
each c,i in 'primary,secondary,success,danger,warning,info,light,dark'.split(',')
- var cx="bsz btn m-2 btn-"+c;
button(class=cx,id='sw'+i) SW#{i}
script.
$(function(){
$('.btn').click(function(){
var id=$(this).attr('id');
alert(id);
});
});
上記のようにstyleやscriptも追加できます。
生成されるhtmlは、
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Express</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<style>
.bsz {
width: 137px;
height: 70px;
font-size: small;
margin: 2px !important;
}
</style><div class="container m-1"><div class="jumbotron"><h1>Express</h1><p>Welcome to Express</p></div><H1>H1 の文字の大きさ</H1><H2>H2 の文字の大きさ</H2><H3>H3 の文字の大きさ</H3><H4>H4 の文字の大きさ</H4><H5>H5 の文字の大きさ</H5><H6>H6 の文字の大きさ</H6><div class="container mt-4 body-content"> <button class="bsz btn m-2 btn-primary" id="sw0">SW0</button><button class="bsz btn m-2 btn-secondary" id="sw1">SW1</button><button class="bsz btn m-2 btn-success" id="sw2">SW2</button><button class="bsz btn m-2 btn-danger" id="sw3">SW3</button><button class="bsz btn m-2 btn-warning" id="sw4">SW4</button><button class="bsz btn m-2 btn-info" id="sw5">SW5</button><button class="bsz btn m-2 btn-light" id="sw6">SW6</button><button class="bsz btn m-2 btn-dark" id="sw7">SW7</button></div></div>
<script>
$(function(){
$('.btn').click(function(){
var id=$(this).attr('id');
alert(id);
});
});</script>
</body>
</html>