2022年5月16日 りあクト！ 第7章 他のフレームワークとの比較 （p.113~)
世代におけるフロントエンド技術の特徴
フロントエンド技術を世代分けすると、第1世代が prototype.jsやjQuery といった DOM 操作を中心に据えたユーティリティライブラリ、第2世代がAngularJSが挙げられます。
現在はReact、Vue.js、Angularが第３世代と呼ばれています。
| 世代 | 特徴 | 代表的なライブラリ/フレームワーク |
|---|---|---|
| 第1世代 | DOM操作を中心に据えたユーティリティライブラリ | prototype.js jQuery |
| 第2世代 | MV*アーキテクチャを採用した、modelとのデータバインディングを行うためのフレームワーク | AngularJS Backborn.js Knockout |
| 第3世代 | コンポーネントベースアーキテクチャなフレームワーク | React Angular Vue.js |
npm trends というサイトで最新のダウンロード数を見ることが出来ます。
https://www.npmtrends.com/angular-vs-react-vs-vue
Angular
◆ メリット
- サーバサイドで主流であるMVCデザインパターンを採用しているため馴染みがあり、取り掛かりやすいです。
- 直感的な双方向データバインディングによるHTMLテンプレートが採用されている。
- フレームワークとしてひととおりのものがフルスタックで提供されている。
◆ デメリット
- 覚えることが多く、学習コストが高いです。そして、一から十までフレームワークが決めたやり方の冗長な記述を強いられます。
- コンポーネントベースといいつつもモジュール、サービス、プロバイダなど覚えるべき概念が多い。
- コンポーネントを作るにはHTMLテンプレート、CSSスタイルシート、スクリプトの3つのファイルが必要 (Vue.jsはシングルファイルコンポーネントです。)
- 非同期処理やイベントを扱う際に、RxJSというライブラリを使う(可読性が低いと言われています。)
- TypeScriptのバージョンが上がっても、Angularがそれを追随するまで最新の機能を使えない。
Vue.js
◆ メリット
- AngularJSの機能から必要最低限の機能に絞った軽量なフレームワークである。
- Reactのコンポーネントアーキテクチャを取り入れている。
- HTMLベースで馴染みやすい設計で、仮想DOMを採用してパフォーマンスを向上させる改良も加えられている。
◆ デメリット
- シングルファイルコンポーネントは長期的に見るとコンポーネントの再分割を難しくリファクタリングがしづらい(大規模開発に適していない)
- 色々なフレームワークやライブラリの良いところを取りいれているので、一貫した思想がない。思想がないことが思想である。ポジティブに捉えると、変化に柔軟です。
- コミュニティベースのプロジェクトなので、大企業が後ろ盾にいるReactやAngularに比べると、サポートの安心感がない。
- Vue.jsの特有のエラーがあるため、ルールやエラー構文を覚えるまで少々開発がしづらい。
Web Componentsとは
ウェブコンポーネントは、再利用可能なカスタム要素を作成し、ウェブアプリの中で利用するための、一連のテクノロジーです。
https://developer.mozilla.org/ja/docs/Web/Web_Components
ReactとWeb Componentsは異なる課題を解決する為に構築されました。 Web Components はコンポーネントをパッケージ化して、高い再利用性を与えます。 一方で React は DOM とデータを同期させる為の宣言型のライブラリを提供しています。 Web Components内でReactを使用することも、React内でWeb Components を使用することも、あるいはその両方を行うこともできます。
ただ、あまり使用はされないそうです。
https://ja.reactjs.org/docs/web-components.html
