Knockout.js × CoffeeScript × SASS の開発環境を手軽にイマドキっぽくつくる


# はじめに

Knockout.js の学習/検証用の環境を、手元のローカル Mac に構築したのでメモ。Viewの操作ぐらいなら、Knockout.js は軽量だし手軽なので。

大まかな方法としては、Yeoman 公式の `webapp` ジェネレータを元に、Bower で Knockout.js をインストールしました。スクリプトは CoffeeScript で書くのが楽なので、それも導入しました。

# 前提

- OS： `Mac OS X 10.9.4 (Mavericks)`
- Yeoman、Grunt、Bower を使います。もしまだインストールしていない場合、前に書いたこちらの投稿でも参考にしてください。
	- [APIサーバを Rails、フロントエンドを AngularJS で開発する [その②]](http://qiita.com/hkusu/items/9b34c83cc055ac21307f)

# 構築手順

Yeoman 公式の [webapp](https://github.com/yeoman/generator-webapp) ジェネレータを使います。Knockout.js に限らず、ほかの JavaScript ライブラリを試す場合でも、このジェネレータを使うと Grunt/Bower の環境が最初から揃うので楽です。
（商用向けなど本格的に使うなら、ある程度、知識が必要となり、またやりにくい部分も出てくるかと思いますが。）

- ジェネレータをインストール。

	```shell:
	$ npm install -g generator-webapp
	```

- ジェネレータを起動。この際、`--coffee` をつけます。

	```shell:
	$ yo webapp --coffee
	```

- CSS は SASS を使いたいので選択します。Bootstrap はもし必要あれば。

	![スクリーンショット 2014-08-27 15.33.03.png](https://qiita-image-store.s3.amazonaws.com/0/35733/c9696faf-5a3c-b177-162f-4d21af1de5e7.png "スクリーンショット 2014-08-27 15.33.03.png")

- よく分からないですが、適当に y を入力。（これ何だろう？）

	![スクリーンショット 2014-08-27 15.33.58.png](https://qiita-image-store.s3.amazonaws.com/0/35733/70b3bd30-0759-872f-90c9-383e15675148.png "スクリーンショット 2014-08-27 15.33.58.png")

- 雛型ができたら、次は Bower で Knockout.js をインストール。

	```shell:
	$ bower install knockoutjs --save
	```

	- 結果の `bower.json` は次のとおり。

		```javascript:bower.json
		{
		  "name": "knockout-js-learning",
		  "private": true,
		  "dependencies": {
		    "bootstrap-sass-official": "~3.1.0",
		    "jquery": "~1.11.0",
		    "knockoutjs": "~3.2.0"
		  },
		  "devDependencies": {}
		}
		```

		jQuery は元から入ってたみたい。

- 次のコマンドを打つと、`index.html` が自動で編集され、Knockout.js を読む込むようになります。

	```shell:
	$ grunt bowerInstall
	```

	- 結果の `index.html` は次のとおり。

		```html:app/index.html
		<!-- build:js scripts/vendor.js -->
		<!-- bower:js -->
		<script src="../bower_components/jquery/dist/jquery.js"></script>
		<script src="../bower_components/knockoutjs/dist/knockout.js"></script>
		<!-- endbower -->
		<!-- endbuild -->
		```

- いったん、ここらで動作確認してみます。

	```shell:
	$ grunt serve
	```

	![スクリーンショット 2014-08-27 15.39.20.png](https://qiita-image-store.s3.amazonaws.com/0/35733/94a9bbf1-a34b-23e7-591b-fab3edba7437.png "スクリーンショット 2014-08-27 15.39.20.png")

# Knockout.js を動かしてみる

といっても初心者なのですが、ネットとかを参考に、適当に書いてみます。

### ViewModel を作成

CoffeeScript で書く場合は、class を利用した書き方がシャレオツっぽい。
`ko.observable` で、データバインドできます。

```coffeescript:app/scripts/main.coffee
class TestViewModel
  constructor: (first, last) ->
    @firstName = ko.observable(first)
    @lastName =  ko.observable(last)
    @fullName = ko.computed =>
      @lastName() + " " + @firstName()

$ ->
  ko.applyBindings(new TestViewModel("太郎", "山田"))
```

### View を作成

```html:app/index.html
〜
<div class="container">
    <p>姓：<input data-bind="value: lastName, valueUpdate: 'afterkeydown'"></p>
    <p>名：<input data-bind="value: firstName, valueUpdate: 'afterkeydown'"></p>
    <h4>フルネームは <span data-bind="text: fullName"> </span></h4>
</div>
〜
```

### 確認

データバインドできた^^

![スクリーンショット 2014-08-27 22.01.58.png](https://qiita-image-store.s3.amazonaws.com/0/35733/c3f2b4c0-b424-ebc5-3cb3-5bb9a72dd4ba.png "スクリーンショット 2014-08-27 22.01.58.png")

# ほか

- リリース用にビルドする場合は、`$ grunt build` とします。
- もし Rails へ Knockout.js を導入する場合は、次のとおり。gem でいれます。
	- [Rails 4 で Knockout.js を利用する手順](http://qiita.com/hkusu/items/9227a266ae687a3892c2)