6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2022年5月16日 りあクト! 第7章 他のフレームワークとの比較 (p.113~)

世代におけるフロントエンド技術の特徴

フロントエンド技術を世代分けすると、第1世代が prototype.jsjQuery といった DOM 操作を中心に据えたユーティリティライブラリ、第2世代がAngularJSが挙げられます。

現在はReact、Vue.js、Angularが第3世代と呼ばれています。

世代 特徴 代表的なライブラリ/フレームワーク
第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

◆ メリット
◆ デメリット
  • 覚えることが多く、学習コストが高いです。そして、一から十までフレームワークが決めたやり方の冗長な記述を強いられます。
  • コンポーネントベースといいつつもモジュール、サービス、プロバイダなど覚えるべき概念が多い。
  • コンポーネントを作るには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

参考

りあクト! TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】 p.113~