【2016年夏】個人的に注目なフロントエンドで使えるJavaScriptフレームワークまとめ

<center>
![スクリーンショット 2016-07-05 9.05.49.png](https://qiita-image-store.s3.amazonaws.com/0/74192/a0d9b538-f61f-7094-e294-b6088f15a7fc.png "スクリーンショット 2016-07-05 9.05.49.png")

</center>
#はじめに

Webサービスを開発するにあたり、JavaScriptのフレームワークは今や欠かせないものになりました。
多種多用なフレームワークがある中で、今回は主にwebサービスのフロントエンドで用いられるJavaScriptフレームワークをまとめました。

それぞれのJavaScriptフレームワークの詳しい使い方については、詳細に説明されているサイトが沢山あるので本記事では省略致します。
こんなフレームワークもあるんだなーと軽い感じで眺めていただけると幸いです！

## <div id="no1">1 Vue.js</div>
<center>
![スクリーンショット 2016-07-05 8.42.55.png](https://qiita-image-store.s3.amazonaws.com/0/74192/ca6f9e0a-8d09-815c-d10e-3f7cf8a67c17.png "スクリーンショット 2016-07-05 8.42.55.png")
</center>

#### 特徴

Vue.jsは、インタラクティブなWebインターフェイスを構築するためのライブラリで、MVVMアーキテクチャを採用しています。
HTML/JavaScript間の双方向データバインディングに特化していて、極力シンプルに実装できるようになっています。
シンプルに実装できることから、学習コストも低く初心者でも導入しやすいフレームワークです。
その一方で、コンポーネント間を親から子へと流れる単方向のデータフローを使用することで、データの流れがより簡潔になり大規模なアプリケーションに対して用いることも可能になります。

[jp.vuejs.org](https://jp.vuejs.org)ではざっくりと以下のようにまとめられています。

- **シンプル**: いくつかHTMLを書いて、いくつかJSONを持ってきて、Vueインスタンスを作って、それでおしまいです。
- **リアクティブ**: 式(expression)と透過依存性トラッキングによる算出プロパティ(computed property) 。
- **コンポーネント**: 分離された、再利用可能なコンポーネントであなたのアプリケーションを構成します。
- **コンパクト**: min+gzip で 24 キロバイト〜、依存はありません。
- **速い**: 精密で効率のよい非同期バッチで DOM を更新します。
- **パッケージ**: NPM 、Bower経由でインストールします。あなたのお気に入りのエコシステムを利用できます！ 


#### gihubリポジトリ: https://github.com/vuejs/vue
#### スター数: 21,717 (記事公開時)
#### 参考サイト
- [VueJS guide](https://jp.vuejs.org/guide/)
- [ライオンでもわかるVuejs](http://www.slideshare.net/lion-man/vuejs)
- [クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ](http://www.slideshare.net/sekiyousuke/mvvm-vuejs)

## <div id="no2">2 Backbone.js</div>
<center>
![スクリーンショット 2016-07-05 8.44.55.png](https://qiita-image-store.s3.amazonaws.com/0/74192/ebf64101-ae39-f1fb-3d7d-8c6aa335bfca.png "スクリーンショット 2016-07-05 8.44.55.png")
</center>

#### 特徴

Backbone.jsは、MVCアーキテクチャを採用したJavaScriptフレームワークで、軽量に動いてくれることが特徴です。
その取り回しの良さから、Backbone.js単体で構築されるというよりViewの部分をReact.jsやvue.jsに任せ、controllerやmodelの債務を負うといった形で組み合わせて使われることが多いようです。
(実際に[react.backbone](https://github.com/clayallsopp/react.backbone)や[react-backbone-component](https://github.com/magalhas/backbone-react-component
)といったように連携をスムーズに出来るライブラリもいくつか準備されています。)

#### gihubリポジトリ: https://github.com/jashkenas/backbone
#### スター数: 25,078 (記事公開時)
#### 参考サイト
- [Backbone.js GettingStarted](http://backbonejs.org/#Getting-started)
- [試して学ぶ Backbone.js入門](https://appkitbox.com/knowledge/javascript/20130315-45)
- [Backbone.jsと比較したReact.js
](http://qiita.com/takeshy/items/11bd01c64dd15f404c9c)

## <div id="no3">3 AngularJS</div>
<center>
![スクリーンショット 2016-07-05 8.46.06.png](https://qiita-image-store.s3.amazonaws.com/0/74192/5cf16bd4-abf0-19c9-ff5b-e1860bce7d26.png "スクリーンショット 2016-07-05 8.46.06.png")
</center>

### 特徴

AngularJSはGoogleによりMVWアーキテクチャ(Wはwhatever)を採用して作られたJavaScriptフレームワークで、JavaScriptフレームワークの中で人気実績ともに最も注目されています。
Angular1.x系から2.0へのアップデートの際には、1系の弱点だった処理速度の遅さや記述ルールが煩雑になるといった弱点を補うために大幅な回収が行われました。
2系のリリース当初はほぼ別のフレームワークになったように捕らえられていて、システマティックな移行はほぼ不可能と思われていましたが、[こちらのブログ](http://angularjs.blogspot.jp/2015/08/angular-1-and-angular-2-coexistence.html)で段階的移行が可能になると発表されました。
(実際にこの方法に従い1系から2系へ移行したサービスがあり、[こちら](https://developers.eure.jp/tech/angular2_migration/)でその方法を紹介されています。)

その他大きな特徴と、変更点は以下の通り。

- MVWフレームワーク
google自身が提唱しているワードで、Model-View-Whateverの略です。モデルとビューは勿論、その他何でもするよという思想だそうです。

- HTMLテンプレート機能 => 仮想DOM
Angular1系はhtmlを拡張していく形式であるHTMLテンプレート機能を採用していました。
ただ、処理速度の遅さがボトルネックになっていたことから、2系では仮想DOMを採用することで処理速度3~5倍を実現しています。

- 双方向データバインディング => 単方向 + 双方向
AngularJS、Angular 2ともに双方向データバインディングをサポートしているようです。ただ、Angular 2では[こちら](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax)のドキュメントをみる限りだと単方向データバインディングもサポートしているようで、1系でボトルネックだった速度面を考えた実装もできるようになっていますね！

- その他
その他にも、ルーティング機能や、処理に依存するデータなどを外部から注入すると言った意味の[Dependency Injection(依存性注入)](http://qiita.com/hshimo/items/1136087e1c6e5c5b0d9f)を採用しているといった特徴もあります。




### 3.1 AngularJS

#### gihubリポジトリ: https://github.com/angular/angular.js
#### スター数: 50,407 (記事公開時)
#### 参考サイト
- [AngularJS使い方メモ](http://qiita.com/opengl-8080/items/2fe0a20c314b1c824cc5)
- [AngularJSモダンプラクティス](http://qiita.com/armorik83/items/5542daed0c408cb9f605)


### 3.2 Angular 2.0

#### gihubリポジトリ: https://github.com/angular/angular
#### スター数: 13,540 (記事公開時)
#### 参考サイト
- [AngularJSとAngular2の比較から、jsフレームワークの独自進化を考える](https://rdlabo.jp/angular2-364.php)
- [速習！Angular1からAngular2への移行](http://angularjs.blogspot.jp/2015/08/angular-1-and-angular-2-coexistence.html)

## <div id="no4">4 React</div>
<center>
![スクリーンショット 2016-06-28 19.17.44.png](https://qiita-image-store.s3.amazonaws.com/0/74192/6804da19-ef74-6865-f9cb-fa3ca5c08b5c.png "スクリーンショット 2016-06-28 19.17.44.png")

</center>

### 特徴

[React](http://facebook.github.io/react/index.html)はFacebook社製の[OSSなjavascriptライブラリ](https://github.com/facebook/react)です。
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月現在)
#### 参考サイト
- [Reactチュートリアル](https://facebook.github.io/react/docs/tutorial-ja-JP.html)
- [Reactを使うとなぜjQueryが要らなくなるのか](http://qiita.com/naruto/items/fdb61bc743395f8d8faf)

## <div id="no5">5 Riot.js</div>
<center>
![スクリーンショット 2016-06-28 19.18.40.png](https://qiita-image-store.s3.amazonaws.com/0/74192/e92fbe7b-d418-3699-0513-fe5f4ae362db.png "スクリーンショット 2016-06-28 19.18.40.png")

</center>

### 特徴

>フロントエンドの世界には、ライブラリが溢れてはいるものの、正直なところソリューションはまだ「そこにない」と感じています。私たちは、この大きなパズルを解くために、Riotという最良のバランスを見つけました。Reactが果たしかけたに見えたものの、重大な弱点を残している点、それをRiotは解決します。だから——私たちには新しいライブラリが必要なのです。
> 引用元: <cite>Riot.js([http://riotjs.com/ja/](http://riotjs.com/ja/))</cite>

以上の思想を元に作られた比較的新しいJavaScriptフレームワーク。
[React](http://facebook.github.io/react/index.html)のロジックと[Polymer](https://github.com/Polymer/polymer)のロジックに、”楽しい”文法と小さな学習曲線が一緒になった、とイメージしたようなフレームワークだそうです。
その名の通り、今までの複雑なフレームワークに対してRiot(暴動）を起こそうといったようにシンプルで分かりやすいフレームワークになっています。

仮想DOMや単方向データバインディングといったReactが従来持ち合わせた特徴に加え、Riot.jsではミニマリズムを提唱しています。
楽しい文法という名の下で、メソッドには再利用性を意図した標準的な文法だけを取り入れることで、APIの数を10分の1から100分の1に減らし学習コストの低下とファイルサイズの削減を図っています。



#### gihubリポジトリ: https://github.com/riot/riot
#### スター数: 9,776 (2016年7月現在)
#### 参考サイト
- [A React-like user interface micro-library](http://riotjs.com/ja/)
- [Riot vs React & Polymer](http://riotjs.com/ja/compare/)
- [Riot.jsでフロントエンドの複雑さに反乱するときがやってきた](http://qiita.com/aggre/items/928eb2bedbac6a7829c0)

## <div id="no6">6 Aurelia.js</div>
<center>
![aurelia.png](https://qiita-image-store.s3.amazonaws.com/0/74192/499682f3-2174-94f7-c0a1-17010e5e3b89.png "aurelia.png")
</center>

2016年7月現在、githubのスター数も8074とまだまだ他のフレームワークに比べると少なくなおかつbeta版までしか公開されていないですが、何といってもこのフレームワークの特徴は未来志向なところです。
元々Angular2.0の開発に携わっていたRobEisenbergがAngularチームを抜け、こちらのプロジェクトを立ち上げました。なので基本的にはAngularJSの思想を引き継いでいて、双方向データバインディングやルーティング機能などを持ち合わせているのですが、一番大きく異なるのがES6/7の機能を既に取り込んでいるところです。
アーキテクチャはAngular同様、<strong>MVW</strong>(Model-View-Whatever)を用いており、Railsのように<strong>設定より規約</strong>を思想に作られています。
また比較的新しいながらも既に[ドキュメント](http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/getting-started)がものすごく充実しているので、今後注目のJavaScriptフレームワークですね！

その他の主な特徴は以下の通りです。

- Angularとほぼ同様な機能
Angularと同様に、双方向データバインディングを採用し、HTMLを拡張する形で実装が行われ、ルーティング機能もサポートしています。
また、モジュール化されているのて必要な箇所に適宜組み込むことが可能です。

- 未来志向ながら、モダンなブラウザにも対応できる
ES6/7の機能を取り込んでいることから、従来は無理やり行っていた実装を最新の機能を用いて比較的スマートに解決しています。またそのような実装でありながら、ESコンパイラであるBabelの[polyfill](https://babeljs.io/docs/usage/polyfill/)を用いることでモダンなブラウザにも対応することができます。


#### gihubリポジトリ: https://github.com/aurelia/framework
#### スター数: 8074 (2016年7月現在)
#### 参考サイト
- [aurelia Getting Set Up](http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/getting-started)
- [Aurelia.js の紹介](http://www.slideshare.net/ledmonster/aureliajs)

#まとめ
フロントエンドのJavaScriptフレームワークのおそらくトップであろう(jQueryは除く)、AngularやReactの動向を見る限り仮想DOM(+単方向データバインディング)というのは処理速度などを考えたときに必要な思想なのかなと思いました。
ただ、一方でファイルの容量が大きくメソッドも複雑になりがちなのでいかにシンプルにできるか？という部分で新興勢力が力を伸ばしてきているようにも感じました。

自身の考えをまとめるために作った記事なので、もっと良いフレームワークや、文中におかしな点等ありましたらご指摘いただけると幸いです！よろしくお願いします。