Express,React,SuperAgent使ってTodoリストを作ってみた。その1(APIサーバー構築編)

#はじめに
SuperAgentでCORS前提でReact, node.jsの記事が見当たらかったので、色々調べてまとめてみた。
環境設定はMacユーザーを前提にしてます。
出来るだけ初心者にもわかるよう一から書いています。

#環境設定
環境設定はこちらの記事を参考にnode.jsをインストールしてください(Macの方)
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

#Expressインストール

ターミナル

$ mkdir todoApp
$ cd 　todoApp
$ mkdir todo_server
$ cd todo_server
$ npm init

entry point: (index.js) server.js

$ npm install --save express 

＊npm initをすると、色々聞かれます。　
entry pointのみserver.jsとしておく。(APIサーバーとわかりやすくするため)
それ以外はEnterで問題ないです。

#その他、必要なモジュールをインストール

ターミナル

npm install --save body-parser

#server.jsを記述
好きなエディタで書いてください。私の場合はvim
vim server.js

server.js

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

app.set('port', (process.env.PORT || '5000'));

//CORSの設定（HTTPレスポンスヘッダの追加）

app.use(function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
  res.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Max-Age', '86400');
  next();
});
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

//OPTIONSメソッドの実装

app.options('*', function (req, res) {
  res.sendStatus(200);
});

/*
**todoリストの処理
*/

//todoの配列を用意
var todo = [
  { message: 'todoを表示'}
] 
//ここはAPIサーバーのホーム。内容は特に重要ではない
app.get('/', function(req, res){
  var param = {"result": "Hello World"};
  res.json(param);
});

//api用のget, postルートメソッド
app.get('/api', function (req, res) {
  res.json(todo);
});
app.post('/api', function(req, res) {
  console.log(req.body);
  console.log(req.body.name);
  console.log(typeof req.body);
  todo.push({
    message: req.body.message
  })
  res.sendStatus(200);
});
//port確認用
app.listen(app.get('port'), function(){
  console.log("this api server is running at localhost:" + app.get('port'));
});

これでAPIサーバーは完成!
#APIサーバー起動

ターミナル

$ npm install
$ npm start

試しにhttp://localhost:5000/apiにアクセスして

{ message: 'todoを表示'}

と出てれば成功です。

#次はその２(Reactクライアント制御編)
現在作成中

#参考にした記事
https://qiita.com/akakuro43/items/7f5c366e537324f92510
https://tnakamura.hatenablog.com/entry/2015/12/17/083546