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
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
Coinbase™®️ USA Contact Numbers: Complete 2025 Support Guide
officialcoinbasehelpcenter
0
450
AI エージェントと考え直すデータ基盤
na0
14
4k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
3
9.7k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
460
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
170
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
4
320
shake-upを科学する
rsakata
6
630
What’s new in Android development tools
yanzm
0
380
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
170
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
Featured
See All Featured
Scaling GitHub
holman
460
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Raft: Consensus for Rubyists
vanstee
140
7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Navigating Team Friction
lara
187
15k
RailsConf 2023
tenderlove
30
1.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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