Webサービスを開発するにあたり、JavaScriptのフレームワークは今や欠かせないものになりました。
多種多用なフレームワークがある中で、今回は主にwebサービスのフロントエンドで用いられるJavaScriptフレームワークをまとめました。
それぞれのJavaScriptフレームワークの詳しい使い方については、詳細に説明されているサイトが沢山あるので本記事では省略致します。
こんなフレームワークもあるんだなーと軽い感じで眺めていただけると幸いです！
1 Vue.js
特徴
Vue.jsは、インタラクティブなWebインターフェイスを構築するためのライブラリで、MVVMアーキテクチャを採用しています。
HTML/JavaScript間の双方向データバインディングに特化していて、極力シンプルに実装できるようになっています。
シンプルに実装できることから、学習コストも低く初心者でも導入しやすいフレームワークです。
その一方で、コンポーネント間を親から子へと流れる単方向のデータフローを使用することで、データの流れがより簡潔になり大規模なアプリケーションに対して用いることも可能になります。
jp.vuejs.orgではざっくりと以下のようにまとめられています。
- シンプル: いくつかHTMLを書いて、いくつかJSONを持ってきて、Vueインスタンスを作って、それでおしまいです。
- リアクティブ: 式(expression)と透過依存性トラッキングによる算出プロパティ(computed property) 。
- コンポーネント: 分離された、再利用可能なコンポーネントであなたのアプリケーションを構成します。
- コンパクト: min+gzip で 24 キロバイト〜、依存はありません。
- 速い: 精密で効率のよい非同期バッチで DOM を更新します。
- パッケージ: NPM 、Bower経由でインストールします。あなたのお気に入りのエコシステムを利用できます！
gihubリポジトリ: https://github.com/vuejs/vue
スター数: 21,717 (記事公開時)
参考サイト
2 Backbone.js
特徴
Backbone.jsは、MVCアーキテクチャを採用したJavaScriptフレームワークで、軽量に動いてくれることが特徴です。
その取り回しの良さから、Backbone.js単体で構築されるというよりViewの部分をReact.jsやvue.jsに任せ、controllerやmodelの債務を負うといった形で組み合わせて使われることが多いようです。
(実際にreact.backboneやreact-backbone-componentといったように連携をスムーズに出来るライブラリもいくつか準備されています。)
gihubリポジトリ: https://github.com/jashkenas/backbone
スター数: 25,078 (記事公開時)
参考サイト
3 AngularJS
特徴
AngularJSはGoogleによりMVWアーキテクチャ(Wはwhatever)を採用して作られたJavaScriptフレームワークで、JavaScriptフレームワークの中で人気実績ともに最も注目されています。
Angular1.x系から2.0へのアップデートの際には、1系の弱点だった処理速度の遅さや記述ルールが煩雑になるといった弱点を補うために大幅な回収が行われました。
2系のリリース当初はほぼ別のフレームワークになったように捕らえられていて、システマティックな移行はほぼ不可能と思われていましたが、こちらのブログで段階的移行が可能になると発表されました。
(実際にこの方法に従い1系から2系へ移行したサービスがあり、こちらでその方法を紹介されています。)
その他大きな特徴と、変更点は以下の通り。
-
MVWフレームワーク
google自身が提唱しているワードで、Model-View-Whateverの略です。モデルとビューは勿論、その他何でもするよという思想だそうです。 -
HTMLテンプレート機能 => 仮想DOM
Angular1系はhtmlを拡張していく形式であるHTMLテンプレート機能を採用していました。
ただ、処理速度の遅さがボトルネックになっていたことから、2系では仮想DOMを採用することで処理速度3~5倍を実現しています。 -
双方向データバインディング => 単方向 + 双方向
AngularJS、Angular 2ともに双方向データバインディングをサポートしているようです。ただ、Angular 2ではこちらのドキュメントをみる限りだと単方向データバインディングもサポートしているようで、1系でボトルネックだった速度面を考えた実装もできるようになっていますね！ -
その他
その他にも、ルーティング機能や、処理に依存するデータなどを外部から注入すると言った意味のDependency Injection(依存性注入)を採用しているといった特徴もあります。
3.1 AngularJS
gihubリポジトリ: https://github.com/angular/angular.js
スター数: 50,407 (記事公開時)
参考サイト
3.2 Angular 2.0
gihubリポジトリ: https://github.com/angular/angular
スター数: 13,540 (記事公開時)
参考サイト
4 React
特徴
ReactはFacebook社製のOSSなjavascriptライブラリです。
Angularに次いで用いられているJavaScriptフレームワークで、Facebookはもちろん、airbnbやinstagram, yahoo!といった有名サービスのフロントの部分で用いられていることでも有名です。
このライブラリは大きな特徴として3つのものを持っています。
-
JUST THE UI
ReactはMVCデザインパターンを元に実装されているサービスのViewの部分を請け負います。
コンポーネントと呼ばれる最小機能単位で1つのファイルの実装を行い、他の技術にも依存しないので、既存のシステムでも機能単位でテスト的に導入することが可能です。 -
仮想DOM
Viewに影響を与える何かしらの値が変更され、Viewをリレンダリングする必要がある際に、影響箇所だけリレンダリング出来たら高速化が図れる！との思想から作られた概念。
影響箇所を特定するために、元のViewと変更が行われた後のViewを比較する必要があるのですが、実際のDOMではなく仮想的なDOMを定義して比較することで高速化を図っている。 -
単方向データバインディング
Reactでは、データの変更に応じてUIの変更が行われる単方向のデーターバインディングを採用しています。
gihubリポジトリ: https://github.com/facebook/react
スター数: 44,729 (2016年7月現在)
参考サイト
5 Riot.js
特徴
フロントエンドの世界には、ライブラリが溢れてはいるものの、正直なところソリューションはまだ「そこにない」と感じています。私たちは、この大きなパズルを解くために、Riotという最良のバランスを見つけました。Reactが果たしかけたに見えたものの、重大な弱点を残している点、それをRiotは解決します。だから——私たちには新しいライブラリが必要なのです。
引用元: Riot.js(http://riotjs.com/ja/)
以上の思想を元に作られた比較的新しいJavaScriptフレームワーク。
ReactのロジックとPolymerのロジックに、”楽しい”文法と小さな学習曲線が一緒になった、とイメージしたようなフレームワークだそうです。
その名の通り、今までの複雑なフレームワークに対してRiot(暴動）を起こそうといったようにシンプルで分かりやすいフレームワークになっています。
仮想DOMや単方向データバインディングといったReactが従来持ち合わせた特徴に加え、Riot.jsではミニマリズムを提唱しています。
楽しい文法という名の下で、メソッドには再利用性を意図した標準的な文法だけを取り入れることで、APIの数を10分の1から100分の1に減らし学習コストの低下とファイルサイズの削減を図っています。
gihubリポジトリ: https://github.com/riot/riot
スター数: 9,776 (2016年7月現在)
参考サイト
6 Aurelia.js
2016年7月現在、githubのスター数も8074とまだまだ他のフレームワークに比べると少なくなおかつbeta版までしか公開されていないですが、何といってもこのフレームワークの特徴は未来志向なところです。
元々Angular2.0の開発に携わっていたRobEisenbergがAngularチームを抜け、こちらのプロジェクトを立ち上げました。なので基本的にはAngularJSの思想を引き継いでいて、双方向データバインディングやルーティング機能などを持ち合わせているのですが、一番大きく異なるのがES6/7の機能を既に取り込んでいるところです。
アーキテクチャはAngular同様、MVW(Model-View-Whatever)を用いており、Railsのように設定より規約を思想に作られています。
また比較的新しいながらも既にドキュメントがものすごく充実しているので、今後注目のJavaScriptフレームワークですね！
その他の主な特徴は以下の通りです。
-
Angularとほぼ同様な機能
Angularと同様に、双方向データバインディングを採用し、HTMLを拡張する形で実装が行われ、ルーティング機能もサポートしています。
また、モジュール化されているのて必要な箇所に適宜組み込むことが可能です。 -
未来志向ながら、モダンなブラウザにも対応できる
ES6/7の機能を取り込んでいることから、従来は無理やり行っていた実装を最新の機能を用いて比較的スマートに解決しています。またそのような実装でありながら、ESコンパイラであるBabelのpolyfillを用いることでモダンなブラウザにも対応することができます。
gihubリポジトリ: https://github.com/aurelia/framework
スター数: 8074 (2016年7月現在)
参考サイト
#まとめ
フロントエンドのJavaScriptフレームワークのおそらくトップであろう(jQueryは除く)、AngularやReactの動向を見る限り仮想DOM(+単方向データバインディング)というのは処理速度などを考えたときに必要な思想なのかなと思いました。
ただ、一方でファイルの容量が大きくメソッドも複雑になりがちなのでいかにシンプルにできるか？という部分で新興勢力が力を伸ばしてきているようにも感じました。
自身の考えをまとめるために作った記事なので、もっと良いフレームワークや、文中におかしな点等ありましたらご指摘いただけると幸いです！よろしくお願いします。