Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

今回は 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 にサービスとして追加する方法も紹介します。

sukobuto
MVVM のおかげで生きてます。 WPF,Silverlight -> knockout.js -> Aurelia.js -> Xamarin knockout.js のドキュメント翻訳しました。→ http://kojs.sukobuto.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away