7839

雑草魂エンジニアブログ

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

技術 React Vue.js

日本・アジア圏では、Vue.jsは人気があるように観測されるが、実際にグローバルな視点でみると、Reactが圧倒的に人気・シェアがある。npmtrends.comでnpm installされている数を比較してみる。

f:id:serip39:20200709210233p:plain

NPM Trends: Compare NPM package downloads

数字でみても、Vue.jsとReactでは圧倒的な差がある。

これまで、私もVue.jsでの開発案件が多かったこともあり、Vue.jsばかりを使ってきて、Reactにあまり触れてこなかった。今回、Reactの開発案件に携わることになったので、Vue.jsエンジニアのReact入門として、Vue.jsとReactの違い、Reactの機能などをこれからまとめていく。同じようなVue.jsエンジニアでReactにチャレンジしようと思っていた人の一助になればと。

まずは、それぞれのフレームワークの特徴から、大枠を掴むこととする。

Vue.jsとは

まずは、これまで学習してきたVue.jsに関して、概要をまとめる。

jp.vuejs.org

公式のVue.jsの説明文の一文は以下の通りである。

Vueはユーザーインターフェイスを構築するためのプログレッシブフレームワークです。

プログレッシブフレームワークとは、英語の意味から考えると、「Progressive」には「進歩的、革新的、段階的な」という意味があり、直訳すると「革新的なフレームワーク」である。これは、Vue.jsの開発者であるEvan You氏が提唱している概念である。技術の進歩が早い現代において、アプリケーションの解決したい様々な要求に対して、どのような規模、段階のアプリケーションに対しても、適切なライブラリやツールを導入することで対応できる柔軟性を持ち合わせるフレームワークのことである。Vue.jsの特徴的な機能を3つあげる。

そして、興味深いことに、Vue.jsの公式にReactとの対比が記載されていた。

jp.vuejs.org

共通点

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

相違点

  • DOM描画ロジック
    React
    コンポーネントの状態が変化するとき、そのコンポーネントをルートとして、コンポーネントのサブツリー全体を再描画する。不要な子コンポーネントの再レンダリングを避けるための対策が必要。
    Vue.js
    コンポーネントの依存関係が描画中に自動的に追跡されるため、システムは状態が変化したときに実際にどのコンポーネントを再描画する必要があるか正確に認識する。

  • HTML & CSS
    React
    React は、すべてが JavaScript である。すべてのコンポーネントは JSX を用いた 描画関数 (render) の中で、HTML構造の UI を表現する。また、CSS のスコープを限定するときに、CSS-in-JSという新しい概念が必要である。

    Vue.js
    Vueは、HTML ベースのテンプレートで実装が可能である。HTML に v-if v-for などの制御用のコードとして JavaScript の断片を埋め込むだけであり、HTMLが主である。また、単一ファイルコンポーネントのスタイリングも、非常に柔軟に対応が可能である。

  • 関連ライブラリの拡張性
    React
    React はこのような関心事はコミュニティにまかせており、より断片的なエコシステムを作り上げている。そのため、関連ライブラリは大衆的であるが、React のエコシステムは Vue を大きく上回って豊かである。

    Vue.js
    Vue における状態管理やルーティングのための関連ライブラリ等はすべて公式にサポートされていて、コアのライブラリとともに更新され続けている。

Reactとは

次に、Reactの公式ドキュメントをみてみる。

ja.reactjs.org

一行目には以下の記載がある。

React はユーザインターフェースを作成する為の JavaScript のライブラリです。

Vue.js と対比して、Vue.js は「フレームワーク」と明示されていたが、React の場合は「JavaScript のライブラリ」と記載されている。先ほどの Vue.js の相違点でも記載があったが、React は全てが JavaScript で記述され、 JSX という JavaScript の中にHTMLを埋め込むことができる構文を用いる。そのため、ライブラリと表現していると思われる。

まとめ

今回は、公式ドキュメントを読んで、Vue.js と React の対比をしてみた。次からは、実装ベースでまとめを行っていく。

最後に、React の公式ドキュメントで大切な考えが記載されていたので、自分への戒めも含め、記載しておく。

コードは書くよりも読むことのほうが多いこと、そしてモジュール化されていて明示的であるコードはより読みやすいということを思い出してください。大規模なコンポーネントのライブラリを構築し始めると、この明示性やモジュール化しやすさのありがたみが分かり始めます。そしてコードを再利用できるようになるにつれて、あなたが書くコードの行数は減っていくのです。:) React の流儀 – React