Vue公式ガイド読解メモ-他のフレームワークとの比較(React)

今日は「他のフレームワークとの比較」を読みます。

Vue,Reactの違いは気になるなぁ。

世界的には、Reactの方が使われてるぽいですよね。

www.publickey1.jp

前置き

• VueのコアチームなのでVueが好き
• 偏見を避けるために多くの努力を費やしてる(比較している)
• JSの世界は速く動いているので、正確でない記述があったらissueを上げてほしい

とりあえず、興味があるのはReactとの比較かな、そこはじっくり読んで、ほかはさらっと読もう

React

ReactとVueには多くの類似点がある

• 仮想DOMを活用している
• リアクティブで組み合わせ可能なビューのコンポーネントを提供している
• コアライブラリに焦点をあてることに努めている
  • ルーティングやグローバルの状態管理のような関心事は関連ライブラリの担当

大分似てますね。若干記述が古い可能性があるので、近々刷新予定とのこと。（近々っていつのことだ、この刷新は行われなかったのかな）

実行性能

• どちらも非常に早い
  • 決定要因にならないかも

最適化の取り組み

• Reactはコンポーネントの状態が変化するとき、そのコンポーネントをルートとして、コンポーネントのサブツリー全体を再描画する
  • 不要な子コンポーネントの再レンダリングを避けるために、注意して実装する必要がある
• Vueはコンポーネントの依存関係が描画中に自動的に追跡されるので、再描画の必要性をVueが正確に認識できる
  • 開発者が最適化を意識する必要がない

これは、今もそうなのかな。

HTML & CSS

ReactのJSXとvueのtemplateの比較。

Reactでは、全てのものはJSらしい。HTMLもCSSもJS内に置かれる。(vueのSFCと何が違うんでしょうか)

JSX vs Templates

• 全てのコンポーネントはJSXを用いた描画関数(render)のなかでUIを表現する
• 完全なプログラミング言語の力を活用しビューを構築できる
• JSXのためのツールのサポートはVueのテンプレートで利用可能なものよりいくつかの点で優れている
  • どの点？
• Vueは、描画関数とJSXサポートを備える
• より単純な代替手段としてテンプレートを提供している
  • すべての有向なHTMLは有向なVueテンプレートでもある
  • HTMLを使って作業している開発者にとって自然
  • HTMLベースなので、既存アプリを徐々に移行するのが簡単

ふーむ。まるっとまとめると、HTMLベースなので、とっつきやすいし、部分的な導入がしやすいよ、ということかな。

SFCをを利用して、ゼロから既存のアプリをガッツリ作る場合は、どっちも変わらん、イメージなのだろうか。(それでもReactは敷居が高いと聞く気がするが)

• JSX,テンプレートどちらも、DSLを覚える必要はある
  • JSXはプレーンなJSでに基づく拡張構文
  • テンプレートはプレーンなHTMLに基づく拡張構文

より高いレベルでは、コンポーネントをプレゼンテーション用と論理用の 2 つのカテゴリに分けることができます。私たちは、プレゼンテーション用のコンポーネントにはテンプレートを使用し、論理用のものには描画関数 / JSX を使用することをお勧めします。これらのコンポーネントの割合は、作成しているアプリケーションのタイプによって異なりますが、一般的にプレゼンテーション用のものの方がはるかに多く見られます。

これは、どういうことだろうか。

• プレゼンテーション(ビュー？)に関わるものは、テンプレート
• 論理用のものには描画関数/JSX

抽象的でUIを構築しないコンポーネントの基礎となるロジックは、描画関数で書くのが推奨、みたいな意味だろうか。

コンポーネントスコープCSS( Scoped CSS)

CSSのスコープを限定する話がメインかな。

• Reactの場合はCSS-in-JSソリューションを使う

  • 通常のCSS作成プロセスと異なる新しいコンポーネント志向のスタイルパラダイム
  • ビルド時に単一のスタイルシートに抽出できるが、スタイルが正しく機能するにはランタイムをバンドルに含める必要がある
    • 正しく機能させるJSのロジックを含める必要があるってことかな
  • トレードオフの多くは、バンドルサイズとランタイムのコストが増加すること

• Vueの場合はSFCのstyleタグに任意の「scoped」属性が使える。

  • 該当のコンポーネント内に閉じたCSSが適用できる
  • 動的に一意キーが付与される
• vue-loader経由でどのようなプリプロセッサ、ポストプロセッサとの深い統合ができる

これは、Reactの記法を知らないとピンと来ないだろな。バンドルサイズとランタイムコストという面で、Vueの方が良いのかな。

規模

スケールアップ

• 大きなアプリのためにVueもReactも強力なルーティングの解法を提供している
• Reactは状態管理という観点でとても革新的な解法を持っている
  • Flux/Redux
• Redux自体は簡単にVueアプリと統合することができる
• Vueはこのモデルを一歩進めたVuexというVueと深く統合された状態管理の解法を持っている
• Vueにおける状態管理やルーティングはすべて公式にサポートされている
  • Reactはコミュニティにまかせている
    • 良し悪しはあるらしい
• VueはCLIによるプロジェクト生成ツールを提供している
• Reactにもcreate-react-appがあるが制限がある
  • プロジェクト作成時にいかなる設定もできない(Vueはできる)
  • SPAの構築を想定した１つのテンプレートしか提供していない
  • ユーザーが作ったプリセットからプロジェクトを生成できない

でも、これは哲学の違いらしく、create-react-appの優位性もある。（どんな？）

詳しくは以下とのこと。

github.com

スケールダウン

• Reactは急な学習曲線で有名
  • 本当に始めることができるようになるまでJSXとES2015+について知る必要がある
    • Reactがclass構文を使っているから
  • ビルドシステムについて学ぶ必要がある
    • コードをブラウザでその場でコンパイルできるが、プロダクション環境には適していない（そりゃそうだな)
• Vueは規模を大きくもできるが小さくもできる。(jQueryのように、一部だけ適用とかできる)

ページの中に1つのscriptタグを放り込むだけでよい

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

スケールダウンできるは、大きなポイントかも、Vueの設計思想としても。だから、テンプレートにHTMLのdomのIDを指定することもできるんだろうな。

これも、逆にガッツリ作るなら、Vueである必要は無い、ということかな。(Vueでも良いけど)

ネイティブレンダリング

• ReactにはReact Nativeがあり、Reactコンポーネントモデルを使って、iOSやAndroidのネイティブ描画を行うアプリを書くことができる
• Vueは、Weexと公式に協業している
  • Weexはアリババグループで作られている
  • Weexはまだ熟していないし、実際に使われているわけではない

この点では、Reactに分がありそうですね。

MobXと用いた場合

これなんだ？？ - Reqct + MobXの流れはより冗長なVueとして考えることができる

mobx.js.org

ふーむ、MobXとは状態管理ライブラリらしい。

Preactとその他のReqct系ライブラリ

• React系のライブラリはたいていAPIとエコシステムの多くをなるべくReactと共有しようとする
• 上に上げた比較の大部分はライブラリにも当てはまる
• ただし、Reactと比べてエコシステムの規模が小さい

これらのライブラリが React のエコシステムのすべてと 100 パーセントの互換性を持つことは無いはずですから、いくつかのツールや関連ライブラリは使用できないかもしれません。あるいは、うまく動いているように見えたとしても、その React 系ライブラリが React と同等に公式にサポートされていない限りは、いつ壊れないとも限りません。

ふむふむ。Reactと同じ方針で動こうとしているけど、エコシステムが小さいから、うまく追従できてないかもよ。公式サポートと同等のちからいれないと、いつ壊れるかわからないよ、ということかな。

まぁ、小さいといっても、Reactがかなりシェア取っていると、簡単に壊れるイメージは無いが、実際どうなんでしょうね。

一旦、Reactとの比較は以上、あとは、AngularJSなどの比較なので、メモは一旦いいかな。

（気が向いたら、追記しよう)

次は「Vue.jsコミュニティへ参加しましょう！」を読みます！