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
推し書籍📚 / Books and a QA Engineer
ak1210
0
120
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
360
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
230
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
2.5k
Autify Company Deck
autifyhq
2
44k
AWS CDKの仕組み / how-aws-cdk-works
gotok365
10
960
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
300
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.1k
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
160
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
770
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Docker and Python
trallard
45
3.5k
Bash Introduction
62gerente
613
210k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Become a Pro
speakerdeck
PRO
29
5.4k
Building Applications with DynamoDB
mza
95
6.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Automating Front-end Workflow
addyosmani
1370
200k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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