0. それぞれの利点
（１）jQuery
- HTMLを分割、加工せずに動的な処理を設定できる。
- HTML/CSSのコーダーからプログラマーへの作業が単線的になる。
（２）React
- Javascript(Typescript)はデータ（状態）の読み取り・加工のみを行い、DOMについては意識しない。(DOMはJSX内にて記述）
- コンポーネントのルールによりコードが単純になり、コードの統一化が図りやすい。
１．構造上の違い
（１）既存のHTML（実DOM）を"外側"から"操作"するjQuery
jQueryは、すでに作られたHTMLの画面があり、その中の部品をセレクタを通して外からDOMを操作します。
画面：HTML(実DOM) ⇐ セレクタ= jQuery
（２）仮想DOMにより"内側"から振る舞いを"定義"するReact
Reactは、DOM自体をJsにより作成し、DOM自体の状態、振る舞いを内側から定義します。これがコンポーネントとなります。
そして、このコンポーネントを組み合わせて画面を作ります。
React = コンポーネント（仮想DOM）⇒ 画面
２．コード上の違い
（１）jQuery
- DOMの操作、状態の操作をJavascript(Typescript）内で行う。
- 部品ごとのソース分割、コンポーネントなどの制約はライブラリとしてないので、１つのソース内に複数のDOMの操作を書くこともできる。
- DOMと状態の異なるコンテキストが混在しわかりにくくなる可能性がある。
- アーキテクチャ（構造）やデータの流れなどの設計を制約しないので書き手によってコードが異なる。
（２）React
- 特定のDOMについて1クラスで定義し、対象DOM以外についてクラス内に記載しない。
- DOMの操作は、Javascript内ではなくJSXなどにおいて記述する。
- Javascript内では、状態(State/Store）に関する記述のみ行う。
- jQueryが行うDOMの操作を、データと仮想DOMのバインディングを隠蔽しながらライブラリが行うので、ReactのユーザーはDOM自体への意識、DOMの操作をすることが少ない（皆無に近いかも）。
- DOMと状態のコンテキストが別れているので、それぞれの関心・コードがシンプルになる。
- 構造やデータの流れの設計が決まっているため、書き手によるコードの違いがあまりない。
３．工程
（１）jQuery
- 1.HTML・CSSで画面を作る。
- 2.処理する部位にセレクタを割り当てる。
- 3.セレクタを使い、DOMの操作を記述。
（２）React
- 1.モック、または、HTMLで分割前の画面を作る。
- 2.コンポーネントの相互関係を踏まえて状態データ（Store）の構造、そして、Storeとコンポーネントのやり取りを定義する。Storeとコンポーネントの流れはReduxに従う。
- 3.処理する部位をコンポーネントに分割して実装する。コンポーネントのは自分のDOMと状態、そして、Storeの更新についてのみ記載。他のDOMの処理は記載しない。
- 4.コンポーネント（仮想DOM）を組み合わせて画面を作成。
４．工数
（１）jQuery
- 工程上、画面の分割、Storeの分割がない分だけ工数は少ない。
- どのように構造や処理を定義するのかの設計が必要となり、ここの工数は増える。
- 設計次第だが、DOMと状態のコードが複雑化し、バグが多くなったりすることで工数が増える可能性がある。
（２）React
- 画面の分割、Storeの作成などを分割し、コンポーネントの確認環境の構築などの工数が増える。
- 分割し個々のコンポーネントのロジックが単純に近いため、バグの数が少なくなりこの分の工数が少なくなる可能性が高い。
５．開発規模
（１）小規模
- モックや少機能であれば、jQueryの方が工程が短く、工数が少なくなるのでよいかもしれない。
- 個人開発であっても、機能が増える可能性があるとReactを検討した方がよい。
（２）大規模
- 複数人での開発、部位の協調性、ロジックの複雑性、コードの統一化を考えるとReactの方が良い。
- Reactの構造、データの流れ、コードの役割が小さく区切られ、コードが単純化するので複数人開発に最適。
６．設計上の注意点
（１）jQuery
- 構造やコードの分割などの指針は書き手に委ねられるため、Reactを参考にコンポーネントごとにソースをわけて、クラスを作り、その中でjQueryによるDOMの操作を行う。
- DOMの操作部分と状態の部分をできるだけ分ける。
- コンポーネントのソースにおいては、できるだけ他のDOMの操作は行わない。
- １ソース、１クラス、１コンポーネント、1DOM、状態分割などを意識する。
（２）React
- コンポーネント分割、データの流れなどは一般的な設計に従う。設計コストの削減、コードの統一化が目的のため、できるだけ一般化したものを採用する。
- 画面全体の状態(Store）を先に設計し、それを踏まえてコンポーネントを設計する。
- たえず、状態（State、Store）を意識しながら設計する。
- 画面全体の状態、データの流れをアーキテクチャ（設計者）は意識する。
- コンポーネントの実装者はできるだけ、他のコンポーネントを意識せず、Storeと対象DOMの関係のみに意識するように設計しておく。