Aurelia hack 04 ～APIを呼んでみる～

今回は Node.js で実装した API を呼んでみるところまでやってみましょう。

サーバサイド(API)の実装

Node.js で Web サーバを立てる際におなじみの express を使います。
まずは依存モジュールを追加インストールします。

サーバサイド用のモジュールを追加インストール

package.json(追記)

{
  ～省略～
  "dependencies": {
    "babel": "5.8.23",
    "body-parser": "^1.14.1",
    "express": "^4.13.3",
    "serve-static": "^1.10.0"
  }
}

babel の最新版は2015年12月現在 babel6 ですが、モジュールの構成が大きく変わっていて準備しずらいので今回は babel5 を使っています。

追加したモジュールをインストール

[you@server aurelia-skeleton-navigation]$ npm i

サーバサイドスクリプトを書く

何のおもしろみもないサンプルではありますが、GET パラメタ name を受け取って hello <name> を返すだけの API を一つ実装しました。

server.js(新規作成)

import express from "express"
import bodyParser from "body-parser"
import serveStatic from "serve-static"

let app = express();
let port = 3000;    // 待ち受けポート番号を変える場合はここを修正

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true}));
app.use(serveStatic('.'));

// API本体
app.get('/api/hello', (req, res) => {
    res.json({
        reply: `hello ${req.query.name}!`
    });
});

app.listen(port, () => {
    console.log("listening http on port " + port)
});

ES2015 の書式で書いたので、そのまま node server.js とコマンドをたたいても動きません。
babel-node コマンドを使ってもよいのですが、今回は require hook を使います。

server.babel.js(新規作成)

require('babel/register');
require('./server.js');

追加したやつ

aurelia-skeleton-navigation/
 ├─ ～省略～
 ├─ package.json (追記)
 ├─ server.js
 └─ server.babel.js

これを node で実行すれば起動します。

[you@server aurelia-skeleton-navigation]$ node server.babel.js

http://localhost:3000 にアクセスして確認してみましょう。

クライアントサイドでAPIを呼び出す

Aurelia の HTTP クライアントとして fetch-client というものが開発されています。ひな形では users.js で使われているのでなんとなく使い方はわかるのですが、まだ詳しい説明を見つけることができません。

とはいえ別に fetch-client を使わなければいけないということもありません。Aurelia の素晴らしいところは何も強制しないということです。jQuery の Ajax 機能を使っても怒られません。

SuperAgent

今回は jQuery ではなく、より軽量な Ajax クライアントである SuperAgent を使ってみましょう。
まずは jspm を使って SuperAgent をインストールします。

[you@server aurelia-skeleton-navigation]$ jspm install npm:superagent

src/welcome.js の submit メソッドを以下のように修正してみてください。

src/welcome.js

import superagent from 'superagent'

export class Welcome {
  heading = 'Welcome to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  submit() {
    this.previousValue = this.fullName;
    alert(`Welcome, ${this.fullName}!`);
    superagent.get('/api/hello')
        .query({ name: this.fullName })
        .end((err, res) {
            console.log(res.body.reply);
        });
  }

  ～省略～

}

gulp watch を実行していない場合は実行してから http://localhost:3000 にアクセスして確認してみましょう。
今回は自分でサーバを立ち上げているので gulp build でも大丈夫です。

次回は superagent をラップしつつキャッシュ機能を追加した ApiClient クラスを実装してみます。
同時に DI にサービスとして追加する方法も紹介します。