フロントエンドアプリケーションを開発するためには、構築するためのワークフローが存在します。あまりメジャーではありませんが手順を踏んで作業したいと、どんなにすばらしいJavaScriptフレームワークを使ったとしても最終的には不味いスパゲティの出来上がりです。
現在のフロントエンドアプリケーションの開発は、従来のWebアプリケーション（JSPやJSTLで構築されていたもの）より作業が複雑でかつ量も多く、そして難易度が数倍、数十倍困難に成っています。ですから業務系Webアプリケーションではウォーターフォール的な正しい手順で奇麗に作成することをお勧めします。開発の流れは下記の通りです。
- デザインフェーズ - 利用者とデザインおよび画面設計を行う
- モックアップ・フェーズ - HTMLのコンポーネント化を行う
- 機能設計・開発フェーズ - スタブを使ってアプリケーション開発を行う
- APIサーバ結合フェーズ - APIサーバとの結合を行う
デザインフェーズ
このフェーズでは実際の利用者とデザイナーが進めます。目的は
- どのような色合いにするか
- フォントサイズはどうするか
- １画面に定義する入力フィールドとかのアイテムはどの程度か
定義した結果はデザインカンプに仕上げます。実際にHTMLを作成しますが、Yeomanのgenerator-backboneを使ってプロジェクトを作成し開発します。backboneテンプレートを使いますがデザインフェーズで出来上がるものはHTMLとCSS(Sass+compass)のみです。実質的にはbackboneは使いません。具体的な例は
app +styles | +main.scss +index.html +home.html +contact.html +help.html
モックアップ・フェーズ
モックアップを開発するためには画面遷移するのが良いです。実際の動きを付け利用者との使い勝手を整理します。Yeomanを使ったbackboneテンプレートでは
- router
- view(およびtemplate)
を作成します。はじめにindex.htmlを使ってコンテンツのフレームを作成します。デザインフェーズでフレームの定義はできてますので簡単に作成できます。
yoコマンドを使ってrouterとviewおよびtemplateを作成します。作成したtemplateにデザインフェーズで作成したコンテンツ部分を書き出します。routerではviewの定義とviewのレンダリングを行います。
$ yo backbone:router main --coffee $ yo backbone:view home --coffee $ yo backbone:view contact --coffee $ yo backbone:view help --coffee
このフェーズでJavaScriptを組むための大枠は定義します。window.変数のような定義をさけるためにwindow.システム名.viewsなどがあたります。どういう構造にするかがここで決まりますので重要なフェーズです。
機能設計・開発フェーズ
このフェーズではJavaScriptで行うビジネスロジックを実装します。必要となるのは
- model
- collection
- templateをさらにコンポーネント化
モックアップフェーズでは一覧表の部分などのtemplateはまだHTMLに直接記載されているためこの部分を切り出します。modelやcollectionも利用しているためAjaxで必要となるurlの定義も行います。通信も発生することから、このフェーズからeasymockやstubbyが利用されます。
$ yo backbone:model hoge --coffee $ yo backbone:collection fuga --coffee
yeomanによるeasymock、stubbyの利用については「Single-page Application(SPA)でeasymock or stubbyを使ってJSON簡単開発」を参照して頂けたらと思います。
APIサーバ結合フェーズ
フロントアプリケーションの実装がほぼ完結したのでAPIサーバと結合します。APIサーバのモジュールは前記フェーズで開発されているのが前提です。Gruntfile.jsの内容を変更し、もしくはタスクを作りプロキシサーバによるeasymock、stubbyへの接続をやめAPIサーバへの接続へと変更します。
connect: {
options: {
port: SERVER_PORT,
hostname: 'localhost'
},
livereload: {
・・・
},
/* プロキシサーバの設定 */
proxies: [{
context: '/mockapi',
host: 'localhost',
port: '3000',
https: false,
changeOrigin: false
}],
最後に
正しいプロセス概念が無いと、すばらしいJavaScriptフレームワークを利用してもスパゲティプログラムになりますし、Yeomanのようなかっこいいツールを使っても無駄になります。スパゲティプログラムは構築概念が無いところに発生しますので、何となくモックアップを作りそれを製品化するのは到底無理というものです。
エンタープライズの大規模プロジェクトでは特に重要ですのでプランニングが重要になります。
