※この文章はベータ版です。
JSXの問題はロジックの中にHTMLなどのレイアウト用言語のコード片
(orそのコード片を生成するコード)が埋め込まれてしまうことに
あります。
JSXはトランスパイラにより、JS的に問題のない専用の関数で
HTMLなどのレイアウト用コードを組み立てるコードに変換
されます。
昔からロジック中でHTMLを生成できるライブラリ・フレームワークが
多数、作成されてきました。
現在もRails etcのWEBアプリケーションフレームワーク(WAF)の
コントローラにおいて、用意された関数(orメソッド)群を用いてHTMLを
組み立てるコードを書くことが可能になっています。
しかし、メジャーWAFでは、ロジックの中にHTMLなどのレイアウト用言語の
コード片(orそれを組み立てるコード)を埋め込むことはメンテナンスetcの
観点から、特定のケースを除いて回避することが推奨されてきました。
ロジックの中にHTMLなどのレイアウト用言語のコード片(orそれを組み立て
るコード)を埋め込むことを、何の制限もなく、許可してしまうと、コード中
にレイアウト用言語のコード片が散逸し、コードの見通しが悪く、
レイアウトの変更が発生した場合etcに、ロジックを追いかけなければ
ならない事態になります。
ほとんどの言語やフレームワークで、ロジックの中にHTMLなどの
レイアウト用言語のコード片を埋め込むことは推奨されず、HTMLなどの
レイアウト用言語で記述するテンプレートにロジック・コードを埋め込む
スタイルが採用されてきました。
ロジックの中に埋め込むよりは、テンプレートとして切り出し、ロジックの
埋め込みを可能にするほうが問題が少ないと判断されてきたからだと思います。
ロジック中に埋め込む場合に比べ、テンプレートにロジックを埋め込む場合
は多少のオーバーヘッドがあることが多いですが、パフォーマンスに対する
要求がハイレベルな場合を除き、ロジック中に埋め込む場合におこり得る
問題の前では有意なオーバーヘッドではありません。
PHPはレイアウト言語にロジック・コードを埋め込むスタイルの仕様
でありながら、ロジックの中にレイアウト用コード片を埋め込むこむ
こともできてしまいます、が、PHPのモダンなフレームワークでは、
view用テンプレートでレイアウト用言語にロジック・コードを
埋め込み、ロジック中にレイアウト用コード片を埋め込まないスタイルを
採用しています。
HamlやSlimなど、HTMLタグを対応した関数に置き換え、
テンプレート自体をレイアウト組み立てロジックとして記述し、
実行時にHTMLに変換するテンプレート・エンジンもありますが、
エンジニア視点のみで作成されているもので、汎用性も乏しい
ので、個人的には邪道だと思っています。
HTML仕様においては、scriptタグにロジックのJSコードを集約し、script
タグ外では、タグのイベント用属性でJSコード片を埋め込める以外は
JSコードを埋め込むことはできません。
HTML仕様自体が、デザイン(レイアウト)とロジックを分離する形で
設計されています。
HTMLは元々、デザイン(レイアウト)用の言語であり、
プログラマブルではありませんでした。デザイン(レイアウト)を
動的に変更・制御したいというニーズが発生し、それに応える形で
JavaScriptが誕生、scriptタグが実装され、イベント用の属性が
追加され、HTMLは後付けでプログラマブルになったのです。
JSXの信奉者?による文章には、Vue.jsやAngularのコード例として、
入門記事では見かけるものの実際はVueやAngularにおいてバッドな
コード例とされているようなコードを引用して、JSXの優位性を主張
しているモノがありますが、
VueやAngularにおいてHTMLorHTMLテンプレート用にビルトインで
用意されているディレクティブは、それぞれのグッドなコード例のように
書けば、見通しのよいスマートなHTMLテンプレートを記述できます。
VueやAngularに用意されているディレクティブはHTMLのタグに
属性を追加する形でHTMLを拡張して、デフォルトのHTMLにはない
機能を擬似的にHTMLに追加しています。
HTMLテンプレートによるデザインとロジックの分離は、デザイナーと
エンジニアの協業だけでなく、コード全体の見通しも良く、してくれます。
HTMLなどのレイアウト用言語のコードはHTMLファイルorテンプレートに
集約し、ロジック内に埋め込まないスタイルが望ましいと個人的には
思います。
JSX etcでレイアウト用言語のコードをロジックに埋め込む際には、規約で
埋め込み可能な箇所を限定し、レイアウト用言語のコード片がロジック中に
散らばらないようにすべきです。