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.2k
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
2025/6/20に開催された、React Tokyo ミートアップ #6 の発表資料です
晴れ井戸
June 20, 2025
Tweet
Share
More Decks by 晴れ井戸
See All by 晴れ井戸
怖くない!GritQLでBiomeプラグインを作ろうよ
pal4de
1
180
Other Decks in Technology
See All in Technology
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
1
220
DeNA での思い出 / Memories at DeNA
orgachem
PRO
2
900
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
290
Goでマークダウンの独自記法を実装する
lag129
0
210
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.1k
知られざるprops命名の慣習 アクション編
uhyo
10
2.2k
.NET開発者のためのAzureの概要
tomokusaba
0
230
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
5
500
いま、あらためて考えてみるアカウント管理 with IaC / Account management with IaC
kohbis
2
670
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.7k
人を動かすことについて考える
ichimichi
2
320
Featured
See All Featured
Docker and Python
trallard
45
3.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
Building an army of robots
kneath
306
46k
Why Our Code Smells
bkeepers
PRO
338
57k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
We Have a Design System, Now What?
morganepeng
53
7.7k
Documentation Writing (for coders)
carmenintech
73
5k
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