Cycle.js を始める


Cycle.js の [GETTING STARTED](http://cycle.js.org/getting-started.html) の翻訳です。原文のライセンスは MIT です。

npm
---

Cycle.js のパッケージをダウンロードするため、[CommonJS](http://wiki.commonjs.org/wiki/CommonJS) の仕様にしたがう [npm](http://npmjs.org/) を通じて推奨チャンネルを利用します。新しいディレクトリをつくり、そのディレクトリ内部で次のコマンドを実行します。


```js
npm install rx @cycle/core @cycle/dom
```

これによって、RxJS、Cycle Core、と Cycle DOM がインストールされます。RxJS と Core は Cycle.js を動かすために必要な最小限の API です。Core に含まれる関数は `run()` ただ1つで、Cycle DOM は DOM とのインターフェイスを提供する標準の DOM ドライバーです。 **RxJS は Cycle Core の peer dependency です**。

@org/package 型のパッケージは npm の[スコープつきのパッケージ](https://docs.npmjs.com/getting-started/scoped-packages)で、npm のバージョン 2.11 かそれ以降のバージョンでサポートされます。`npm --version` で npm のバージョンを確認し、Cycle.js をインストールするためにアップグレードしてください。

Web アプリケーションの DOM インターフェイスを扱わない場合、インストールの際に `@cycle/dom` を省略できます。

最初の段階
----------

トランスパイラー ([Babel](http://babeljs.io/)) を通じて、ES6 (ES2015) を組み合わせるために [browserify](http://browserify.org/) もしくは [webpack](http://webpack.github.io/) などのバンドルツールを使うことをおすすめします。このドキュメントの大半のコードの例は ES6 の基本的な知識に慣れ親しんでいることを前提とします。ビルドシステムがセットアップされたら、JavaScript ソースファイルを次のように書きます。

```js
import Cycle from '@cycle/core';
import CycleDOM from '@cycle/dom';

// ...
```


第一行でインポートされた Cycle オブジェクトは1つの重要な関数、`run(main, drivers)` を含んでいます。`main` はアプリケーション全体のエントリポイントで、`drivers` は何らかの名前でラベルづけされたドライバー関数のレコードです。

**main 関数とドライバーレコードをつくります:**

```js
import Cycle from '@cycle/core';
import CycleDOM from '@cycle/dom';

function main() {
  // ...
}

const drivers = {
  DOM: CycleDOM.makeDOMDriver('#app')
};

Cycle.run(main, drivers);
```

Cycle DOM からの `makeDOMDriver(container)` は DOM とやりとりするドライバー関数を返します。この関数は上記のドライバーオブジェクトの DOM キーのもとで登録されます。

**main から DOM ドライバーにメッセージを送信する:**

```js
import Rx from 'rx';
import Cycle from '@cycle/core';
import CycleDOM from '@cycle/dom';

function main() {
  return {
    DOM: Rx.Observable.interval(1000)
      .map(i => CycleDOM.h(
        'h1', '' + i + ' seconds elapsed'
      ))
  };
}

const drivers = {
  DOM: CycleDOM.makeDOMDriver('#app')
};

Cycle.run(main, drivers);
```

`main()` 関数にいくつかのコードを記入しました。DOM という名前のもとで定義される RxJS Observable をもつオブジェクトを返します。このことは `main()` が Observable をメッセージとして DOM ドライバーに送信することを示します。Observable は Virtual DOM の要素を排出します。この要素は1秒ごとに経過秒数の `${i}` を表示します。`${i}` は 0、1、2、などに置き換わります。

**DOM から main へのメッセージをキャッチする。その逆も可能:**

```js
import Cycle from '@cycle/core';
import {makeDOMDriver, h} from '@cycle/dom';

function main(drivers) {
  return {
    DOM: drivers.DOM.select('input').events('click')
      .map(ev => ev.target.checked)
      .startWith(false)
      .map(toggled =>
        h('div', [
          h('input', {type: 'checkbox'}), 'Toggle me',
          h('p', toggled ? 'ON' : 'off')
        ])
      )
  };
}

const drivers = {
  DOM: makeDOMDriver('#app')
};

Cycle.run(main, drivers);
```

`main()` 関数はドライバーを入力にとるようになっています。`main()` が生成する出力と同じように、入力ドライバーは同じ構造、DOM をプロパティにもつオブジェクトにしたがいします。`drivers.DOM` は問い合わせ可能な Observable のコレクションです。セレクターで指定された要素で起きる eventType DOM イベントを得るには `drivers.DOM.select(selector).events(eventType)` を使います。この `main()` 関数は入力要素で起きるクリックの Observable を引数にとり、トグル可能なチェックボックスを表示する Virtual DOM 要素とそれらのトグルイベントを一対一で対応させます。

仮想 DOM をつくるために `h()` ヘルパー関数を使いましたが、Babel で JSX を使うこともできます。次の手順は Babel で開発している場合にかぎられます: (1) [babel-plugin-transform-react-jsx](http://babeljs.io/docs/plugins/transform-react-jsx/ ) パッケージをインストールし、次の例で示すように jsx に対するプラグマを指定します: (2) hJSX を import {hJSX} from '@cycle/dom' でインポートし; `h()` の代わりに JSX を活用します:

```js
{
  "plugins": [
    ["transform-react-jsx", { "pragma": "hJSX" }]
  ]
}
```

```js
import Cycle from '@cycle/core';
import {makeDOMDriver, hJSX} from '@cycle/dom';

function main(drivers) {
  return {
    DOM: drivers.DOM.select('input').events('click')
      .map(ev => ev.target.checked)
      .startWith(false)
      .map(toggled =>
        <div>
          <input type="checkbox" /> Toggle me
          <p>{toggled ? 'ON' : 'off'}</p>
        </div>
      )
  };
}

const drivers = {
  DOM: makeDOMDriver('#app')
};

Cycle.run(main, drivers);
```

この例は Cycle.js でよくある共通の問題解決のパターンを描きます。つまり、Observable の関数としてのコンピューターのふるまいを定式化します。ドライバーのイベントを継続的にリスニングし、メッセージ (この場合、Virtual DOM 要素) をドライバーに継続的に提供します。このパターンに慣れるために次の章をご覧ください。

スクリプトとしての Cycle.js
------------------------

Cycle.js を単独の JavaScript ファイルとして必要になることがごくまれにあり、その場合、GitHub の[リリースページ](https://github.com/cyclejs/cycle-core/releases)でダウンロードします。

 * 最新の [Cycle Core](https://github.com/cyclejs/cycle-core/releases) をダウンロードする
 * 最新の [Cycle DOM](https://github.com/cyclejs/cycle-dom/releases) をダウンロードする