jQuery から Vue.js や React へ

jQueryを使用しているとサーバーに負荷がかかったり
書き直そうとしても、内容の整理整頓が難しかったりします。

Vue.js や React でフロントエンドをちゃんとしとくと
ウェブサービスの運用が安全になり、
ユーザーにとっても、今後運用していく人にとっても使いやすくなります。

導入の順番（勉強する順番）

HTMLは、ツリー構造で構成されています。そのことをDOMといいます。（DOM: Document object Model）

仮想DOMで、JavaScriptデータモデルとしてメモリ上に解析済みのDOMを保持し、画面で差し変わる部分だけ更新したりなど表示をスムーズに行うことができます。

例えば「検索」とか「フィルター」とかかける時に全部更新しなくていいからサッと表示してくれたり。

コンポーネント指向型とは、プログラムを部品ごとに分割し、部品を集めて使ってアプリを簡単に作るという考え方です。

Vueは、HTML + script + style（Single File Component）という形。

Reactは、JavaScript + CSSという形。JavaScriptの中で部品を組み立てていく感じです。その際HTMLをJSXと呼びます。CSS, CSS Module, inline CSS, StyleComponentなどでStyleを適用します。

Typescript とは、静的型付けが可能なJavaScriptの代わりとなる言語です。コードの書き方とか同じで、拡張子が違うだけ。

拡張子を変えるだけで、型推論が使えて自動的に型を解釈してくれます。（引数のとこは自動でなくて、型付けをして解釈させます）

型付けをすると、コードを書く際、その型で使えるプロパティやメソッドを表示してくれるので覚えなくてすむし、コードを書くのも短縮できます。

また、「numberを渡さないといけないのにString型を渡してます」などエラーを表示してくれたりします。

つまりTypeScriptは

Vue　: 　HTML + CSS + JavaScriptという今までの形と近い感じでSPAに構築したいとき

React　: 　JavascriptでSPAを構築したいとき