:::: MENU ::::

Backbone.MarionetteとRailsを使ってSingle Page Application(SPA)を構築する〜フロントエンドの開発環境整備 (Grunt/bower/Sass/Compass)〜


こんにちは、sovaのはき猫です。

sovaではITを使って今の世の中を良くするアプリケーションを作っていきたいと思っています。その第一弾として「クローズドな掲示板アプリ – CircleBoard –」をリリースしました!CircleBoardを使えば、今まで以上に友人や同僚など、周りの仲間との情報共有を活性化する事が出来ると思います。是非使ってみて下さい。

さて、前回の概要編はBackboneやMarionetteの紹介をしました。今回からは実際にBackbone.MarionetteとRuby on Railsを使ってSingle Page Applicationを作る方法についてご紹介します。まずは開発環境の整備です。

サンプルで構築するアプリケーション

構築するサンプルアプリケーションはとても簡単な自分だけのTwitterのようなアプリケーションを構築してみようと思います。イメージ的にはツイートを投稿すると画面遷移がなく、投稿欄につぶやきが投稿される、といった感じです。

marionette_sample

開発環境整備(フロント側)

開発を始める前に、まずは開発環境を整備します。フロント系で、もはやデファクトとなっているGruntとbowerを使えるようにします。Gruntはビルドなどの自動化ツールで、bowerはJavaScriptライブラリーのパッケージ管理ツールです。以下のページで詳細に解説されているので、気になった方は見てみて下さい。

どちらもnode.jsのパッケージ管理ツールであるnpmでインストールするので、node.jsをインストールして下さい。node.jsのインストール方法はnode.js 公式サイトに書いてある通りにすれば問題ありません。node.jsがインストール出来たら下記コマンドでGruntとbowerをインストールします。

サンプルで作成するアプリケーションはテンプレートエンジンにHandlebars.jsを使い、CSS拡張言語としてSassとSassのライブラリ集であるCompassを使います。BackboneやMarionetteでは色々なテンプレートエンジンを使う事が出来ますが、今回は性能面で有利なHandlebarsを使う事にしました。ありがたいことに、下記のブログにテンプレートエンジンのベンチ測定結果(2013年2月時点)がまとめられています。下記のページによると、プリコンパイル後で一番早いのはHandlebarsとのことです。Gruntを使えば保存する都度、Handlebarsのプリコンパイルが出来るので、Handlebarsに決定しました。

Sassも有名なツールなので、ご存知の方も多いかと思います。Sassについては以下のサイトで分かりやすく解説されているので、よくわからない方はご覧になってみて下さい。

Sass/Compassをインストール

SassはRubyで書かれているので、まずはRubyをインストールして下さい。Rubyのインストールは各環境で違うと思いますので、以下のページを参考にまずはRubyをインストールして下さい。

Rubyがインストール出来れば、あとはgemコマンドを使ってSassとCompassをインストールします。

npmでインストールするパッケージリスト

まずはnpmでインストールするパッケージリストを管理するpackage.jsonを書いていきます。package.jsonには主にGruntで使用する外部プラグインのパッケージが定義されています。パッケージ名を見れば何となく分かるかとは思いますが、各パッケージの詳細については各パッケージのgithubなどを参照して確認してみて下さい。(今回使っていないパッケージが若干混じってます…)
下記の設定でプロジェクトディレクトリ直下にpackage.jsonを作成して下さい。

作成後、下記コマンドを打って下さい。すると、各パッケージがnode_modeulesというディレクトリ配下にインストールされます。

bowerでインストールするパッケージリスト

次にbowerでインストールするJavaScriptやcssなどのライブラリーを定義しているbower.jsonを書いていきます。bower.jsonでもパッケージ名を見るとどのパッケージをインストールしているか分かると思いますが、ここでは主にMarionetteやHandlebarsやTwitter Bootstrapをインストールしています。バージョンは現時点での最新の安定版です。
こちらもプロジェクトディレクトリ直下にbower.jsonというファイル名で作成して下さい。

作成後、下記コマンドを打って下さい。すると、bower_componentsというディレクトリに上記で定義したファイルとそれに依存するファイルがダウンロードされます。

Gruntの設定

続いてタスクを自動化する為のGruntの設定ファイルを作っていきます。今回は以下のタスクを自動化してみたいと思います。Gruntでは下記以外にもJavaScriptやcssのミニファイ、CoffeeScriptのコンパイルなど、様々なタスクを自動化することが出来るので、何か手作業をしていたりする場合はいろいろと調べてタスクを自動化してみるといいでしょう。

  • Sassのコンパイル
  • Compass対応
  • Handlebarsのプリコンパイル
  • bower_componentsからプロジェクトのライブラリディレクトリへのコピー
  • ファイルを保存したらブラウザを更新する

最初にあげたリンク先の記事を読んでいれば理解出来ていると思いますが、Gruntでタスクを自動化するにはGruntfile.jsというファイルに自動化内容を定義します。上記5つのタスクを自動化するために、下記の定義をプロジェクトディレクトリ直下のGruntfile.jsに定義します。

これらの設定をしたあとに下記コマンドを打つと、Grunt Serverが起動して保存する度にGruntが動いてSassのコンパイルやHandlebarsのプリコンパイルを行ってくれます。

なお、ブラウザにGoogle Chromeを使っている場合はLiveReloadというChromeエクステンションをインストールして起動しておくと、ファイルを保存する度にブラウザがリロードされて、常に最新の状態を確認しながら作業を進めることが出来ます。かなり作業効率が上がるので、導入しておく事をオススメします。

まとめ

フロント側の開発環境整備が結構長くなってしまったので、ここで一旦まとめます。フロント側はGruntでかなりのタスクが自動化出来ます。もはや全て手で実施するなんて考えられません。最近は新しいタスク自動化ツールとしてGulpが出て来ているようですが、Gruntで全然困ってないので当面はGruntを使っていこうと思っています。次回はバックエンド側の開発環境整備から始めます。(と、書いていたのですがGulpが思いのほかよさそうなので、新しくプロジェクトを開始する人はGulpも検討してみる事をオススメします)


So, what do you think ?