JSX - 歴史を振り返り、⾯⽩がって、エモくなろう

2025/6/20に開催された、React Tokyo ミートアップ #6 の発表資料です

Transcript

1. JSX JSXの歴史を振り返り、⾯⽩がって、エモくなろう React Tokyo ミートアップ #6 2025/6/20
2. ⾃⼰紹介 AIでノーコードで エッジコンピューティングな ⼤学発ベンチャーの 株式会社TechSwordで インターフェースやデザインなどの ソフトウェアエンジニアを やっています 晴れ井⼾ @pal4de
3. JSXはインターフェースだ！ インターフェースとは、 独⽴したエンティティ間の 相互作⽤を可能にする契約や規約 → 僕らもReactも独⽴したエンティティだ！ → JSXはインターフェースだ！
4. 歴史について語るのは難しいので 以後の内容は僕の解釈も混じっています 愉快なお話として聞いてください
5. JSXの過去
6. React以前のコード jQueryを例に 状態とUIの関係性を 命令的に記述 ⼿順書のイメージ <button id="counter">Click me</button> <span id="count-display">Count: 0</span> <script> let count = 0; $('#counter').on('click', function () { count += 1; // 表示更新（忘れるとバグ） $('#count-display').text('Count: ' + count); // ボタンの文言も変えたい？ じゃあここも… $('#counter').text('Clicked!'); }); </script>
7. Reactならこう 状態とUIの関係性は Reactが賢く管理 ⼿順書の⾊が弱まり、 ロジックとUIの構造が 俯瞰しやすい import React from 'react'; function Counter() { const [count, setCount] = React.useState(0); return ( <> <button onClick={()=> setCount(count + 1)}> {count === 0 ? 'Click me' : 'Clicked!'} </button> <span>Count: {count}</span> </> ); }
8. JSX抜きならこう UIと状態の分離は できてるけど、 構造が 読み取りにくくなった import React from 'react'; function Counter() { const [count, setCount] = React.useState(0); return React.createElement( React.Fragment, null, React.createElement( 'button', { onClick: () => setCount(count + 1) }, count === 0 ? 'Click me' : 'Clicked!' ), React.createElement( 'span', null, 'Count: ', count ) ); }
9. JSXのご先祖様 JSXの⽂法は実はインスパイア元がある Reactを⽣んだ Facebook (現Meta) が PHP畑で提案したXHPという記法 PHPが抱えがちだったHTMLのエスケープの問題等を ⽂法的に解決することを試みた技術 PHPでも拡張を導⼊して使えるほか、PHPを拡張したHackという⾔語でも使える
10. XHPの雰囲気 Reactの Class Componentみが ある 勿論このコードはリアクティブに 動かないよ <?hh // strict class :ui:counter extends :x:element { attribute int count = 0; protected function render(): \XHPRoot { $count = $this->:count; return <div> <button onclick="incrementCount()"> {$count === 0 ? 'Click me' : 'Clicked!'} </button> <span> {'Count: ' . $count} </span> </div>; } }
11. XHPから継承した精神性 PHPやそれを拡張したXHPが採⽤した⽂法は、 “ロジックとビューは近い⽅がいいよね” という精神性を体現していると解釈できる ただしこのアプローチは複雑さに耐えきれず下⽕に...
12. Ruby on RailsやLaravelはその反省から テンプレートによりロジックとビューを強固に分離 ※ 雑な歴史解釈 そんな時代にReactは⽣まれ賛否の渦に揉まれる → その正しさが時を経て証明され、 現代の主要な技術の⼀つに 時代は巡るネ XHPから継承した精神性
13. 古のECMAScript からも var library = <library> <book id="a"> <title>JSX入門</title> </book> <book id="b"> <title>E4Xの逆襲</title> </book> </library>; var selected = library.book.(@id == "b"); print(selected.title); // → “E4Xの逆襲” var empty = <></>; // コンストラクタの構文 // 勿論今は使えないよ Reactのフラグメント構⽂<></>は、 E4Xという古いECMAScript の規格からインスパイア されている 衝撃の構⽂
14. 余談: 影響されただけじゃないよ TypeScriptの型アサーション構⽂は昔はこんな👇だったらしい const divEl = <HTMLDivElement>el; // 今は el as HTMLDivElement と書くヤツ TSXの対応に合わせて⽂法を変えたんだって
15. 未来のJSX
16. JSXの未来が⾒える？場所 JSXの仕様はGitHubで管理されており いくつか Issue やPull Request が 寄せられている どれだけ相⼿にされてるかはわからないけど https://github.com/facebook/jsx
17. Support numeric attribute values https://github.com/facebook/jsx/issues/65 数値リテラルを直接 propsに書けるように してほしい！ 提案の例 <img width=800 height=500 src=”...” />
18. RFC: shorthand props https://github.com/facebook/jsx/issues/164 変数名とキー名とが ⼀致するときのやつ 欲しい！ 提案の例 // これもいいけど <Component foo={foo} /> // こう書けたい <Component {foo} />
19. Proposal: using ! prefix on attributes to set them to false https://github.com/facebook/jsx/issues/134 フラグみたいなPropsで falseにするやつ 欲しい！ 提案の例 // こう書けるなら <Component isHoge /> // こう書けたい <Component !isHoge />
20. Proposal: ability to return multiple children by auto-wrapping them into a Fragment https://github.com/facebook/jsx/issues/131 フラグメント省略 してえ！ これはもうcloseされてしまった 提案の例 function Component () { return ( // ここに<>書きたくねえ！ <button /> <dialog /> // ここに</>書きたくねえ！ ); }
21. 個⼈的願望 // のコメントを！ 書きてえの！！！ 提案の例 <div> // FIXME: なんかデカくね？ <UserIcon /> <UserName /> </div>
22. 感想 調べてて思ったこと
23. まとめない Reactは宣⾔的記述と単⼀⽅向データフローで フロントエンド実装の複雑さの克服に挑戦した。 ただ、今の時代を⾒渡してみると、 FlutterやSwift UIが特別な構⽂がなくして 似たような書き⼼地を実現している。
24. まとめない おそらく当時のJavaScriptの表現⼒でも 宣⾔的に記述できていたのだろうが、 設計者は⼤胆にも新しい構⽂を導⼊することを選んだ。 正直JSXのデザインの実利は「HTMLとの滑らかな接続」と「閉じタグの対応がわかりやすい」 ぐらいしかない気がする 開発チームは、⾰新的な技術としての⽬新しさが 欲しかっただけなのかもしれない。 そうじゃないかもしれない怒らないでね
25. まとめない それでも僕らがReactにここまで夢中になれるのは、 その⾰新的で洗練させたアプローチを印象的に伝える 懐かしくも新しい印象を与えてくれる、 JSXというもう⼀つの発明のおかげなのかもしれない。
26. まとめない ポエムだね
27. JSX JSXの歴史を振り返り、⾯⽩がって、エモくなろう React Tokyo ミートアップ #6 2025/6/20