※この文章はベータ版です。
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でレイアウト用言語のコードをロジックに埋め込む際には、規約で埋め込み可能な箇所を限定し、レイアウト用言語のコード片がロジック中に散らばらないようにすべきです。