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
我々はなぜ中間表現を作るのか
Search
iWonder118
September 21, 2025
Technology
0
670
我々はなぜ中間表現を作るのか
iWonder118
September 21, 2025
Tweet
Share
More Decks by iWonder118
See All by iWonder118
OODAループを回すVibe_Coding.pdf
iwonder118
0
11
Reactで見る!純粋関数で深ぼる副作用
iwonder118
0
510
花開くWebAssembly(Wasm)の可能性 in 2025/06/21 まさるの勉強会
iwonder118
0
6
SSG___CSRで乗り切るiframe内ルーティング_AIコーディング拡張版_in_Funabashi.dev.pdf
iwonder118
0
39
SSG + CSRで乗り切るiframe内ルーティング in React Tokyo LT 2025_05_17
iwonder118
0
4
React ToDoアプリをClineで作りながら考える フロントエンドエンジニアは AIによってなくなるのか?
iwonder118
1
1.1k
手軽に始めるDuckDB
iwonder118
0
31
開発においての気配り
iwonder118
1
17
Other Decks in Technology
See All in Technology
Kubernetes self-healing of your workload
hwchiu
0
350
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
820
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
1
440
React19.2のuseEffectEventを追う
maguroalternative
2
590
「魔法少女まどか☆マギカ Magia Exedra」のIPのキャラクターを描くための3Dルック開発
gree_tech
PRO
0
140
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
160
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.2k
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
120
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
310
事業開発におけるDify活用事例
kentarofujii
4
1.2k
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
130
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Unsuck your backbone
ammeep
671
58k
YesSQL, Process and Tooling at Scale
rocio
173
15k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Balancing Empowerment & Direction
lara
5
700
The Art of Programming - Codeland 2020
erikaheidi
56
14k
How GitHub (no longer) Works
holman
315
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Transcript
我々はなぜ中間表現を作るのか in React Tokyo #9 2025/9/19
社内システムを改修したり、インフラを作ったり、APIを生 やしたり...etc 趣味:#トンチキ技術グッズを作ったり 河村 直樹(@iwonder118) 自己紹介
皆さん!中間表現といえば??
よく目にする (?)中間表現 JSX 引用:https://ja.react.dev/learn/writing-markup-with-jsx
JSXとは JSXとは JavaScript XML の略で、JavaScriptの中にHTMLのような構文を書 ける仕組み 1. 可読性が高い HTMLのようにUI構造を書けるので、フロントエンドの見通しがよくなる 2.
宣言的なUI 「何を表示したいか」をコードでそのまま表現できる
JSXとは JSXとは JavaScript XML の略で、JavaScriptの中にHTMLのような構文を書 ける仕組み 1. 可読性が高い HTMLのようにUI構造を書けるので、フロントエンドの見通しがよくなる 2.
宣言的なUI 「何を表示したいか」をコードでそのまま表現できる
つまり YAMLやJSONで仕様書 を書いているに過ぎない(暴論) 何ならJava、C#関係の設定ファイルはXML。それを書いているのと同じ... あれだけデータ通信で憎み、JSONに追いやられたXMLを我々は書いている矛盾 JSXを書くということは......
もう一例 Fiber Tree JSX Fiber Tree(イメージ)
Fiber Treeとは JSXから作成した React Elementの木構造を内部構造に最適化したもの 1. 状態管理を内包 各ノードが props・state・更新キューを持ち、コンポーネントの状態を追跡できる 2.
差分計算の単位 新旧の Fiber Tree を比較して、更新が必要な部分だけを効率的に抽出する 3. スケジューリング可能 優先度情報を持ち、重たい更新を分割したり後回しにすることで UI を滑らかに保 つ child・sibling・return の参照を持ち、木を巡回しながら中断・再開できる
両者の共通点 1. AとBそれぞれの中間においての抽象化を行っている 一方向ではなかったりも(可逆性ある場合) A B 中間表現 2. AとBの間に入ることで依存度を下げて、疎結合にしている つまり
Interface…. 副次的に疎結合であるからこその拡張性が獲得できている
相違点 逆に目的が違う JSX = 認知負荷を下げたい Fiber Tree = 効率的な仮想DOMのレンダリング 人 DOM
JSX Fiber Tree React 仮想 DOM etc… React Element
他の事例(言語) - TypeScript - 我々の素晴らしい表現力 ()で悪魔のJavaScriptを従えさせさせる契約文 ※意訳 - 安全なJavaScriptの生成のためのスーパーセットとしてのAltJS -
コンパイラ (例としてC言語) - 高級言語を機械語へ変換するためにアセンブラを挟んでいる - JVM系 - 言語とJVMのJavaバイトコードを挟んで機械語を動かしている - そのお陰でKotlin、Scala、Groovyが存在している。さすがJavaバイトコー ド - WASM(Web Assembly) - 多言語を中間の機械言語を介し、バイナリをブラウザで動かす
他の事例(設計) ※これはどちらかというと中間”層”として - Webの3層構造 - フロントから見た場合、サーバサイドがDBの中間表現(処理)となっている - DDD(ドメイン駆動設計 ) -
ドメイン知識をコードとして表現することで、ドメインエキスパートと技術者間の業務 に対する共通理解を形成 - ACL(腐敗防止層 ) - それぞれの関心事を中間層のオブジェクトを挟むことによって、分離をしている - BFF - クライアントごとに最適化された API を提供する
他の事例(インフラ) - IaC - 想像しているインフラをYAMLやJSONなどで起こし、それをツールを通すことで 実態としてのクラウドインフラができる - Kubernetes - あらかじめ決められた構成をSpecのYAMLで作成し、Kubernetes
APIを通すこ とで実態としてのコンテナがオーケストレーションされる - DNS - 人間が認知できるように名前をIPアドレスにつける - CPUの命令セット (ISA) - x86-64のバイナリがx86の命令セットを使うことで、IntelやAMDなどのCPUが使 える
他の事例(現実) - お金 - AさんとBさんの価値交換を共通の数値で表す表現 - 言語 - 自分の認知と物体を他者に伝えるための表現 -
足の追加板を机と認知しているがそれを他者にも同じ概念で伝えるために 「机」という単語を使う - etc… - このスライドも僕の考えの抽象化と聞き手の理解のための中間表現(オチ)
結論(暴論2) この世は中間表現でできている