albatrosary's blog

UI/UXとエンタープライズシステム

Single-page Application(SPA)を構築するための7つの勘所

業務アプリケーションを開発するために、特に、Single-page Application(SPA)を構築する場合に必ず考えなければいけない、最も重要な7つの要素を上げます。マネージャ視点から考えても”ここを外してはSPAの構築はできない”と言えます。

 

近年ブラウザの性能が向上したため、過去できなかったJavaScriptで多くの処理が可能となっています。Backbone.js や Angular等のJavaScriptフレームワーク、bootstrap等のCSSフレームワーク、開発環境のYeomanなど、もはや道具はすべて整っていると言えます。実際に私がSPAで構築するときに考えた事項です。

  1. JavaScriptフレームワークを導入すること
  2. altJSを導入すること
  3. CSS Preprocessorを導入すること
  4. 適切な開発環境を提供すること
  5. フロントとバックを分散開発すること
  6. ハックできるメンバーをプロジェクトにアサインすること
  7. フロント開発に情熱があること

JavaScriptフレームワークを導入すること

jQueryでの開発はカオスを生むのはいうまでもありません。30人以上の開発メンバーでプロジェクトを行う場合、コーティング規約だけではどうにもならないことが多くあります。サンプルプログラムの展開だけでも足りません。

JavaScriptフレームワークの導入は、アーキテクチャを入手するという意味だけではなく、ロジカルな部分を整理するという意味も含まれます。「何をどこに書くのか」を整理することにより見通しの良いプログラム記述が可能となります。

Backbone.jsを利用する意味合いはまさにここにあります。Backbone.jsにより与えられた構造を元に「何をどこに書くのか」整理します。jQueryでカオスになったロジックを整理整頓してくれる優秀なJavaScriptフレームワークです。

altJSを導入すること

CoffeeScript、TypeScriptのようなaltJSの導入は、JavaScriptフリークにとっては必要のないものです。しかし、業務アプリケーション開発に加わるメンバーのスキルは果たしてJavaScriptフリークでしょうか?どれだけJavaScriptについて知識があるでしょうか?

我々の目的は、JavaScriptを使って開発したプログラムを提供することではなくWebアプリケーションを提供することにあります。より安全な、より不具合がなくなるのであればaltJSを導入すべきです。

中規模、大規模開発を行ったときに特に威力を発揮するでしょう!

CSS Preprocessorを導入すること

Sass+Compass、Less、StylusいづれかのCSS Preprocessorを導入しましょう。もはやpngなどのイメージに頼ることはありえません。イメージデータを使わないことで、全体的なファイルサイズを小さくできます。

CSSで実装することでJavaScriptでのハンドリングも容易くなりますし、レスポンシブwebデザインで開発するときにも有効です。

適切な開発環境を提供すること

業務アプリケーションを開発していた方ならEclipseやNetBeanは当たり前の開発ツールです。ただし、これはJavaでアプリケーションを開発するためのものであり、SPAを開発するためのものではありません。

2012-2013年にYeomanのようなすばらしい開発ツールのおかげでSPAの開発が容易に行えるようになりました。前記のaltJS、CSS Preprocessorのビルドもgruntタスクにより開発者の負担にはなりません。SPAで開発する場合には、Yeomanのような開発環境を構築することは必須です。

フロントとバックを分散開発すること

SPA本体であるクライアントとJSONを受け取りデータベースへ情報を書き込むためのサーバとは別々に開発する必要があります。issueでも別のタスクとして管理する必要があります。

このときに必要となるのがmock upによる開発です。すでにgruntにはgrunt-easymock, grunt-stubbyなどのプラグインがありますのでレイヤ分散型開発が容易に行えます。

ハックできるメンバーをプロジェクトにアサインすること

SPA開発を行うときに必要となる技術要素は、ときより意図しない動きをします。そのときにハッカーの出番となります。プロジェクトには必ず技術的感の良いメンバーを最低一人は用意しましょう。

これを読んだ方がハッカーになることも可能です。技術的課題は多く存在しますので一つ一つ解決すべきです。

フロント開発に情熱があること

 ここが一番大切な要素だと考えております。SPA開発は、Java開発のように定型化されていません。他の開発アーキテクチャに比べ「こうすればこうなる」という経験値が圧倒的に少ないです。

メンバーアサインのときに「ぜひやってみたい」「挑戦したい」というメンバーをアサインしましょう。そういったメンバーがいればプロジェクトは成功します。

最後に

近年のフロント業務アプリケーションの開発は、HTML5の流れにのりRIAからSPAへと向かうことは必然と考えます。注意したいことは、SPAが業務アプリケーションを構築するための唯一の手段では無いということです。

  • ネイティブ
  • ネイティブ+HTML5
  • HTML5(Single-page Application)
  • HTML5(Multi-page Application)

と選択脈はあります。この記事が、構築するアプリケーションとしてSPAを選択するきっかけになれば幸いです。