個人的に気になっているJavaScriptビューライブラリをメモ程度にまとめてみた。
今回まとめたのは下記の4つ。
- Angular(2.x~)
- React
- Vue.js
- Hyperapp
また、以下の観点でそれぞれのライブラリを比較してみる。
| 観点 | 説明 |
|---|---|
| CLIの有無 | ライブラリ用のCLIが用意されていて、雛型の作成が簡単か。 |
| CDNの有無 | ライブラリのCDNが用意されていて、HTMLにURLを書くだけで使用できるか。 |
| 学習コスト | 学習コストがどれだけかかるか。 |
| ネイティブアプリの開発 | ネイティブアプリ(スマホ)の開発が可能か。 |
| GitHubのスター数 | GitHubのスター数から人気を見る。 |
| Googleトレンド検索 | トレンド検索から注目度を見る。 |
CLIの有無
Hyperapp以外はCLIが提供されている感じ。
ちなみにHyperappを動かすための最小構成が用意されているhyperapp-oneというものはあった。
| 名称 | 公式ページ | |
|---|---|---|
| Angular | Angular CLI | https://cli.angular.io/ |
| React | create-react-app | https://github.com/facebook/create-react-app |
| Vue.js | vue-cli | https://github.com/vuejs/vue-cli |
| Hyperapp | - | - |
CDNの有無
Angular以外はCDNで提供されている感じ。ちょっとお試ししたい時とかはCDNのほうが楽かも。
ちなみにAngularJS(Angular1.x)はCDNが提供されていた。
| CDNの有無 | 公式ページ | |
|---|---|---|
| Angular | 無 | - |
| React | 有 | https://reactjs.org/docs/cdn-links.html |
| Vue.js | 有 | https://jp.vuejs.org/v2/guide/installation.html |
| Hyperapp | 有 | https://github.com/hyperapp/hyperapp |
学習コスト
個人的には出来ることが多くなると学習コストが高くなるイメージ。
| 学習コスト(主観) | 説明 | |
|---|---|---|
| Angular | 高そう | フルスタックFWと言われているだけあって色々な機能があるため。(ルーターなど) |
| React | 普通 | Angularとは異なり必要最低限の機能しか備わっていない。必要となったら拡張していくイメージ。 |
| Vue.js | 普通 | Reactと同じ。 |
| Hyperapp | この中では一番低いかも | Hyperapp自体のコードが1KBのため、頑張れば読むことも可能なため。 |
ネイティブアプリの開発
| 開発可能か | 説明 | |
|---|---|---|
| Angular | 可能 | IonicやNativeScriptといったプラットフォームを用いることで可能。 |
| React | 可能 | ReactNativeというプラットフォームを用いることで可能。 |
| Vue.js | 可能 | NativeScriptというプラットフォームを用いることで可能。 |
| Hyperapp | ? | 不明。Monacaとか用いればできそうな気がする……。 |
GitHubのスター数(2018/5/10 時点)
| スター数 | GitHubのリポジトリ | |
|---|---|---|
| Angular | 36,073 | https://github.com/angular/angular |
| React | 95,431 | https://github.com/facebook/react/ |
| Vue.js | 93,687 | https://github.com/vuejs/vue |
| Hyperapp | 12,254 | https://github.com/hyperapp/hyperapp |
Googleトレンド検索(2018/5/10 時点)
世界
日本
