Javascript MVC フレームワーク Spine を使ってみる

javascript MVC フレームワークを初めてやってみるにあたって、MVC なぞ Rails でもう十分やっとるわい、というスタンスで取り組んだらまんまとハマったので復習もかねてメモ。

最初は backborn.js に取り組んでみようかと思ったのですが、いまいちピンとこず挫折。

CoffeeScript な Spine は少し寄りがたかったのですが、javascript の記法が面倒に感じたことと、やってみると意外と(CoffeeScriptが)難しくなかったこと、そしてなんとなく Rails っぽく開発できそうなことなどを理由に Spine でやってみることにしました。

こちらの本にも、coffeescript ではありませんが、Spine について書いてありました。

まだ理解が進んでませんが、MVC フレームワークを使うのに深い知識を得られる(そうな)良書です。

nvm 導入

環境の導入から始めます。nvm は Ruby の rvm みたいなものです。

既にほかの方法で node.js がインストール済みな人はスキップしてください。

バージョンは v0.8.7 を使うつもりなので、あまりバージョンが違わない方が良いかもしれませんので適宜インストールしてください。

インストールは至って簡単。README に従います。

git clone git://github.com/creationix/nvm.git ~/nvm

ホームに .nvm でクローンされます。嫌な人は適宜パスを変えましょう。

. ~/nvm/nvm.sh

nvm コマンドを打つのに nvm.sh を読み込む必要があるので、.bash_profile などに追記してください。

nvm と打って、Usage とかがでればおkです。

node.js インストール

では node.js をインストールします。

nvm install v0.8.7

あとはコンパイルが終わるのを待つだけです。

バージョンを指定すればほかのバージョンもインストールできますが、rvm や rbenv のようにインストール可能なバージョンリストは出してくれないようなので、http://nodejs.org/dist/ で指定できるバージョンを確認してください。

コンパイルが終わったら、node –version で確認できます。

デフォルトで使いたいので、以下のコマンドで v0.8.7 をデフォルトに指定します。

nvm alias default 0.8.7

切り替えたい場合は

nvm use 0.8.7

の用にバージョンを指定します

Rubygems のような npm というのが一緒に導入されているので、パッケージ管理については特にインストールの必要はありません。

spine.app と hem のインストール

npm install -g spine.app hem

spine.app は spine アプリケーションをジェネレートしてくれるコマンドで、rails のようなものだと思ってください。

hem はローカルサーバを立ち上げるのに使います。

-g オプションはグローバルオプションとして働き、現在の node.js の格納ディレクトリにインストールされます。

gem install をしたようなものだと思ってください。

オプションが無い場合は、実行時ディレクトリに node_modules が作られ、そこにインストールされます。

こっちは bundle install でパスを指定したような感じでしょうか。

インストールされているパッケージの確認は

npm -g list

で可能です。-g が無い場合はカレントの node_modules について調べます。

アプリケーションをジェネレート

rails new hoe_app するような感じで以下のコマンドで新しいアプリケーションを生成します。

spine app hoe_app

Rails っぽくいろんなファイルが生成されました。hoe_app に移動しましょう。

依存パッケージのインストール

bundle install するようなイメージで以下のコマンドで、依存パッケージを導入します。

npm install .

Spine アプリケーションが必要とするパッケージが node_modules に導入されます。

vendor/bundle に gem をインストールするようなものですね。

Gemfile にあたるのが package.json です。

覗いてみるとパッケージの宣言っぽいのが書いてあります。

サーバ立ち上げ

まだ生成しただけですが、 rails server のようにサーバを立ち上げてアプリにアクセスできます。

hem server

http://localhost:9294/ にアクセスすると Welcome to Spine! と表示されました。一応動いてるっぽいですね。

ちなみに表示される画面は public/index.html に記述されている http://maccman-spine.herokuapp.com/start.js が読み込まれて実行されているようです。

ログ出力

Getting Start の最後の方にちょっとだけソースコードの書き換えが書いてあるのでやってみましょう。

ブラウザのコンソールにログを出力する方法です。

app/index.coffee を開いて、super の下に @log(“Initialized!”) と書いてみましょう。

class App extends Spine.Controller
  constructor: ->
    super
    @log("Initialized")

module.exports = App

コードの仕組みはまだよくわかりませんが、ぼんやりとクラスのコンストラクタが動いたときにログを出力することが分かります。

書き換えて保存したら、hem build を実行してください。(原文にはリロードすればおk、と書いてあったが動作しなかったのでビルドしなおしてみました。)

hem build はその名の通り、CoffeeScript を実行可能な Spine アプリケーションにコンパイルしてくれるようです。

サーバを立ち上げ直してアクセスしてください。リロード直後にブラウザのコンソールにログが出力されるのが確認できます。

ここまでの感じ、Rails っぽかったんじゃないでしょうか?

CoffeeScript も Ruby っぽくかける部分があったりして RoR を触ったことのある人には取り組みやすそうなフレームワークだと思いました。

(他に backborn.js と AngularJS くらいしか触ってませんけど)

とりあえず次は todo アプリの写経&コードリーディングをします。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする