このチュートリアルでは、どのように初歩的なAPIを作成するのか、APIをフロントエンドと接続するのかを学びます。
今回のタスクで使用するツールと技術は以下の通りです。
- パッケージマネージャー（NPM）
- NodeのWebフレームワーク（Express）
- NextGen JS構文（ECMA Script6）
1. プロジェクトの設定
ホームディレクトリに移動しましょう。
|
1 |
cd ~ |
今回のタスクで使用する新しいディレクトリを作成しましょう。
|
1 2 |
mkdir api-demo cd api-demo |
以下のコードを api.js という名前で保存しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
'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 という名前で保存します。
|
1 2 3 4 5 6 7 8 |
{ "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（変更があった際自動的にサーバーを再起動する技術）をインストールします。
|
1 |
npm install express nodemon --save-dev |
3. サーバーの起動
開発用サーバーを起動するために、コマンドライン上で以下のコマンドを実行します。
|
1 |
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 をインストールします。
|
1 |
npm install jquery --save-dev |
そして、webpack.config.js ファイルを編集し、以下のコードを追加します。
|
1 2 3 4 5 6 |
plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ] |
その結果、ファイル全体は以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
'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 ファイルを編集しましょう。ファイルの内容は以下のようになっているはずです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
require("./style.sass"); $.get("http://127.0.0.1:8081/fruits", function(data) { var list = ''; $.each(data, function(key, value) { list += `</pre> <ul> <li>${key} : {value}</li> </ul> `; }); $("body").html(` <ul>${list}</ul> <pre class="">`); }); |
ファイルを保存し、サーバーを起動します。
|
1 |
npm start |
この時点で、APIとClient Appの両方のサーバーが起動しています。
そして、ブラウザで http://127.0.0.1:8080 を開きましょう。以下のように表示されるはずです。
- apples : 1
- bananas : 5
- oranges : 10
