はじめに

このシリーズではFalcorを使うにあたって必要となるサーバーサイド側の実装を取り上げていきます。

Falcorの基本的な考え方やクライアント側の実装については以前のシリーズ*でも扱っているので、そちらも目を通しておくことをおすすめします。

サーバーサイドでやること

Falcorを使った場合、クライアント側ではPathやPathSet*と呼ばれるFalcor用のクエリを書いてデータの取得や更新、追加、その他の操作を行います。

const model = new falcor.Model({
  source: new falcor.HttpDataSource('/model.json')
});
model.get('hello').then(res => {
  console.log(res);
});

このとき、ブラウザのコンソール上では次のような結果になります。

{
  "json": {
    "hello": "hello!"
  }
}

このコードが実行されているとき、HTTP上では/model.jsonというURLのパスに対してpathsとmethodというパラメータを持ったHTTPのGETリクエストが送られています。

GET /model.json?paths=%5B%5B%22hello%22%5D%5D&method=get HTTP/1.1

それに対して返ってくるHTTPレスポンスは次のようになっています。サーバー側では上記のGETリクエストをハンドリングして、下記のようなレスポンスを返せるようにしなくてはなりません。

{"jsonGraph":{"hello":"hello!"}}

クライアント側のFalcorライブラリが生成するHTTPリクエストはとても複雑で、これをハンドリングして正しいJSONレスポンスを返せと言われても大変です。ただ、その実装については、サーバーサイド側でリクエストのパラメータをパースするライブラリなどもnpmで公開されているので、いくらかは仕事を楽にしてくれます。

そうしたライブラリを利用したサーバーサイド側の実装例をこのシリーズでは紹介していきたいと思っていますが、まずはサーバーサイド側の概要を見ていきましょう。

サーバーサイドに必要なもの

Netflixが公開している、サーバーサイドで利用するためのFalcor関連ライブラリは2種類あります。

• falcor-router：サーバーサイド側でのData Source*実装を支援するライブラリ

Netflix/falcor-router

• falcor-express：WebフレームワークであるExpressにFalcorのData Sourceを載せられるようにするミドルウェア

Netflix/falcor-express

この2つのライブラリは両方とも必須となるでしょう。falcor-routerは後述するfalcor-expressから受け取ったリクエストを元にして構築したデータを、最終的にExpressのレスポンスとして正しく送り返すため、まずはリクエストを繋いでくれたfalcor-expressへ手渡すためのインターフェイスを実装するために使います。

falcor-expressは、クライアント側で生成されるFalcor用のパラメータが付いたHTTPリクエストをパースしてfalcor-router側に渡した後、その処理結果を受け取り次第、Expressに戻してあげる役割を持っています。

このfalcor-expressと同じ役割で他のWebフレームワークに対応したものとして、hapi用のfalcor-hapiや、restify用のfalcor-restifyもあります。このシリーズではExpressを使うことを前提として進めていきます。

Expressのセットアップ

それでは、Express*のセットアップを進めていきましょう。本記事はFalcorのシリーズなので、Express自体については深くは触れません。Expressを動かすためのコードは必要最低限のものしか登場しませんが、考え方、仕組みなど、Expressについてある程度知っておくこともおすすめします。

サンプルリポジトリ

今回紹介する最終的なコードは以下より入手できます。

サンプルコードはNode.jsのバージョン4.4.5で動作を確認しています。また、ブラウザとそのバージョンはChrome 51、Firefox 47での動作を確認しています。

最低限のExpressサーバー

Falcor用のコードは何も入っていない、Expressのサーバーを立ち上げるだけのコードです。これをベースにしてfalcor-express、falcor-routerを繋いでいきます。

Expressの他にbody-parserも入っていますが、これはFalcorクライアントのリクエストパラメータを読み取るために必要となります。

'use strict';
const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static('./'));

const server = app.listen((process.env.PORT || 3000), (err) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(`app start, on port ${server.address().port} in ${app.get('env')} mode ${Date().toString()}`);
});

falcor-express

falcor-expressはExpressのmiddleware*として機能します。

次のようにmiddlewareをマウントするapp.useメソッドを使ってfalcor-expressをExpressにマウントします。このときに、falcor-expressの初期化も行う必要があります。そのためにはfalcorExpress.dataSourceRouteメソッドを呼び出します。

falcorExpress.dataSourceRouteメソッドは関数を引数として受け取ります。

その関数内でやらないといけないのは、クライアントからのリクエストに応えるインターフェースを持ったData Sourceをreturnすることです。こうすることで、ExpressとData Sourceはfalcor-express middlewareの助けによって繋がることができます。

その結果として、ExpressがFalcorクライアントに応答できるようになります（以下のサンプルコードではこの部分はまだTODOの扱いになっています）。

const falcorExpress = require('falcor-express');

// 中略

app.use(bodyParser.urlencoded({extended: true}));
app.use('/model.json', falcorExpress.dataSourceRoute((req, res) => {
  // TODO: FalcorRouterインスタンスを返す
}));
app.use(express.static('./'));

// 後略

falcor-router

次はfalcor-routerの準備です。一緒に簡単な読み取り用の値も返せるような実装もしてみましょう。

const FalcorRouter = require('falcor-router');

// 中略

app.use(bodyParser.urlencoded({extended: true}));
app.use('/model.json', falcorExpress.dataSourceRoute((req, res) => {
  return new FalcorRouter([
    {
      route: 'hello',
      get() {
        return {
          path: ['hello'],
          value: 'hello!'
        };
      }
    }
  ]);
}));
app.use(express.static('./'));

// 後略

ひとつ前のコード例で// TODOにしていた部分を書き換えました。return new FalcorRouter以下です。ここではFalcorRouterインスタンスを初期化してreturnしています。渡している引数はデータの在り処であるPathを示すrouteとそれに対するget、set、callいずれかのアクションを定義したオブジェクトの配列です。

上記のコードではhelloというキーの取得にのみ対応した処理をひとつだけ定義しています。これでクライアント側のmodel.get('hello')というリクエストに対応できるようになるわけです。

getメソッドの中では、最終的にpathとvalueを持ったオブジェクトを返す必要があります。

pathには返す値がJSON Graph内のどこに存在しているかを示したPathを渡します。helloというキーのリクエストに対応するので、ここはhelloになります。また、配列書式でのPathを渡すことが必須となっているので、**['entries', 0, 'title']のような階層指定がない場合でも必ず['hello']のような配列書式での指定をします**。

そしてvalueにはそのPathに存在する値を指定します。

完成したコード全体は次のようになっています。

• ソースコード：server.js

このrouteとアクションの定義をたくさん書いていくことによって、豊かなデータを提供するData Sourceを実装することができます。

Expressの動作確認

これで最低限の実装が終わりました。クライアント側から動作確認してみましょう。

先ほどhelloというPathのデータ取得に対応できるようにしたので、それをリクエストしてみます。

const model = new falcor.Model({
  source: new falcor.HttpDataSource('/model.json')
});

model.get('hello').then(res => {
  console.log(JSON.stringify(res, null, 2));
});

次のようなデータが返ってきたら成功です。

{
  "json": {
    "hello": "hello!"
  }
}

まとめ

今回はFalcorのサーバーサイド側実装の概要と、単純なPathのリクエストに対応する例を紹介しました。

Falcorのクライアントサイド側を扱っていたシリーズでも解説したように、Pathは実際にはmodel.get(['entries', 0, 'title'])のように任意のインデックス値を指定できたりもします。

そうしたPathへの対応も、次回紹介していきたいと思います。