=======
javascriptを学んでいるならば、サーバーサイドjavascript の学習を進めるとRESTapiを実装できるようになり、ajax関連のapiが面白くなってくる。
こんなことが簡単にできるのかと、正直驚いた。ぼくは独学だけで遊んでいるだけなので、そういう人にぜひ知っていただきたい。
このステップをはじめるまでに時間がかかりすぎたのが惜しい、まだ知らない人に向けて、新しい分野をどう学んだかをメモる。
サーバーjavascriptとか難しそうだし、難しそうだし忌避してるって人がいたら読んでもらいたい。
学習していけばいいと思うステップ
MongoDB
.
簡単なデータベースであり、javascriptを知ってるだけで遊べる。
この後、Node.js, Express, Backbone各々でフィードバックしていくのでざっくりやる。
(coffee.script)
.
以下のステップを、javascriptを誰かの教えを請わずにロジックを頭に入れていくならば効率がいい。
javascriptの4つのThis、クラスとコンストラクタと継承、デザインパターンの存在（このあとたくさんフィードバックある）、クロージャあたりはなんとなく知っている状態にしておく。
端末複数起動して、coffee -wc .coffee *..coffee でだいたいの開発がいける。
Node.js と npm
.
サーバーサイドjavascriptに入門する。
最初はconsole.log しかないのかと思う^^;
この先、超超超便利な npm の使い方を覚えていく。とりあえず、npm init, npm install -g -D, package.jsonについては知っておく。
require システムはmodule システム時代の基本を触れている。
本筋はサーバーのリクエストオブジェクトやレスポンスオブジェクトを操作するということだけ、これだけ押さえればおk。
意外と大事
.
require("util").inspect OBJECT
コンソールログの弱みをカバー
express
.
開発フレームワークといわれて、やる意味あんの？ってなるが、だまってdotinstallの動画をなぞる。やるとサーバーサイドが使いやすくなっているだけで、nodejsは踏み台でこれをやったほうが楽と分かる。
ちなみにexpress4になって以前の資料はそのままではほとんど動かない。まずexpress-generator, そしてmiddlewareは各自インストールしないと動かない。npmの便利具合に気付くころ。
expressを使うと、サーバーを動かすコードはだいたいテンプレ的でロジックの中身はあんまりないことが分かってきて、とっつきやすくなる。
いくつかアプリをなぞってみてからexpress-generatorを使って、npmを基本使える人間になれる。
npm を使えば、日本語記事が少ないmoduleも怖くない！
# mongoose
.
mongodbを扱えるnode module。を使ってデータを保存したり、書き換えしてみたりする。
いろんなモジュールを使ううちに、肥大化するロジックの分割の具合が分かってくる。この感覚が得られたのも貴重。RESTapiが作れていることに気付けば上出来。
npm関連の個人的に必須モジュール
coffeescript
-wcでgrantなんかいらないっす。コンパイル前のファイルを別場所におくとか、依存関係とか気にするのは後、とにかく使う。
js2coffee
git clone [URL] > を変換してみればこわくない。
supervisor
nodemonをはじめとするnode.appの自動更新を可能にする。
hbs
handlebarsテンプレート。<%%>のパーセント打つのが好きな人なんていないと思ってる。
使い方
app.set "view engine", "hbs"
hbs.registerPartials(__dirname + "/views/partials")
あとはres.renderに投げる。
ejsで学べるはずのメインテンプレート場所とは別に、パーシャルフォルダを指定すると テンプレート内に{{> FILENAME }}で他ファイルから読みこみができる。パーシャルからパーシャルも読めるので、HTMLビューのすべての部分をテンプレート部品にして構成するのも簡単。
pulldown
jquery, backbone, underscore, handlebarsなどなど一瞬で最新版をダウンロードしてとってきてくれる。
ChromeApp: RESTConsole
expressをすると、クライアントからのget, post, delete, putを受けることがよく分かってくる。
getはともかく他の命令をデバッグするために一々ビューロジック書いてられないよね。
これを使えばそこらへんのchrome上で簡単に作れる。
こいつの使い方は簡単に見えるが、「Content-Type: application/json」の指定を忘れない。
backbone.js
jQueryでもいい。なにがしたいかっていうと、上の基本知識で、jQueryのajax通信をやっと学ぶことができるからだ。とりあえず、jQueryから、get, postを受けてnode.appからjsonを返せるってことくらいはすぐ確認できる。
なるほど、サーバーとのやりとりってこんなに簡単だったのか！
しかしここで終わらない。はやりのフレームワークっていうのは、この通信とデータの結合が、本当の本当に１行でできたりするという。
backbone.jsはなにがすごいかって、サーバのRESTapiを提供するurlを与えることで、プログラム上で名前の指定をほとんどすることなく、サーバーとやりとりし、ビューにつながるデータをすべて得るとかいうメソッドがある。必要なのは相対パス、あとはcollection.fetch()、これだけでデータベースのデータが丸写しだというのだ。（テンプレートでレンダーされるからデータの中身が知らなくていい）
fetchみたいなメソッドが、いまどきのフレームワークだと当たり前というのは、この後気付くわけなのだが、ここまでしないと分からなかった、、なんと難しい世の中なのだ。
サーバーはともかく、BackboneのModel, Collection, Event, View, Template, Router の役割については何回かさわればわかるってものでもなさそうだ。Model > ModelView > Collection > CollectionView までの流れはテンプレートなので、ここまで迷うことなく書けるようになっていこうとしている最中。
ここでひとつBackboneのfetchメソッドを紹介する。
console で実行できる。
以下のプログラムで生成されたインスタンスのfetchメソッドには、URLを指定しているだけ。
URLはgetでroutingしてmongooseからcollectionをfindでJSONにしたものをsendするようにしておけばいい。
Book = Backbone.Model.extend
idAttribute: "_id"
BookCollection = Backbone.Collection.extend
model: Book
url: "/books"
collection = new BookCollection()
からの！！
collection.fetch()
通信とデータの格納がたったの１行！！！
console でコレクションに格納されていることが分かる。
JSON配列から順にすべてmodelになげるのでModelのコードはほんとにこれだけである。