Cape.JS 1.2

前回から一月ほど経ってしまいました。記事を書いた時点では 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

---

続いて、フロント側（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-promise と fetch で、これらの役割については後述します。既存項目に関しては、capejs のバージョンを ~1.2.0 に上げ、fontawesome と lodash もそれぞれバージョンアップしています。なお、bootstrap については、最新の 3.3.5 が Sprockets と相性が悪いので、=3.3.4 とバージョンを固定しています。

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

$ bower update

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

---

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

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

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

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

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

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

---

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