STEP5: REST API で Read

このステップでは、ブックマーク一覧取得APIの実装方法と、Meteorのクライアント側からブックマーク一覧取得APIを呼び出す方法について学びます。

5.1 REST API ブックマークリソース設計

ここからはブックマークリソース(bookmarks)の実装を行います。

ブックマークリソースのREST APIは以下の通りです。

5.2 ブックマーク一覧取得API実装

ブックマーク一覧を取得するAPIを実装してきましょう。

ソースコードを以下のように修正します。

imports/api/rest.js

import { Restivus } from 'meteor/nimble:restivus';
import Bookmarks from './bookmarks/bookmarks'; // 追加

const Api = new Restivus({ prettyJson: true,});

Api.addRoute('hello', {
  // ...省略
});

// GET /api/bookmarks
Api.addRoute('bookmarks', { 
  get: { 
    action: function() { 
      return { 
        status: 'success', 
        data: Bookmarks.find().fetch(), 
      }; 
    }, 
  },
});

export default Api;

ソースコードを保存したら、ターミナルで動作確認します。

$ curl http://localhost:3000/api/bookmarks

すると、以下のような結果が返ってきます。

{ 
  "status": "success", 
  "data": [ 
    { 
      "_id": "5AwNBRBPS4cArsCGB", 
      "url": "http://www.meteor.com/", 
      "title": "Meteor", 
      "createdAt": "2016-07-22T14:19:14.064Z" 
    }, 
    { 
      "_id": "osgRPH83T2bPoEQM8", 
      "url": "https://guide.meteor.com/", 
      "title": "Meteor Guide", 
      "createdAt": "2016-07-22T14:19:14.064Z" 
    }, 
    { 
      "_id": "BRw643GHnbL8Hsig9", 
      "url": "http://docs.meteor.com/", 
      "title": "Meteor API Docs", 
      "createdAt": "2016-07-22T14:19:14.064Z" 
    }, 
    { 
      "_id": "9wjwws85MGpdHEuzp", 
      "url": "https://forums.meteor.com/",
      "title": "Meteor Forums", 
      "createdAt": "2016-07-22T14:19:14.064Z" 
    }, 
    { 
      "_id": "jWnK9eZPRYb5jZfwN", 
      "url": "https://crater.io/", 
      "title": "Crater.io", 
      "createdAt": "2016-07-22T14:19:14.064Z" 
    } 
  ]
}

ブックマーク一覧が取得できました。

続いて、このAPIをMeteorのクライアント側から呼び出してみましょう。

HTTPクライアント機能を提供する http パッケージを追加します。

$ meteor add http

続いて、クライアント側でブックマーク一覧取得APIを呼び出すようにソースコードを書き換えます。

client/main.js

import { Template } from 'meteor/templating';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './main.html';

import Bookmarks from '../imports/api/bookmarks/bookmarks';

import { ReactiveVar } from 'meteor/reactive-var'; // 追加
import { HTTP } from 'meteor/http'; // 追加

// 追加
Template.Bookmarks.onCreated(function() {
  this.bookmarks = new ReactiveVar();

  // ブックマーク一覧取得
  HTTP.get('/api/bookmarks', (err, res) => { 
    if (err) { console.error(err); return; }
    this.bookmarks.set(res.data.data); 
  });
});

Template.Bookmarks.helpers({ 
  bookmarks: () => Template.instance().bookmarks.get(), // 変更
});

NOTE: HTTP.get() で指定したリソースに対してGETリクエストを実行します。

変更を保存したら、Webブラウザで http://localhost:3000/ にアクセスして動作を確認してみましょう。

Template.Bookmarks.onCreated()は、Bookmarksテンプレートが生成されたタイミングで呼び出されるメソッドです。その中で、ブックマーク一覧を取得し、MeteorのReactiveVarにセットすることで画面に反映させることができます。

ここまでのコード: https://github.com/j-hack/meteor-rest-app/tree/step5.2

5.3 ブックマーク一覧定期取得(ポーリング)

Meteorはデータベースの値を変更した際に、自動的にその変更を通知し、画面を書き換えるリアクティブ性が備わっています。

しかし、REST APIでリソースを取得している場合はそのリアクティブ性が失われ、自動で画面に反映されなくなってしまいます。

そのため、リソースの追加や変更がある度にブラウザを手動でリロードする必要があります。

このままだと開発効率があまりよろしくありません。

そこで定期的にAPIをポーリングすることで、擬似的にリアクティブ性を出すようにします。

ソースコードを以下のように修正します。

client/main.js

// ...省略

import Bookmarks from '../imports/api/bookmarks/bookmarks';
import { ReactiveVar } from 'meteor/reactive-var';
import { HTTP } from 'meteor/http';
import { Meteor } from 'meteor/meteor'; // 追加

Template.Bookmarks.onCreated(function() { 
  this.bookmarks = new ReactiveVar();

  const fetchBookmarks = () => { 
    // ブックマーク一覧取得 
    HTTP.get('/api/bookmarks', (err, res) => { 
      if (err) { console.error(err); return; }
      this.bookmarks.set(res.data.data); 
    }); 
  }; 
  fetchBookmarks();

  // 定期実行
  Meteor.setInterval(fetchBookmarks, 5000); 
});

// ... 省略

NOTE: Meteor.setInterval()は、JavaScriptのsetInterval()と同様の機能を持つメソッドです。

これで定期的に(上記の場合は5秒に1回)、ブックマーク一覧取得が行われるようになります。

ここまでのコード: https://github.com/j-hack/meteor-rest-app/tree/step5.3

5.4 ブックマークリソース取得(個別)

指定したIDのブックマークリソースを個別取得するAPI(GET /api/bookmarks/:id)を実装しましょう。

ソースコードを以下のように書き換えます。

imports/api/rest.js

// ...省略

// GET /api/bookmarks
Api.addRoute('bookmarks', { 
  // ...省略
});

// GET /api/bookmarks/:id
Api.addRoute('bookmarks/:id', { 
  get: { 
    action: function() { 
      const bookmarkId = this.urlParams.id; 
      return { 
        status: 'success', 
        data: Bookmarks.findOne(bookmarkId), 
      }; 
    }, 
  },
});

export default Api;

変更を保存したら、ターミナルで以下のコマンドを実行します。

$ curl http://localhost:3000/api/bookmarks/<ブックマークID>

<ブックマークID>は、各環境で異なるため、各自変更してください。

NOTE: ブックマークIDを確認するには、/api/bookmarks に対してGETリクエストを実行します。

$ curl http://localhost:3000/api/bookmarks

例えば、<ブックマークID>が「jWnK9eZPRYb5jZfwN」の場合は、以下のように実行します。

$ curl http://localhost:3000/api/bookmarks/jWnK9eZPRYb5jZfwN
{ 
  "status": "success", 
  "data": { 
    "_id": "jWnK9eZPRYb5jZfwN", 
    "url": "https://crater.io/", 
    "title": "Crater.io", 
    "createdAt": "2016-07-22T14:19:14.064Z" 
  }
}

ここまでのコード: https://github.com/j-hack/meteor-rest-app/tree/step5.4

レスポンスが確認できたら、次のステップに進みましょう。