Express + sequelize でCRUDアプリを作る 

# 前回の記事の続きです
こちらの記事を元にCRUDアプリを作っていきます。

https://qiita.com/joruju2248/items/225000ad903598204f7f

# ejsをインストール
これでejsファイルが使えるようになりました。

```
$ npm install ejs --save
```

# ディレクトリ直下のapp.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');
let db = require("./models/");
var app = express();

// view engine setup
app.set('views', './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.get('/', (req, res, next) => {
  db.user.findAll({}).then((users) => {
    res.render('index.ejs', {users: users});
  });
});

//新規作成画面のルーティング
app.get('/new', (req, res) => {
  res.render('new.ejs');
});

//新規作成アクション
app.post('/create', (req, res) => {
  db.user.create({
    firstName: req.body.firstName,
    lastName: req.body.lastName,
    email: req.body.email,
    createdAt: new Date(),
    updatedAt: new Date()
  });
  res.redirect('/')
});

//編集画面へのルーティング
app.get('/edit/:id', (req, res, next)=> {
  db.user.findByPk(req.params.id).then(user => {
    res.render('edit.ejs', {user: user});
  });
});

//更新アクション
app.post('/update/:id', (req, res) => {
  db.user.findByPk(req.params.id).then(user => {
    user.id = req.params.id,
    user.firstName = req.body.firstName,
    user.lastName = req.body.lastName,
    user.email = req.body.email,
    user.createdAt = new Date(),
    user.updatedAt = new Date()
    user.save();  
    res.redirect('/');
  });
});

//削除
app.post('/delete/:id', (req, res) => {
  db.user.findByPk(req.params.id).then(user => {
    user.destroy();
    res.redirect('/');
  });
});

// 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;

```

# ディレクトリ構造を確認&追加
こんな感じでviewsディレクトリ直下にindex.ejs、edit.ejs、new.ejsを新規作成してください。
.
│
├views
│  ├── index.ejs
│  ├── edit.ejs
│  └── new.ejs
│
└── app.js

# index.ejsの中身
```views/index.ejs
<% users.forEach((user) => { %>
    <li>
        <div>
        <span><%= user.firstName %></span>
        <span><%= user.lastName %></span>
        <span><%= user.email %></span>
        <a href="/edit/<%= user.id %>">詳細</a>
        <form action="/delete/<%= user.id %>" method="post">
            <input type="submit" value="削除">
        </form>
        </div>
    </li>
<% }) %>
```

# new.ejsの中身

```view/new.ejs
<form action="/create" method="post">
    <input type="text" placeholder="名前" name="firstName">
    <input type="text" placeholder="苗字" name="lastName">
    <input type="text" placeholder="e-mail" name="email">
    <input type="submit" value="登録する">
</form>

```

# edit.ejsの中身
```views/edit.ejs
<form action="/update/<%= user.id %>" method="post">
    <input type="text" placeholder=<%= user.firstName %> name="firstName">
    <input type="text" placeholder=<%= user.lastName %> name="lastName">
    <input type="text" placeholder=<%= user.email %> name="email">
    <input type="submit" value="更新する">
</form>
```

# まとめ
app.jsでルーティングを受け取り、各種アクションを行っています。
途中で出てくる```findAll()```や```create()```、```findByPk```などは、sequelizeに由来するものです。