jsフレームワークについて

初めまして。y_sukです。

私がウェブ開発に携わり始めた2000年代前半にはフロントエンドはもちろんバックエンドにもフレームワークという概念が広まっていませんでした。しかし、最近のウェブ開発でフレームワークは再利用、メンテナンス、開発コストの節約等の色々な面で開発にはなくてはいけない概念となりました。今まではバックエンドの開発で主にフレームワークを導入してきましたが、最近はフロントエンド、特にJavaScriptのフレームワークの導入が増えている傾向となります。

多分、既存のJavascriptを様々な状況で作動できるようにコードを引き続き開発すると近いうちに、コード全体がカオスになる可能性が高いと思います。

そんな意味で今回はjsフレームワークをテーマにしたいと思います。最近のjsフレームワーク動向、jsフレームワーク選択時の考慮事項、jsフレームワーク別の特徴を紹介します。最近のトレンドをみると以下の通りAngularJSが人気です。

グーグルトレンドの結果

グーグルトレンドの結果によると2013年から2015年1月までの人気ランキングは以下になります。 1.AngularJS 2.Backbone.js 3.Sencha ext js その他

■jsフレームワーク選択時の考慮事項

学習コスト主にバックエンドエンジニアにかかる学習コスト

開発コスト実際フレームワークの導入時の削減できる開発コスト

ソースコードの一貫性フレームワークの導入で統一性の向上度

運用コスト運用コストとリスクに対する対応コスト

運用コストはフレームワークを導入することで無視できない部分です。尚、技術の変化が激しい現状を考慮すると一つのフレームワークに対する依存度を高めるのは長期的な観点では危険だと思います。それで、フレームワーク別の特徴と用途によって当て嵌るフレームワークを選ぶ必要があります。実はフレームワークを選択することより先に社内標準規則と設計に合わせて開発コストと運用コストを考える事がより大切だと思います。

最近は様々なjsフレームワークが使われていると思いますが、今回は上記の人気ランキング上位三つのjsフレームワークに対して紹介します。

1.AngularJS

HTMLタグを使って静的なHTMLと動的な部分との合わない部分を解決するために様々な機能を持っているフレームワークでMITライセンスです。

学習コスト学習コストはすべてのjsフレームワークの中で一番高いと評価されます。尚、学習する内容はAngularJSに限定します。

開発コスト JavaScript基盤の量はとても少ないです。開発工数も大幅に減ります。

ソースコードの一貫性テンプレートエンジンにてバックエンドと通信部分までフレームワークがカバーする範囲が大きいため、規則を作って開発するとプロジェクトの統一性が向上します。ただし、ビューに対するロジックをコントローラの中でも記述可能な柔軟性を持っているので注意が必要です。規則がなかったら大人数で開発する場合他のjsフレームワーク以上のカオスコードになる危険性を持っています。

運用コストベンダー支援はまだありません。経験があるエンジニアはまだ少ないですが、最近導入事例が増えているので将来問題はないようです。開発ツールとしてはChromeの拡張ツールのAngularJS Batarangがあり技術的な側面で運用コストを下げます。

まとめ

様々な機能を持っているためプロジェクトに不要な機能も沢山持っています。不要な機能の場合、無理に使わないでBackbone.jsのように様々なフレームワークと結合して最適化したアーキテクチャを構築するのをお勧めします。

2.backbone.js

コンパクトなフレームワークです。ライセンスはMITです。

学習コスト jQueryなどを利用する開発経験がある会社ならその経験を生かして開発ができるため、学習コストが低くなります。

開発コスト Backboneは機能を多く持っていないので、複雑でリッチな機能を低コストで利用するためには様々なJavaScriptライブラリと合体する必要があります。

ソースコードの一貫性 Backboneを独立的に使用するケースは少ないので、様々なライブラリと一緒に利用します。故に対策なしで開発するとプロジェクトに一貫性がなくなりますので、注意する必要があります。

運用コストベンダー支援はまだありません。 Backbone.jsは歴史も長いですし適用事例も多いので、経験があるエンジニアが他のフレームワークより多いです。開発サポートツールとしてはFirebugプラグインのBackbone-Eyeが技術的な側面でコストが下げられます。

まとめ

ライブラリの組合せで作り方に対する様々な方法が得られます。他の全ての機能のフレームワークと異なる不要な機能を最大限排除すると最適化されるアーキテクチャが構築できます。アーキテクチァー別の良い事例が多いです。基本的に選択されたライブラリとチームで作る規則でプロジェクトを運用する小型ウェブアプリを作りたい時によく利用されています。

3.Sencha ext js

Senchaはウェブアプリ用のjsフレームワークだけではなくネイティブ基盤フレームワークです。デスクトップはExtJS,モバイルはSencha Touchのように別途のフレームワークがあり、様々なUIウィジェットとその組合せによる開発複雑性を解決しています。ライセンスはGPLv3、全商用、商用OEMがあります。

学習コスト環境構築、開発からリリースまでフレームワーク機能で支援しています。代わりにフレームワーク学習コストは相当高いです。

開発コスト HTML, JavaScript技術は最小で画面開発が可能です。複雑さはSenchaフレームワークが大抵吸収してくれるため他のフレームワーク程深いJavaScriptの知識が必要ではありません。

ソースコードの一貫性 Sencha特有の拘束力があるソースコードの一貫性はとても高いです。

運用コストベンダー支援があります。Senchaはベンダー教育も提供しているため教育に対する負担が少ないですが、開発サポートツール等の有料が多いです。

まとめ

フレームワークに基づく拘束が相当高いです。Senchaで開発する場合、意識しなくてもソースコードと開発規則が統一されます。複雑性はSenchaフレームワークが大抵吸収してくれるため他のフレームワークの複雑なJavaScriptの知識は不要です。環境構築および開発からリリースまで全てスタックに対する拘束力が大きいので学習コストがとても高いです。 Senchaフレームワークを提供している機能の枠を超えるとしたら他のフレームワーク以上で複雑になります。プロジェクトに適用するとしたら必ずフレームワーク枠に合うのかを確認する必要があります。ウェブアプリを開発でHTML5基盤技術エンジニアの調達や教育などが難しい場合は選択した方がいいと思います。