【調査】Vue.js/React/Angular+TypeScriptについて

はじめに

JavaScriptにはVue.js、React、Angularという三大フレームワーク(以下FW)があります。

今回は興味本位でこれらのFWとTypeScirpt(以下TS)の相性など調べてみました。

※TypeScript+FWの学習で楽しく芋づる式にJavaScriptの理解を深めたいという趣旨があります。
現状、Vue.js以外はTS含めほぼ触れたことがありません。

調べた結果としては、ReactでJS&TS理解を深めていきたいと思っています。(まずはJSX記法)

最後にReact×TypeScriptを学ぶ際に参考にしたい教材を追記(4/22)しました。

Vue.js+TypeScrip

個人的にはVue.js+生JSでポートフォリオ作成を終えてしまったのでこのままでいいかなと思ってしまっています。

Vue.jsは素のHTMLが記述できるのが良いですよね。

TS採用メリット：JSよりコード量を少なくできる。見通しがよくなる。型宣言ができる。

【参考】
vue.js + typescript = vue.ts ことはじめ

TypeScriptでVue.jsを書く – Vue CLIを使った開発のポイントを紹介
カンマから解放される。Angularに書き方が似るらしい。移行の際に参考にわかりやすそう。

「開発はVue.jsでしたいけど、TypeScriptを入れたい問題」をどうするか
Nuxt.jsの本でお世話になった花谷さんが話している。とても興味深い。
TSはオプション的に入れづらいらしい。

React+TypeScrip

ReactはFacebookが開発。HTMLがJSXでの記述になる。

JSを再学習するにも最適そうなのでぜひ試したい。

TS採用メリット：JSX(TSX)とTSの相性は最高らしい。

【参考】

Vue.jsエンジニアのためのReact入門

なぜReact+TypeScriptでコンポーネント作成が早くなるのか
VScodeでスニペットが効く。

TypeScriptを使ってReactのチュートリアルを進めると捗るかなと思った(実際捗る)

Angular

Googleが開発。

そもそもTypeScriptベース。そのため学習コスト高め。

SPA開発など小規模開発ではTS自体不要のケースもあるのでが中・大規模向けFWとも。

【参考】

Angular、React、Vue.jsを一通り使ってみた個人的な感想
3大FW+TSについてトータルして記載されているのでとても参考になる。

TypeScript

最後にTSについても。

マイクロソフト開発。Googleの社内標準言語。

JSの理解を深めるために学習したい。class、継承もやりやすいらしい。

TypeScript Playground は便利すぎてびっくり。

※ESLintもサポートらしい。

【参考】

公式

速習TypeScript

TypeScriptをお勧めしたい7つの理由

JavaScriptが辿った変遷
JSは動的、TSは静的

React×TypeScriptを学ぶ上で活用したい教材

※4/22追記

React

りあクト！ TypeScriptで始めるつらくないReact開発 第2版

React チュートリアル：初めてのアプリを作成して安全にする

TypeScript

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

おわりに

最初は、メモに書いていたのですが、予想以上に面白くなり調べまくってしまったので記事にしました。(沼)

同じようにFWにTSも含めて学習したいと思っている方に少しでも参考になれば幸いです。