Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
Search
晴れ井戸
June 20, 2025
Technology
5
1.1k
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
2025/6/20に開催された、React Tokyo ミートアップ #6 の発表資料です
晴れ井戸
June 20, 2025
Tweet
Share
Other Decks in Technology
See All in Technology
Geminiとv0による高速プロトタイピング
shinya337
0
220
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
400
OPENLOGI Company Profile
hr01
0
67k
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
1
5.2k
Connect 100+を支える技術
kanyamaguc
0
180
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
120
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.5k
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
12k
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Visualization
eitanlees
146
16k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
A Tale of Four Properties
chriscoyier
160
23k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Done Done
chrislema
184
16k
Balancing Empowerment & Direction
lara
1
400
Side Projects
sachag
455
42k
Designing for Performance
lara
610
69k
Transcript
JSX JSXの歴史を振り返り、⾯⽩がって、エモくなろう React Tokyo ミートアップ #6 2025/6/20
⾃⼰紹介 AIでノーコードで エッジコンピューティングな ⼤学発ベンチャーの 株式会社TechSwordで インターフェースやデザインなどの ソフトウェアエンジニアを やっています 晴れ井⼾ @pal4de
JSXはインターフェースだ! インターフェースとは、 独⽴したエンティティ間の 相互作⽤を可能にする契約や規約 → 僕らもReactも独⽴したエンティティだ! → JSXはインターフェースだ!
歴史について語るのは難しいので 以後の内容は僕の解釈も混じっています 愉快なお話として聞いてください
JSXの過去
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>
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> </> ); }
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 ) ); }
JSXのご先祖様 JSXの⽂法は実はインスパイア元がある Reactを⽣んだ Facebook (現Meta) が PHP畑で提案したXHPという記法 PHPが抱えがちだったHTMLのエスケープの問題等を ⽂法的に解決することを試みた技術 PHPでも拡張を導⼊して使えるほか、PHPを拡張したHackという⾔語でも使える
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>; } }
XHPから継承した精神性 PHPやそれを拡張したXHPが採⽤した⽂法は、 “ロジックとビューは近い⽅がいいよね” という精神性を体現していると解釈できる ただしこのアプローチは複雑さに耐えきれず下⽕に...
Ruby on RailsやLaravelはその反省から テンプレートによりロジックとビューを強固に分離 ※ 雑な歴史解釈 そんな時代にReactは⽣まれ賛否の渦に揉まれる → その正しさが時を経て証明され、 現代の主要な技術の⼀つに
時代は巡るネ XHPから継承した精神性
古の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 の規格からインスパイア されている 衝撃の構⽂
余談: 影響されただけじゃないよ TypeScriptの型アサーション構⽂は昔はこんな👇だったらしい const divEl = <HTMLDivElement>el; // 今は el
as HTMLDivElement と書くヤツ TSXの対応に合わせて⽂法を変えたんだって
未来のJSX
JSXの未来が⾒える?場所 JSXの仕様はGitHubで管理されており いくつか Issue やPull Request が 寄せられている どれだけ相⼿にされてるかはわからないけど https://github.com/facebook/jsx
Support numeric attribute values https://github.com/facebook/jsx/issues/65 数値リテラルを直接 propsに書けるように してほしい! 提案の例 <img
width=800 height=500 src=”...” />
RFC: shorthand props https://github.com/facebook/jsx/issues/164 変数名とキー名とが ⼀致するときのやつ 欲しい! 提案の例 // これもいいけど
<Component foo={foo} /> // こう書けたい <Component {foo} />
Proposal: using ! prefix on attributes to set them to
false https://github.com/facebook/jsx/issues/134 フラグみたいなPropsで falseにするやつ 欲しい! 提案の例 // こう書けるなら <Component isHoge /> // こう書けたい <Component !isHoge />
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 /> // ここに</>書きたくねえ! ); }
個⼈的願望 // のコメントを! 書きてえの!!! 提案の例 <div> // FIXME: なんかデカくね? <UserIcon
/> <UserName /> </div>
感想 調べてて思ったこと
まとめない Reactは宣⾔的記述と単⼀⽅向データフローで フロントエンド実装の複雑さの克服に挑戦した。 ただ、今の時代を⾒渡してみると、 FlutterやSwift UIが特別な構⽂がなくして 似たような書き⼼地を実現している。
まとめない おそらく当時のJavaScriptの表現⼒でも 宣⾔的に記述できていたのだろうが、 設計者は⼤胆にも新しい構⽂を導⼊することを選んだ。 正直JSXのデザインの実利は「HTMLとの滑らかな接続」と「閉じタグの対応がわかりやすい」 ぐらいしかない気がする 開発チームは、⾰新的な技術としての⽬新しさが 欲しかっただけなのかもしれない。 そうじゃないかもしれない怒らないでね
まとめない それでも僕らがReactにここまで夢中になれるのは、 その⾰新的で洗練させたアプローチを印象的に伝える 懐かしくも新しい印象を与えてくれる、 JSXというもう⼀つの発明のおかげなのかもしれない。
まとめない ポエムだね
JSX JSXの歴史を振り返り、⾯⽩がって、エモくなろう React Tokyo ミートアップ #6 2025/6/20