2022年4月18日 りあクト！ 第5章 なぜReactはテンプレートを使わないのか（p.18~)
なぜReactはテンプレートを使わないのか
JSファースト(思想)
- ReactではJavaScriptで一貫してviewのレンダリングも行います。
- JSXはオブジェクトを生成するためのJavaScriptの純粋な式であり、フレームワークから特別扱いされることはありません。
HTML テンプレート派 AngularJS、Angular、Vue.js、Ember.js、Aurelia、Svelte など
JS ファースト派 React、Preact、Mithril、Cycle.js、hyperapp など
JSファーストのメリット
- 決まりごとが少なく、JavaScriptの表現を活用してより短いコードでコンポーネントを記述することが出来ます。
- ReactのエラーはJavaScriptのエラーのため特定がしやすいです。
- JSXが純粋な式のため、静的解析や型推論に適しているため、IDEやLintといったツールのサポートが受けやすいことに加えて、TypeScriptとの相性が良いです。
テンプレートのデメリット
- フレームワーク独自の制御構文や各種バインディングなどの暗黙の文脈が多く、決まりごとが多いことで複雑化するほど開発効率が悪くなります。
- テンプレートとロジックで分けることで、コンポーネントが肥大化したときに再分割しづらくなってリファクタリングの障害になります。
- フレームワークによるコンパイルをはさむため、エラーがわかりづらく、読み取るにはしばしば熟練の技が必要になります。
なぜReactはViewをタグツリーで表現するのか
JSファースト派のフレームワークの内、React、Preact以外はHyperSctiptというライブラリをviewのレンダリングに使っています。
HyperScript
ReactにおけるReact.createElement()のメソッドコールに相当するものを汎用的に簡略化できるライブラリです。
クライアントまたはサーバー上で、JavaScriptを使用してハイパーテキストを作成します。 https://github.com/hyperhype/hyperscript (公式より)
var h = require('hyperscript') h('div#page', h('div#header', h('h1.classy', 'h', { style: {'background-color': '#22f'} })), h('div#menu', { style: {'background-color': '#2f2'} }, h('ul', h('li', 'one'), h('li', 'two'), h('li', 'three'))), h('h2', 'content title', { style: {'background-color': '#f22'} }), h('p', "so it's just like a templating engine,\n", "but easy to use inline with javascript\n"), h('p', "the intention is for this to be used to create\n", "reusable, interactive html widgets. "))
このようにJSON形式で記述することにより冗長なタグを書かなくて済む点がメリットです。
ただし、属性を持った要素がその子として複数のテキストまたは別の要素を持ってというようなノードツリーによるデータ構造を視覚的にわかりづらいです。
JSファーストで制御ロジックにマークアップが混在するからこそ、マークアップ部分が 視認できるタグを用いた構文が好まれているようです。そのため、Reactでは、JSXを用いてUIを表現しています。
React用の各種レンダラー
HyperScriptはハイパーテキスト、つまりHTMLのみを対象にしていますが、それに対してJSXはXML全般を表現するためのものです。 各プラットフォームに合わせて具現化するためのものがレンダラーで、レンダラーの共通の記述言語がJSXです。
| レンダラー | 内訳 |
|---|---|
| React DOM | HTML DOM |
| react-test-renderer | JavaScript |
| React ART | HTML5 Canvas |
| React Native | iOSおよびAndroidのネイティブアプリケーション |
| React Native for Windows + macOS | WindowsおよびmacOSのネイティブアプリケーション |
| React 360 | ブラウザ上で動くVRアプリケーション |
| React-pdf | PDFドキュメント |
| react-theree-fiber | WebGLによる3Dグラフィック |
| React Figma | Figmaプラグイン |
| React Sketch.app | Sketchファイル |
JSXは初見ではわかりにくく感じますが、JSXを使うことのメリットを学習してきました。次章からJSXの書き方を見ていきます。
JSXを使うメリット
- JavaScriptの構文が使えます。
- タグを使うので視認性に優れています。
- ESLintの恩恵を受けられます。
- JSXはJavaScriptの構文拡張なので、条件分岐や繰り返しにJavaScriptの構文を使うことが出来ます。
- TypeScriptは言語レベルでJSXをサポートしており、
tsconfig.jsonの設定にJSXのオプションがあり、コンパイラのtscがJSXをReact.createElement()などの関数コールに変換してくれます。
関数コール(関数呼び出し)
関数呼び出しとは、プログラムから関数サブプログラムや関数ライブラリを呼び出すことである。 プログラムはいわば関数の組み合わせであるから、プログラムの処理は関数呼び出しを行いながらなされる。
