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
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
230
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1.1k
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
280
Digitization部 紹介資料
sansan33
PRO
1
4.5k
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
460
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
600
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
130
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Bash Introduction
62gerente
613
210k
Statistics for Hackers
jakevdp
799
220k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Designing Experiences People Love
moore
142
24k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
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