APIのデモンストレーション

このチュートリアルでは、どのように初歩的なAPIを作成するのか、APIをフロントエンドと接続するのかを学びます。

今回のタスクで使用するツールと技術は以下の通りです。

• パッケージマネージャー（NPM）
• NodeのWebフレームワーク（Express）
• NextGen JS構文（ECMA Script6）

1. プロジェクトの設定

ホームディレクトリに移動しましょう。

cd ~

 
今回のタスクで使用する新しいディレクトリを作成しましょう。

mkdir api-demo
cd api-demo

 
以下のコードを api.js という名前で保存しましょう。

'use strict';

const express = require('express');
const app     = express();

// Enable CORS
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

// Show homepage
app.get('/', (req, res, next) => {
  res.send('Hello World.');
});

// Show our results
app.get('/fruits', (req, res, next) => {
  let list = {
    apples: 1,
    bananas: 5,
    oranges: 10
  }
  res.json(list);
});

// Catch 404 and forward to error handler
app.use((req, res, next) => {
  res.status(404);
  res.type('txt').send('Error 404 - Not Found');
  next(new Error('Not Found'));
});

// Start the app
app.listen(8081, () => {
  console.log('Listening on port 8081');
});

 
arrow functions や const、let などの新しいES6の構文の要素をどのようにこのコードが導入しているのかに着目しましょう。
 
NPMのためのコンフィグファイル作成します。
 
以下のコードを package.json という名前で保存します。

{
  "name": "api-demo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "NODE_ENV=development PORT=8081 nodemon ./api.js"
  }
}

2. ExpressとNodemonのインストール

Express（NodeのWebフレームワーク）とNodemon（変更があった際自動的にサーバーを再起動する技術）をインストールします。

npm install express nodemon --save-dev

3. サーバーの起動

開発用サーバーを起動するために、コマンドライン上で以下のコマンドを実行します。

npm start

 
http://127.0.0.1:8081 をブラウザで開きましょう。“Hello World” と表示されます。
http://127.0.0.1:8081/fruits を開くと、果物のリストが表示されます。
http://127.0.0.1:8081/abc を開くと、“Error 404 – Not Found”
と表示されます。このリンクのページが存在しないためです。
 
これでAPIが完成しました。
 

4. フロントエンドとAPIの接続

APIサーバーを起動したままにして、以前作成したフロントエンドのデモンストレーションプログラムを開きます。
このプログラムのディレクトリに移動し、その中に jQuery をインストールします。

npm install jquery --save-dev

 
そして、webpack.config.js ファイルを編集し、以下のコードを追加します。

  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]

 
その結果、ファイル全体は以下のようになります。

'use strict';

var webpack = require('webpack');

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  devServer: {
    contentBase: './',
    hot: true,
    inline: true,
    progress: true,
    stats: 'errors-only'
  },
  module: {
    loaders: [
      {
        test: /.(scss|sass)$/,
        loaders: ["style", "css", "sass"]
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
};

 
このファイルを保存しましょう。

entry.js ファイルを編集しましょう。ファイルの内容は以下のようになっているはずです。

require("./style.sass");

$.get("http://127.0.0.1:8081/fruits", function(data) {
  var list = '';

  $.each(data, function(key, value) {
    list += `<li>${key} : ${value}</li>`;
  });

  $("body").html(`<ul>${list}</ul>`);
});

 
ファイルを保存し、サーバーを起動します。

npm start

 
この時点で、APIとClient Appの両方のサーバーが起動しています。
 
そして、ブラウザで http://127.0.0.1:8080 を開きましょう。以下のように表示されるはずです。

• apples : 1
• bananas : 5
• oranges : 10