目次
はじめに
JavaScriptにはVue.js、React、Angularという三大フレームワーク(以下FW)があります。
今回は興味本位でこれらのFWとTypeScirpt(以下TS)の相性など調べてみました。
※TypeScript+FWの学習で楽しく芋づる式にJavaScriptの理解を深めたいという趣旨があります。
現状、Vue.js以外はTS含めほぼ触れたことがありません。
調べた結果としては、ReactでJS&TS理解を深めていきたいと思っています。(まずはJSX記法)
Vue.js+TypeScrip
個人的にはVue.js+生JSでポートフォリオ作成を終えてしまったのでこのままでいいかなと思ってしまっています。
Vue.jsは素のHTMLが記述できるのが良いですよね。
TS採用メリット：JSよりコード量を少なくできる。見通しがよくなる。型宣言ができる。
【参考】
vue.js + typescript = vue.ts ことはじめ
TypeScriptでVue.jsを書く – Vue CLIを使った開発のポイントを紹介
カンマから解放される。Angularに書き方が似るらしい。移行の際に参考にわかりやすそう。
「開発はVue.jsでしたいけど、
Nuxt.jsの本でお世話になった花谷さんが話している。とても興味深い。
TSはオプション的に入れづらいらしい。
React+TypeScrip
ReactはFacebookが開発。HTMLがJSXでの記述になる。
JSを再学習するにも最適そうなのでぜひ試したい。
TS採用メリット：JSX(TSX)とTSの相性は最高らしい。
【参考】
なぜ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もサポートらしい。
【参考】
JavaScriptが辿った変遷
JSは動的、TSは静的
React×TypeScriptを学ぶ上で活用したい教材
※4/22追記
React
りあクト！ TypeScriptで始めるつらくないReact開発 第2版
React チュートリアル：初めてのアプリを作成して安全にする
TypeScript
プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発
おわりに
最初は、メモに書いていたのですが、予想以上に面白くなり調べまくってしまったので記事にしました。(沼)
同じようにFWにTSも含めて学習したいと思っている方に少しでも参考になれば幸いです。
