React と主体の一貫性

React の利点は、JSX を推奨したことによって、主体の一貫性を保持したことにある。これが React を採用する決め手となった。

廃文書 | As of 2020.8.6

主体の一貫性

データは JavaScript によって操作される。これに基づいて DOM は操作される。

React は JSX の利用を推奨する。JSX の主体は JavaScript にある。これにより、React は主体の一貫性を保持する。

Vue.js は HTML ベースのテンプレートの利用を推奨する。HTML ベースのテンプレートの主体は HTML にある。このアプローチは主体を一貫しない。

React の利点は、こうした主体の一貫性にあると我々は考えている。

HTML と JavaScript の関係

  • Angularは、HTMLとJavaScript(TypeScript)を分割してかきます。
  • Reactは、JavaScriptの中にHTMLを書きます。
  • Vueは、HTMLにJavaScriptを書きます。

2020年にJavaScriptフレームワークをちゃんとはじめるために。

React と Vue の JSX への見解の相違

React の公式ドキュメントには以下の記述がある。

UI がどのような見た目かを記述するために、React とともに JSX を使用することを私たちはお勧めしています。

(中略)

表示のためのロジックは、イベントへの応答や経時的な状態の変化、画面表示のためのデータを準備する方法といった、他の UI ロジックと本質的に結合したものであり、React はその事実を受け入れます。

マークアップとロジックを別々のファイルに書いて人為的に技術を分離するのではなく、React はマークアップとロジックを両方含む疎結合の「コンポーネント」という単位を用いて関心を分離します。

JSX の導入 | React

Vue.js でも JSX を利用することは可能である。しかし Vue.js は、JSX を代替と見なしていることが、以下の記述に見られる。

Vue ではほとんどの場合 HTML をビルドするためにテンプレートを使うことが推奨されます。しかし、JavaScript による完全なプログラミングパワーを必要とする状況もあります。そこでテンプレートへの代替で、よりコンパイラに近い描画 (render) 関数が使用できます。
描画関数と JSX | Vue.js

これらの違いが、将来にどう影響するかは定かではない。しかし、我々にとってどちらの考えが望ましいかは明白である。

React を採用した

我々は以上の観点により React を採用した。主体の一貫性は、設計及び実装上の一貫性に繋がると考えている。