Skip to main content

[感想]コードレベルで比べるReact Angular Vue.jsを読んだ


コードレベルで比べるReact Angular Vue.js フレームワークの選択で後悔しないために
を読んだ

マスタカと言えばAndroidエンジニア
Kotlinだけやってれば良いよね
ってわけにいかなくなったのでw
触りを知ろうと思って本書を読んでみた
以下、内容


・本書の内容
React/Angular/Vueの比較を書いた本
この分野に知見がなくても本書を読めばなんとなく分かるレベルの解説にはなってる
コードが出てくるので、コードが読めることは必須。
WebFEのスキルはゼロだと無理だと思う
マスタカはjQueryだったらできるレベルだったけど理解できたから、そのレベルなら大丈夫

 

・仮想DOM
HTMLの要素をオブジェクトに変換する
そのオブジェクトの集合がDOM
DOMはwebブラウザによって表示される
JSのDOM操作は煩雑で遅いため仮想DOMが必要になった
仮想DOMはJSとブラウザAPIの間に入り煩雑さを軽減し処理を高速化します。
Angularは仮想DOMでなくインクリメンタルDOMと呼ぶ

・仮想DOMのメリット
HTML構造やイベント処理をフレームワーク独自の記述で簡単にできる
HTML要素に対する値の取得や設定が簡単にできる(データバインド)
仮想DOMで変更のあった差分のみをDOMに反映するので表示速度が向上する

 

・フレームワークの方針
React
「シンプル&軽量」の方針
コア部分を提供し他は自由選択
定番のツールやライブラリがある
Vue.js
「軽量&プログレッシブ」の方針
コア機能を提供し、他は公式オプションか自由選択
VueCLIの代わりにViteが推奨されてる
そのため公式オプションも選択の一つという扱い
Angular
「SPAに必要なすべてを提供」の方針
多くの機能を統合して提供

・Angularの記述スタイル
コンポーネントとサービスで記述する
サービスをDIにしてコンポーネントに注入する

JSってDIから遠いイメージだったけどAngularってDIしてるんやね

 

・フレームワークの選択方法
学習が目的ならVue.js。
Vue.jsが習得が楽
テンプレートよりJSX使いたいならReact
ページ埋め込みを実施したいならVue.js
シンプルなSPAならVue.js
複雑なSPAならAngular

この選択方法、全般的にReactに厳しいw
JSXの方が良い人はReactって形だと選ばない気がする。特に初見だと。
また、この流れだとVue.jsが大半は一番いいよねっていうふうに聞こえる。

 

本書はとてもためになりました。
プログラミングは知ってるけどフレームワーク考えたい人には
おすすめしたい1冊です

関連記事:

Pocket