('User', userSchema)
```
TypeScript でスキーマを構築するためには、スキーマとは別に `Document` を継承したインターフェースを作成する必要があります。
`mongoose.Schema` が提供するコンストラクタにパラメータを渡すことでスキーマを構築できます。
スキーマでは型定義だけでなく、`required` や `unique` などのオプションも使用可能です。
`timestams` オプションを設定すると、自動で `created_at`、`updated_at` フィールドを設定してくれます。
`mongoose.Schema` メソッドの `virtual` はデータベースが提供しない仮想のフィールドを使用できます。
この例ではユーザーのフルネームを返し、`fullName` というプロパティでアクセスできます。
最後に、`mongoose.model()` にスキーマを渡して、モデルが作成されます。
このとき、ジェネリクスで呼び出すようにします。
## ユーザー一覧の修正
モデルを mongoose で構築するように修正したので、コントローラーの実装も修正します。
```ts
import Express from 'express'
import User from '../models/userModel'
export default {
index: async (
req: Express.Request,
res: Express.Response,
next: Express.NextFunction
) => {
try {
const users = await User.find({}).exce()
res.locals.users = users
next()
} catch (err) {
next(err)
}
},
indexView: (req: Express.Request, res: Express.Response) => {
res.render('users/index')
},
}
```
データベースへの接続は失敗することがあるので、`index()` はミドルウェア関数として実装します。
ミドルウェアはリクエスト（req）、レスポンス（res）と次のミドルウェアの呼び出し関数（next）を受け取る関数でリクエストに処理を挟むことができます。
ミドルウェアで例えばロギングをしたり、認証をしたあとに、`next()` を呼び出すことで、次のミドルウェア関数へ処理を渡します。
ミドルウェア関数では、確実に `next()` を呼ばなければいけないことに注意してください。さもないと、無限ループに陥りスタックオーバーフローが発生します。
try/catch 構文で処理をし、エラーは発生した場合には `next()` にエラーを渡しミドルウェア関数でエラーは発生したことを伝えます。
ルーティングも次のように修正します。
```ts
import Express from 'express'
import usersController from '../controllers/usersController'
const router = Express.Router()
router.get('/', usersController.index, usersController.indexView)
export default router
```
## データを入れて確認
MongoDB にデータを入れてみて表示を確認してみましょう。
MongoDB の GUI 操作には、[MongoDB compass](https://www.mongodb.com/products/compass)が便利です。
ローカルに接続し、データベースとテーブルを選んでインサートします。
投入したユーザーデータが表示されました。
## ユーザーの作成
### フォームの作成
アプリケーションから新規ユーザーを作成できるように、作成フォームを作りましょう。
`views/users` フォルダの下に、`new.ejs` というファイルを作成します。
```html
```
コントローラーとルーティングも追加します。
```ts
import Express from 'express'
import User from '../models/userModel'
export default {
index: async (
req: Express.Request,
res: Express.Response,
next: Express.NextFunction
) => {
try {
const users = await User.find({}).exec()
res.locals.users = users
next()
} catch (err) {
next(err)
}
},
indexView: (req: Express.Request, res: Express.Response) => {
res.render('users/index')
},
new: (req: Express.Request, res: Express.Response) => {
res.render('users/new')
},
}
```
```ts
import Express from 'express'
import usersController from '../controllers/usersController'
const router = Express.Router()
router.get('/', usersController.index, usersController.indexView)
router.get('/new', usersController.new)
export default router
```
`users/new` にアクセスして確認します。
### リクエストを受け取れるようにする
Express でリクエストパラメータを受け取れるようにするために、`main.ts` に次のように追記します。
```ts
import bodyParser from 'body-parser'
app.use(bodyParser())
```
### createアクション
実際にリクエストパラメータを受け取りデータベースに保存する `create` アクションを実装します。
リクエストパラメータは `res.body` から受け取ることができます。
```ts
import Express from 'express'
import User, { User as UserDoc } from '../models/userModel'
export default {
index: async (
req: Express.Request,
res: Express.Response,
next: Express.NextFunction
) => {
try {
const users = await User.find({}).exec()
res.locals.users = users
next()
} catch (err) {
next(err)
}
},
indexView: (req: Express.Request, res: Express.Response) => {
res.render('users/index')
},
new: (req: Express.Request, res: Express.Response) => {
res.render('users/new')
},
create: async (
req: Express.Request,
res: Express.Response,
next: Express.NextFunction
) => {
const userParams = req.body as UserDoc
try {
await User.create(userParams)
res.locals.redirect = '/users'
next()
} catch (err) {
next(err)
}
},
redirectView: (
req: Express.Request,
res: Express.Response,
next: Express.NextFunction
) => {
const redirect = res.locals.redirect
if (redirect) {
res.redirect(redirect)
} else {
next()
}
},
}
```
ドキュメントの作成は、`create()` メソッドを使用します。
ユーザーの作成に成功したら `redirectView` アクションへ渡します。
ルーティングを追記しましょう。
```ts
import Express from 'express'
import usersController from '../controllers/usersController'
const router = Express.Router()
router.get('/', usersController.index, usersController.indexView)
router.get('/new', usersController.new)
router.post('/create', usersController.create, usersController.redirectView)
export default router
```
## ユーザーデータを読み出して更新
次は、`update` アクションを作成します。`edit.ejs` ファイルを作成します。
作成用のフォームとよく似ていますが、初期値としてユーザーのデータを埋め込みます。
```html
```
更新フォームへのパスは `users/:id/edit` です。ルーティングにコロン（:）を使うと動的にルーティングさせることができます。
`index.ejs` から更新フォームへアクセスできるようにしておきましょう。
```html
Edit
|
```
さて、更新のリクエストを送信するときには、PUT リクエストを送信できるようにしたいです。
しかし。HTML フォームがサポートしているリクエストは GET と POST だけだのでこのままでは実現できません。
そのため、HTTP リクエストを書き換えるパッケージを使用します。
```sh
npm i method-override
npm i -D @types/method-override
```
`main.ts` に method-override を使うように追記します。
```ts
import methodOverride from 'method-override'
app.use(methodOverride('_method', {
methods: ['POST', 'GET']
}))
```
method-override は、URL に `_method` というクエリパラメータを見つけたら、そのパラメータの値として指定されたメソッドを使ってそのリクエストを解釈します。
フォームのアクションパスに、`?_method=PUT` を加えれば、それは PUT リクエストとして解釈されます。
### editアクションを作成
コントローラーに edit アクションを作成しましょう。
`req.params.id` からユーザーの ID 受け取り、findById()`メソッドでデータベースから特定のユーザーを捜索します。
ユーザーが見つからない場合には、エラーを送出します。
また `res.locals` オブジェクトに代入した値はビューで変数として使用できます。
```ts
edit: async (
req: Express.Request,
res: Express.Response,
next: Express.NextFunction
) => {
const userId: string = req.params.id
try {
const user = await User.findById(userId)
res.locals.user = user
next()
} catch (err) {
next(err)
}
},
editView: (req: Express.Request, res: Express.Response) => {
res.render('users/edit')
},
```
### updateアクション
update アクションも作成しましょう。
`findByIdAdUpdate()` メソッドを使用すれば、ユーザーを ID で見つけたあとに更新できます。
```ts
update: async (
req: Express.Request,
res: Express.Response,
next: Express.NextFunction
) => {
const userId: string = req.params.id
const userParams = req.body as UserDoc
try {
await User.findByIdAndUpdate(userId, {
$set: userParams,
})
res.locals.redirect = '/users'
next()
} catch (err) {
next(err)
}
},
```
ルーティングに、edit と update を追加しましょう。
update アクションは PUT リクエストを受け取ります。
```ts
router.get('/:id/edit', usersController.edit, usersController.editView)
router.put('/:id/update', usersController.update, usersController.redirectView)
```
## ユーザーを削除する
最後に、delet アクションを作成しましょう。
ユーザーを削除するために、ビューは作成しません。
インデックスページに削除のために動線を用意します。
```html
DELETE
|
```
### deleteアクション
ユーザーを削除するための delete アクションをコントローラーに追加します。
特定のユーザーを削除するために `findByIdAndRemove` を呼び出します。
```ts
delete: async (
req: Express.Request,
res: Express.Response,
next: Express.NextFunction
) => {
const userId: string = req.params.id
try {
await User.findByIdAndRemove(userId)
res.locals.redirect = '/users/'
next()
} catch (err) {
next(err)
}
},
```
今までの流れと同じく、ユーザーの削除に成功したら次のミドルウェア関数を呼び出し、失敗したらエラーを渡します。
最後に、ルーティングに追加しましょう。
```ts
router.delete('/:id/delete', usersController.delete, usersController.redirectView)
```
これで、基本的な CRUD 操作は完了です。