Cape.JS 1.2

2015/08/31

前回から一月ほど経ってしまいました。記事を書いた時点では Cape.JS 1.2 をすぐにリリースできるだろうと考えていたのですが、実際に自分で使ったり同僚に使ってもらったりしてみるといろいろと仕様に「穴」があることに気付かされ、RC 版(リリース候補版)を出してから実に 16 回も(!)バージョンアップをすることになってしまいました。

さて、Cape.JS 1.2 で2つの新しいクラスが導入されました:

  • ResourceAgent
  • CollectionAgent

いずれも Ruby on Rails で言うところの「リソース」を扱うためのクラスです。詳しくは、次回以降で順次説明していきますが、このクラスを使うことにより REST API へのアクセスを行う JavaScript プログラムが従来よりも簡潔に書けるようになります。

今回は、これまでの連載で作ってきた「Todo リスト」アプリケーションの Cape.JS を 1.2 にアップグレードする手順を説明します。


まず、サーバー側(Rails 側)を更新します。テキストエディタで Gemfile を開き、gem 'rails' で始まる行を次のように書き換えます。

gem 'rails', '4.2.4'

また、最終行を次のように書き換えます。

gem 'sprockets-es6', '~> 0.7.0'

そして、ターミナルで次のコマンドを実行します。

$ bin/bundle update

実際には、これらの更新をしなくても Cape.JS 1.2 は利用できます。この機会を利用して、ついでにバージョンアップしておこう、という趣旨です。


続いて、フロント側(JavaScript 側)を更新します。テキストエディタで bower.json を開き、次のように書き換えてください。

{
  "name": "todo_list",
  "version": "0.1.0",
  "authors": [
    "Tsutomu Kuroda <t-kuroda@oiax.jp>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "vendor/assets/components",
    "test",
    "tests"
  ],
  "dependencies": {
    "capejs": "~1.2.0",
    "bootstrap": "=3.3.4",
    "es6-promise": "~3.0.2",
    "fetch": "~0.9.0",
    "fontawesome": "~4.4.0",
    "lodash": "~3.10.1"
  }
}

まず3行目の "versions": "0.0.0","versions": "0.1.0", に書き換えています。そして、"dependencies" セクションに項目を追加し、既存項目のバージョン番号を上げています。追加されたのは es6-promisefetch で、これらの役割については後述します。既存項目に関しては、capejs のバージョンを ~1.2.0 に上げ、fontawesomelodash もそれぞれバージョンアップしています。なお、bootstrap については、最新の 3.3.5 が Sprockets と相性が悪いので、=3.3.4 とバージョンを固定しています。

ターミナルで次のコマンドを実行します。

$ bower update

これで「Todo リスト」アプリケーションの Cape.JS が 1.2 にアップグレードされました。


bower.json"dependencies" セクションに追加された es6-promisefetch について、簡単に説明します。

es6-promise は、ECMAScript 6 の新機能 Promise のための「ポリフィル(polyfill)」です。

モダンブラウザ(通常は、最新版の Chrome や Firefox を指す)では提供されているけれど、他のブラウザ(Internet Explorer や Safari など)では使えない機能に対して、同等の機能を実現するための JavaScript ライブラリが存在する場合があります。それらを総称してポリフィルと呼びます。

Promise を利用すると JavaScript で非同期処理を記述しやすくなります。

他方、fetch は、Fetch API と呼ばれる別の新機能のポリフィルです。

Fetch API は、ネットワーク越しにリソースを取得するための新たなインターフェースです。従来の XMLHttpRequest に代わるものです。

jQuery は内部で XMLHttpRequest を利用して Ajax リクエストを行っています。Fetch API が使えれば、Ajax のために jQuery を利用しなくてもよいということになります。

Cape.JS 1.2 で導入された ResourceAgent クラスと CollectionAgent クラスは、内部でこの Fetch API を利用しています。そして fetch ポリフィルは Promise に依存しています。


次回からは、Cape.JS 1.2 の新機能を使って「Todo リスト」アプリケーションを書き換えていきます。