Express入門

#1　サーバーを立てる
http://expressjs.com/en/starter/hello-world.html

```
mkdir myapp
cd myapp
npm install --save express
touch app.js
``` 

```app.js
let express = require('express');
app = express();

app.get('/', (req, res) => {
    res.send('hello world');
})

app.get('/about', (req, res) => {
    res.send('about this page');
})

app.listen(3000);
```

<img width="376" alt="スクリーンショット 2020-06-03 18.08.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/34d89555-7669-a544-63a7-3084fbc49be0.png">

<img width="365" alt="スクリーンショット 2020-06-03 18.10.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/b476640e-2904-37e9-d318-5a8888cf846d.png">


#2　プレースホルダーを使う
http://expressjs.com/en/guide/routing.html

```app.js
let express = require('express');
app = express();

app.get('/users/:name?', (req, res) => { // オプション指定
    if (req.params.name) {
        res.send('hello, ' + req.params.name);
    } else {
        res.send('hello, nobody');
    }
})

app.get('/items/:id([0-9]+)', (req, res) => { // 正規表現で管理
    res.send('item no:' + req.params.id);
})

app.listen(3000);
```

<img width="388" alt="スクリーンショット 2020-06-03 18.13.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/0dd5bef8-b86b-00d8-1fd0-a16d6f26ec2f.png">
<img width="333" alt="スクリーンショット 2020-06-03 18.15.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/03554531-020d-5a95-887f-1f23f0659ebf.png">
<img width="344" alt="スクリーンショット 2020-06-03 18.17.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/f33cd76a-9e0a-6553-da51-e348b2c12a41.png">
<img width="341" alt="スクリーンショット 2020-06-03 18.17.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/31088457-8705-de53-4517-b3f06c99a986.png">

#3 ファイルを読み込んで表示する
http://expressjs.com/en/starter/static-files.html

```txt:myapp
mkdir public
cd public
touch hello.txt
```

```txt:hello.txt
hello from hello.txt
```

```app.js
let express = require('express');
app = express();

app.get('/hello.txt', (req, res) => {
    res.sendfile(__dirname + '/public/hello.txt'); // ファイルの中身を表示
})

app.listen(3000);
```
<img width="340" alt="スクリーンショット 2020-06-03 18.24.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/abf9a762-eec9-ad5e-36bc-373096c05dad.png">

```txt:public
touch about.txt
```

```about.txt
this is about.txt
```

```app.js
let express = require('express');
app = express();

app.use(express.static(__dirname + '/public')) // paramに指定されたファイルがpublicフォルダ内にあれば表示

app.listen(3000);
```

<img width="358" alt="スクリーンショット 2020-06-03 18.29.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/a48d3803-0920-3a05-2bb0-17507c4ad77b.png">

#4　middlewareを作る
http://expressjs.com/en/guide/using-middleware.html#using-middleware

```app.js
let express = require('express');
app = express();

// 定義された順番で優先的に実行される
app.use(express.static(__dirname + '/public'))
app.use((req, res, next) => {
    console.log('my custom middleware');
    next();  // 次の処理へ
})

app.get('/hello.txt', (req, res) => {
    res.send("hello from app.js");
})

app.listen(3000);
```

http://localhost:3000/test

```
my custom middleware
```

```txt
npm install -g nodemon
nodemon app // 再起動が必要なくなる
```

#5　ejsテンプレートを使う
http://expressjs.com/en/5x/api.html#app.engine

```txt:myapp
npm install --save ejs
mkdir views
cd views
touch index.ejs
```

```app.js
let express = require('express');
app = express();

app.set('views', __dirname + '/views') // テンプレートがどこにあるかを指定
app.set('view engine', 'ejs') // ejsを使うための設定

app.use(express.static(__dirname + '/public'))

app.get('/', (req, res) => {
    res.render('index', {title: 'title'});
})

app.listen(3000);
```

```ejs:index.ejs
<html>
<h1><%= title %></h1>
hello from index.ejs
</html>
```

<img width="317" alt="スクリーンショット 2020-06-03 18.54.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/a70905dd-f154-4ad0-ac1f-889d8abbe01e.png">

#6　app.paramを使う
http://expressjs.com/en/5x/api.html#app.param

```js:app.js
let express = require('express');
app = express();

app.set('views', __dirname + '/views') // テンプレートがどこにあるかを指定
app.set('view engine', 'ejs') // ejsを使うための設定

app.use(express.static(__dirname + '/public'))

app.param('id', (req, res, next, id) => {
    let users = ['hoge', 'wafu', 'piyo'];
    req.params.name = users[id];
    next();
})

app.get('/hello/:id', (req, res) => {
    res.send('hello,' + req.params.name);
})

app.get('/bye/:id', (req, res) => {
    res.send('bye, ' + req.params.name);
})

app.listen(3000);
```

<img width="372" alt="スクリーンショット 2020-06-03 19.30.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/95077f87-a890-e22f-89e3-a1ce6af41df6.png">
<img width="329" alt="スクリーンショット 2020-06-03 19.31.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/7573a328-0f31-bc2b-4c79-46dd5a90f925.png">

#6　POSTの処理
http://expressjs.com/en/5x/api.html#app.post.method

```
npm install --save body-parser
```

```txt:views
touch new.ejs
```

```ejs:new.ejs
<html>
<form method="post" action="/create">
<input type="text" name="name">
<input type="submit" value="作成">
</form>
</html>
```

```js:app.js
let express = require('express');
let bodyParser = require('body-parser');
app = express();

app.set('views', __dirname + '/views') // テンプレートがどこにあるかを指定
app.set('view engine', 'ejs') // ejsを使うための設定

app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(express.static(__dirname + '/public'))

app.get('/new', (req, res) => {
    res.render('new')
})

app.post('/create', (req, res) => {
    res.send(req.body.name);
})

app.listen(3000);
```

<img width="314" alt="スクリーンショット 2020-06-03 19.41.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/ebb6a588-faa6-35cf-3eb7-df7b021d741f.png">

<img width="362" alt="スクリーンショット 2020-06-03 19.41.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/14ac626b-4ad8-cb41-2730-cd77209031e4.png">