Cycle.jsやってみる with webpack

# はじめに
webpackを使って[Cycle.js](http://cycle.js.org/)をサクッと試してみるまでの環境づくりです。

# 環境
- Mac OS X El Capitan
- Node.js v5.5.0

# ディレクトリ構成
ディレクトリ構成はこんな感じで作っていきます。

```bash
.
├── .babelrc
├── dist
│   └── bundle.js
├── package.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js
```

# ディレクトリ作成
適当なディレクトリを作って移動しておきましょう。

```bash
mkdir cycle.js
cd cycle.js
mkdir src dist
```

# webpackインストール
webpackコマンドを使えるようにwebpackをグローバルにインストールしておきます。

```bash
npm install -g webpack
```

# npmで諸々インストール
いろいろ必要になるのでnpmでインストールしていきます。

`package.json`を適当に作ります。

```bash
npm init
```

必要なものをインストールしていきます。

```bash
# cycle.js
npm install --save-dev rx @cycle/core @cycle/dom

# babel
npm install --save-dev babel-core babel-preset-es2015 babel-plugin-transform-react-jsx

# webpack
npm install --save-dev webpack babel-loader file-loader webpack-dev-server
```

今回はwebpack-dev-serverを使ってお手軽にライブリロードなサーバを立ち上げます。

# .babelrc
今回はES2015だったりJSXだったりを使えるようにBabelを使います。
なのでBabelの設定ファイルを作っておきます。

```json:.babelrc
{
  "presets": ["es2015"],
  "plugins": [
    ["transform-react-jsx", {"pragma": "hJSX"}]
  ]
}
```

# webpack.config.js
webpackの設定を作ります。

```js
module.exports = {
  context: __dirname + "/src",
  entry: {
    javascript: "./index.js",
    html: "./index.html"
  },
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  devtool: "inline-source-map",
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
      {test: /\.html$/, loader: "file?name=[name].[ext]"}
    ]
  }
}
```

# package.json修正
package.jsonを修正して`npm start`でサーバを起動するようにします。
`scripts`プロパティに`{"start": "webpack-dev-server"}`を追加します。

```json
{
  "name": "cycle.js_with_webpack",
  // ...

  "scripts": {
    "start": "webpack-dev-server"
  },

  // ...
  "devDependencies": {
    "@cycle/core": "^6.0.0",
    "@cycle/dom": "^9.0.2",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-plugin-transform-react-jsx": "^6.4.0",
    "babel-preset-es2015": "^6.3.13",
    "file-loader": "^0.8.5",
    "rx": "^4.0.7",
    "webpack": "^1.12.12",
    "webpack-dev-server": "^1.14.1"
  }
}
```

# index.html作成
`index.html`を作ります。

```html:src/index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Cycle.js Demo</title>
</head>
<body>
  <header>
    <h1>Cycle.js Demo</h1>
  </header>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>
```

# index.js作成
実際にCycle.jsを使ってごにょごにょするやつです。

```js:src/index.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)
```

内容は公式の[Getting Started](http://cycle.js.org/getting-started.html)のものです。

# うごかす
ここまでできたらもう動く状態になっています。
次のコマンドでサーバが起動します。

```bash
npm start
```

http://localhost:8080/webpack-dev-server/

にアクセスすればこんな感じでCheckboxをいじいじできるかと思います。

<img width="301" alt="スクリーンショット 2016-02-02 19.42.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/43208/100d7adb-b4a1-a543-efbe-f3c5a04da28e.png">

# おわりに
うまくいってればライブリロードも有効になってます！
Cycle.js触ってみようと思ってついでにwebpack使ってみたんですがイイですね！:sparkles: