Expressの勉強(HTTP response)

# Expressを使ったアプリ開発

バックエンドの勉強をしようとExpressの勉強を始めました。
UdemyでExpressの勉強をしたので、復習をしながら勉強の記録を残します。

## 開発環境
OS : Windowos
エディター : VSCode

## package.jsonの作成
```
sampleapp> npm init
package name: (sampleapp)
version: (1.0.0)
description:
entry point: (index.js) app.js  // エントリーポイントを変更
test command:
git repository:
keywords:
author: Mellbrother
license: (ISC)

sampleapp> npm install express --save
sampleapp>
```
## フォルダ構成
```
sampleapp> tree
.
|-app.js
|-package.json
```

## app.js
expressのサンプルコードを使用([https://www.npmjs.com/package/express](URL))

```javascript:app.js
const express = require("express");
const app = express();

app.get("/", function (req, res) {
  res.send("Hello World");
});

app.listen(3000);
```

http://localhost:3000 にアクセスするとHello Worldと表示される。

## HTTP response
上記のapp.jsのresはHTTP responseです。
resのプロパティー、メソッドのうち調べたものを下にまとめました。

### res.locals
レスポンスのローカル変数を保持している。リクエストとレスポンスの一サイクルの間にview(ejsなど)で使用することができる。
リクエストのパス名や認証されたユーザーなどの情報を公開する際に使えます。

```javascript

app.use(function (req, res, next) {
  res.locals.url = req.url;
  next();
});
app.get("/", function (req, res) {
  res.send(res.locals);
});

// 出力
// {"url":"/"}
```

### res.append(field [, value])
Express v4.11.0+からサポート
指定したレスポンスヘッダーのフィールドを追加します。

valueには文字列または配列を指定可能です。
※res.append()の後にres.set()を呼ぶとヘッダーのvalueがリセットされます。

```javascript

res.append('Link', ['<http://localhost/>', '<http://localhost:3000/>'])
res.append('Set-Cookie', 'foo=bar; Path=/; HttpOnly')
res.append('Warning', '199 Miscellaneous warning')
```

### res.cookie(name, value [,options])
cookieにnameとvalueを保存します。
valueはstringまたはjsonを指定できます。

optionsにはcookieの有効期限やsecure設定などcookieに関するオプションを設定できます。

```javascript

res.cookie('name', 'tobi', { domain: '.example.com', path: '/admin', secure: true })
res.cookie('rememberme', '1', { expires: new Date(Date.now() + 900000), httpOnly: true })
```

### res.get()
HTTPレスポンスヘッダーのフィールドを指定することによりフィールドの中身を得ることができます。

```javascript

res.get('Content-Type')
// => "text/plain"
```

### res.json([body])
json形式のレスポンスを返すときに使います。
配列, string, boolean, number, nullなどをJSON形式に変換します。

```javascript

res.json(null)
res.json({ user: 'tobi' })
res.status(500).json({ error: 'message' })
```

### res.redirect([status,] path)
与えられたURLにリダイレクトします。
statusにはHTTPステータスコードを設定できます。
指定しない場合は302番になります。



```javascript

// http://localhost:3000/hogeにいるとき
res.redirect('/foo/bar') // http://localhost:3000/hoge/foo/bar
res.redirect('http://example.com') 
res.redirect(301, 'http://example.com')
res.redirect('../login') // http://localhost:3000/login
``` 

### res.render(view [,locals][, callback])
viewをレンダリングし、レンダリングされたHTMLをクライアント側にレスポンスします。

localsに設定した値はテンプレートエンジンなどを用いたviewで使うことができます。

callbackを指定した場合、明示的にHTMLをレスポンスする必要があります。

```javascript

// send the rendered view to the client
res.render('index')

// if a callback is specified, the rendered HTML string has to be sent explicitly
res.render('index', function (err, html) {
  res.send(html)
})

// pass a local variable to the view
res.render('user', { name: 'Tobi' }, function (err, html) {
  // ...
})
```

### res.send([body])
HTTPレスポンスを返します。
bodyにはバッファーオブジェクト、文字列、配列などを使えます。

```javascript:example
res.send(Buffer.from('whoop'))
res.send({ some: 'json' })
res.send('<p>some html</p>')
res.status(404).send('Sorry, we cannot find that!')
res.status(500).send({ error: 'something blew up' })
```


### res.sendFile(path [, options][, fn])
Express v4.8.0からサポート
pathにあるファイルを表示します。
optionsでrootを設定することで相対パスを指定できます。

```javascript
app.get("/", function (req, res) {
  res.append("Set-Cookie", "foo=bar; Path=/; HttpOnly");
  res.sendFile("index.html", {
    root: path.join(__dirname, "public"),
  });
});
```

renderメソッドとの違いはテンプレートエンジンを使えるかどうかです。テンプレートエンジンを使う場合にはrenderを使いましょう。htmlファイルの表示の際はどちらでも構いません。

### res.sendStatus(statusCode)
HTTPステータスを設定し、ステータスコードにあった文字列を返します。

```javascript
res.sendStatus(200) // equivalent to res.status(200).send('OK')
res.sendStatus(403) // equivalent to res.status(403).send('Forbidden')
res.sendStatus(404) // equivalent to res.status(404).send('Not Found')
res.sendStatus(500) // equivalent to res.status(500).send('Internal Server Error')
```

### res.set(field [, value])
HTTPresponseヘッダーを設定します。一度に複数フィールドの設定ができます。

```javascript
res.set({
  'Content-Type': 'text/plain',
  'Content-Length': '123',
  ETag: '12345'
})
```
### res.status(code)
HTTPステータスをセットします。

```javascript
res.status(403).end()
res.status(400).send('Bad Request')
res.status(404).sendFile('/absolute/path/to/404.png')
```

## おわりに
思ったよりメソッドの数が多くて驚きました。
次回はRouterについて調べます。