node.jsとexpress-generatorで 簡単なAjaxのプログラム作成


## 作るもの

![スクリーンショット 2019-04-09 7.30.11.png](https://qiita-image-store.s3.amazonaws.com/0/88686/69e5f64a-124f-4c36-9df5-d7437b0834b7.png)
↓「2」を入力してボタンを押すと、Ajax通信して表示する。
![スクリーンショット 2019-04-09 7.30.29.png](https://qiita-image-store.s3.amazonaws.com/0/88686/99d7555a-f94d-c206-4a79-ae899f2b8710.png)

- ソース

https://github.com/tseno/nodejsapp/tree/master/ajax-app

## 前提

- node.jsがインストール済み

## express-generatorのインストール

- フレームワーク `Express` で動かすことができるアプリの雛形を作ってくれるライブラリ `express-generator` のインストール

```
npm install -g express-generator
```

## 雛形アプリの自動生成

- Express 雛形アプリの自動作成（作りたいディレクトリの上で実行すると、ajax-appディレクトリが作られ、アプリが作成される）

```sh
## ajax-app というアプリが作成される
express --view=ejs ajax-app
# ディレクトリ移動
cd ajax-app
# package.jsonが自動生成されているので、そこに書いてあるライブラリをインストール
npm install
```

## アプリの作成

- ディレクトリ構造

```
ajax-app/
├── app.js  ← 今回修正
├── bin
│   └── www
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── ajax.js  ← 今回追加
│   ├── index.js
│   └── users.js
└── views
    ├── ajax.ejs  ← 今回追加
    ├── error.ejs
    └── index.ejs
```

### アクションの作成

- routes/index.jsをコピーしてajax.jsを作成する。
- 初期表示と、ボタン押下時のアクションを作成する。

```js:routes/ajax.js
var express = require('express');
var router = express.Router();

var data = [
  {name: 'Taro', age: '35', mail: 'taro@yamada'},
  {name: 'Hanako', age: '29', mail: 'kanako@flower'},
  {name: 'Sachiko', age: '41', mail: 'sachiko@happy'},
];

// 初期画面表示
router.get('/', function(req, res, next) {
  var msg = "0〜2の数字を入力して送信してください。";
  var data = {
    title: 'Ajax!',
    content: msg
  };
  res.render('ajax', data);
});

// ボタン押下時に、data配列のn番目のJSONを送る。
router.get('/get', function(req, res, next) {
  var n = req.query.id;
  res.json(data[n]);
});

module.exports = router;
```

### メインプログラム(app.js)の修正

- エンドポイント `/ajax` と、ファイル `/route/ajax` を関連づける。

```js:app.js（一部）
//（途中省略）
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var ajaxRouter = require('./routes/ajax');     // add
//（途中省略）
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/ajax', ajaxRouter);     // add
//（途中省略）
```

### ビューの作成
- JQueryでボタン押下時にnumテキストボックスの値を`/ajax/get`にGETで送って、返却された値を画面に表示している。

```html:views/ajax.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title><%= title %></title>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script>
        $(document).ready(function () {
            $('#btn').click(function() {
                var n = $('#num').val();
                $.getJSON("/ajax/get?id=" + n, function (json) {
                    var msg = '<table>'
                        + '<tr><th>名前</th>'
                        + '<td>'+ json.name +'</td></tr>'
                        + '<tr><th>年齢</th>'
                        + '<td>'+ json.age +'</td></tr>'
                        + '<tr><th>メール</th>'
                        + '<td>'+ json.mail +'</td></tr>'
                        + '</table>';
                    $('#msg').html(msg);
                })
            })
        })
    </script>
</head>
<body>
<header>
    <h1><%= title %></h1>
</header>
<div role="main">
    <p id="msg"><%- content %></p>
    <input type="text" name="num" id="num">
    <input type="button" id="btn" value="GET!">
</div>
</body>
</html>

```

## アプリの実行

```sh
npm start
```
http://localhost:3000 を開いて、0~2の数字を入力してボタンを押す。

参考文献
[Node.js 超入門[第2版]](https://www.amazon.co.jp/Node-js-%E8%B6%85%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0%E6%B4%A5%E8%80%B6%E4%B9%83-ebook/dp/B07LFR46K5/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)