サーバーサイド実装の概要Falcorを使うにあたって必要となるサーバーサイド側の実装を解説します。サーバーサイド実装のあらましを、単純なPathのリクエスト応える実装を行いながら確認しましょう。順久フロントエンド・エンジニア次回このシリーズの記事一覧をみる目次サーバーサイドでやることサーバーサイドに必要なものExpressのセットアップExpressの動作確認まとめこのシリーズではFalcorを使うにあたって必要となるサーバーサイド側の実装を取り上げていきます。Falcorの基本的な考え方やクライアント側の実装については以前のシリーズ*でも扱っているので、そちらも目を通しておくことをおすすめします。*注:Falcorのクライアントサイドの実装がわかるシリーズ「Falcorで実現する効率的なfetch」シリーズサーバーサイドでやることFalcorを使った場合、クライアント側ではPathやPathSet*と呼ばれるFalcor用のクエリを書いてデータの取得や更新、追加、その他の操作を行います。*注:PathやPathSetPath、PathSetについては過去の記事でも紹介しています。console.log(res);});このとき、ブラウザのコンソール上では次のような結果になります。}}このコードが実行されているとき、HTTP上では/model.jsonというURLのパスに対してpathsとmethodというパラメータを持ったHTTPのGETリクエストが送られています。HTTP/1.1それに対して返ってくるHTTPレスポンスは次のようになっています。サーバー側では上記のGETリクエストをハンドリングして、下記のようなレスポンスを返せるようにしなくてはなりません。実際に返ってくるレスポンス{"jsonGraph":{"hello":"hello!"}}クライアント側のFalcorライブラリが生成するHTTPリクエストはとても複雑で、これをハンドリングして正しいJSONレスポンスを返せと言われても大変です。その実装については、サーバーサイド側でリクエストのパラメータをパースするライブラリなどもnpmで公開されているので、いくらかは仕事を楽にしてくれます。したライブラリを利用したサーバーサイド側の実装例をこのシリーズでは紹介していきたいと思っていますが、まずはサーバーサイド側の概要を見ていきましょう。サーバーサイドに必要なものNetflixが公開している、サーバーサイドで利用するためのFalcor関連ライブラリは2種類あります。Graph)を返す役割を持ちます。過去の記事でも紹介をしています。Sourceの実装部分で、それとExpressを繋いでくれるのが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を使うことを前提として進めていきます。コラム:Node.jsは必須か?いまのところ、こうしたライブラリはnpmで公開されており、Falcorのサーバーサイド側実装を行うためにはNode.jsを選択したほうがよいということになります。これは、必ずしもサーバーサイドのすべてをNode.jsで実装すべきということを意味するものではありません。APIが実装済みであるのなら、これをそのまま利用して、既存のサーバーサイドとクライアントサイドの間にFalcorサーバーを配置するという方法もあります。この場合、Falcorサーバーはフロントエンドのためのバックエンドとして働きます。クライアント側では、Falcorサーバーへのリクエストを行い、Falcorサーバーはまた別のAPIへリクエストを行ってデータを返します。Expressのセットアップそれでは、Express*のセットアップを進めていきましょう。本記事はFalcorのシリーズなので、Express自体については深くは触れません。Expressを動かすためのコードは必要最低限のものしか登場しませんが、考え方、仕組みなど、Expressについてある程度知っておくこともおすすめします。*注:ExpressExpressは過去のCodeGrid記事でも紹介をしていますので、参考にしてください。expressでサーバー作成サンプルリポジトリ今回紹介する最終的なコードは以下より入手できます。サンプルリポジトリcodegrid/2016-falcor-server-sideサンプルコードはNode.jsのバージョン4.4.5で動作を確認しています。47での動作を確認しています。最低限のExpressサーバーFalcor用のコードは何も入っていない、Expressのサーバーを立ち上げるだけのコードです。これをベースにしてfalcor-express、falcor-routerを繋いでいきます。Expressの他にbody-parserも入っていますが、これはFalcorクライアントのリクエストパラメータを読み取るために必要となります。${Date().toString()}`);});falcor-expressfalcor-expressはExpressのmiddleware*として機能します。*注:middlewareここでいうmiddlewareとは、リクエストに対する処理をプラグインのように追加できるExpressの機能です。npmでいろいろなmiddlewareが公開されており、falcor-expressもそうしたmiddlewareのうちのひとつです。次のようにmiddlewareをマウントするapp.useメソッドを使ってfalcor-expressをExpressにマウントします。このときに、falcor-expressの初期化も行う必要があります。そのためにはfalcorExpress.dataSourceRouteメソッドを呼び出します。falcorExpress.dataSourceRouteメソッドは関数を引数として受け取ります。Sourceをreturnすることです。middlewareの助けによって繋がることができます。その結果として、ExpressがFalcorクライアントに応答できるようになります(以下のサンプルコードではこの部分はまだTODOの扱いになっています)。後略falcor-router次はfalcor-routerの準備です。一緒に簡単な読み取り用の値も返せるような実装もしてみましょう。TODOにしていた部分を書き換えました。FalcorRouter以下です。ここではFalcorRouterインスタンスを初期化してreturnしています。渡している引数はデータの在り処であるPathを示すrouteとそれに対するget、set、callいずれかのアクションを定義したオブジェクトの配列です。上記のコードではhelloというキーの取得にのみ対応した処理をひとつだけ定義しています。これでクライアント側のmodel.get('hello')というリクエストに対応できるようになるわけです。getメソッドの中では、最終的にpathとvalueを持ったオブジェクトを返す必要があります。Graph内のどこに存在しているかを示したPathを渡します。helloというキーのリクエストに対応するので、ここはhelloになります。'title']のような階層指定がない場合でも必ず['hello']のような配列書式での指定をします。valueにはそのPathに存在する値を指定します。完成したコード全体は次のようになっています。Sourceを実装することができます。Expressの動作確認これで最低限の実装が終わりました。クライアント側から動作確認してみましょう。先ほどhelloというPathのデータ取得に対応できるようにしたので、それをリクエストしてみます。2));});次のようなデータが返ってきたら成功です。}}まとめ今回はFalcorのサーバーサイド側実装の概要と、単純なPathのリクエストに対応する例を紹介しました。'title'])のように任意のインデックス値を指定できたりもします。したPathへの対応も、次回紹介していきたいと思います。順久フロントエンド・エンジニアHTML・CSSのコーディング、後にJavaScriptの設計や実装を主業務として経験を積む。キャンペーンサイトやコーポレートサイトの、動きと操作性に工夫を凝らしたUI実装を多く手がけている。複雑なWebアプリケーション実装における、コンポーネント的な考え方を念頭においたJSの設計を得意とする。著書に『JavaScriptエンジニア養成読本』(共著:技術評論社、2014年12月11日)がある。特定商取引法に基づく。