Visual studio 2019でさくっとNode.js

# IDEには、好みがあると思いますが一つの選択肢としてVisual Studio選びました。
### Visual studio 2019には、node.jsを開発するためのテンプレートが用意されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/46b4d3fa-555b-629c-c29b-0af71c1c6c6c.png)
###基本のNode.js Express アプリケーションを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/b40457e0-66c8-04d3-b88b-c99198dd1fe1.png)
###プロジェクト名を決定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/8f0b5602-9951-f9bf-9921-34cc8afc505c.png)

```
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');
##実行すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/c8e081ae-8ea8-d743-24a6-48a2688c6107.png)

```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にタイトルを渡し描画とています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/c9e05216-4f96-47d3-3219-32c9e3464783.png)

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}は、変数を描画するときに使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/4bc1ea9b-d832-327d-ab71-2aba0deb9832.png)

次に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} の文字の大きさ
```
実行すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/49c00479-d592-8f52-0c45-7aa3dee46dd3.png)

コンテナとジャンボトロンが実装できました。

###次にボタンを描画します。

```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>
```