我々はなぜ中間表現を作るのか

by iWonder118

Slide 1

Slide 1 text

我々はなぜ中間表現を作るのか in React Tokyo #9 2025/9/19

Slide 2

Slide 2 text

社内システムを改修したり、インフラを作ったり、APIを生やしたり...etc 趣味：#トンチキ技術グッズを作ったり河村直樹（@iwonder118）自己紹介

Slide 3

Slide 3 text

皆さん！中間表現といえば？？

Slide 4

Slide 4 text

よく目にする (？)中間表現 JSX 引用：https://ja.react.dev/learn/writing-markup-with-jsx

Slide 5

Slide 5 text

JSXとは JSXとは JavaScript XML の略で、JavaScriptの中にHTMLのような構文を書ける仕組み 1. 可読性が高い HTMLのようにUI構造を書けるので、フロントエンドの見通しがよくなる 2. 宣言的なUI 「何を表示したいか」をコードでそのまま表現できる

Slide 6

Slide 6 text

Slide 7

Slide 7 text

つまり YAMLやJSONで仕様書を書いているに過ぎない（暴論）何ならJava、C#関係の設定ファイルはXML。それを書いているのと同じ... あれだけデータ通信で憎み、JSONに追いやられたXMLを我々は書いている矛盾 JSXを書くということは......

Slide 8

Slide 8 text

もう一例 Fiber Tree JSX Fiber Tree(イメージ)

Slide 9

Slide 9 text

Fiber Treeとは JSXから作成した React Elementの木構造を内部構造に最適化したもの 1. 状態管理を内包各ノードが props・state・更新キューを持ち、コンポーネントの状態を追跡できる 2. 差分計算の単位新旧の Fiber Tree を比較して、更新が必要な部分だけを効率的に抽出する 3. スケジューリング可能優先度情報を持ち、重たい更新を分割したり後回しにすることで UI を滑らかに保つ child・sibling・return の参照を持ち、木を巡回しながら中断・再開できる

Slide 10

Slide 10 text

両者の共通点 1. AとBそれぞれの中間においての抽象化を行っている一方向ではなかったりも（可逆性ある場合） A B 中間表現 2. AとBの間に入ることで依存度を下げて、疎結合にしているつまり Interface…. 　　副次的に疎結合であるからこその拡張性が獲得できている

Slide 11

Slide 11 text

相違点逆に目的が違う JSX = 認知負荷を下げたい　　Fiber Tree = 効率的な仮想DOMのレンダリング人 DOM JSX Fiber Tree React 仮想 DOM etc… React Element

Slide 12

Slide 12 text

他の事例（言語） - TypeScript - 我々の素晴らしい表現力 ()で悪魔のJavaScriptを従えさせさせる契約文 ※意訳 - 安全なJavaScriptの生成のためのスーパーセットとしてのAltJS - コンパイラ (例としてC言語) - 高級言語を機械語へ変換するためにアセンブラを挟んでいる - JVM系 - 言語とJVMのJavaバイトコードを挟んで機械語を動かしている - そのお陰でKotlin、Scala、Groovyが存在している。さすがJavaバイトコード - WASM(Web Assembly) - 多言語を中間の機械言語を介し、バイナリをブラウザで動かす

Slide 13

Slide 13 text

他の事例（設計） ※これはどちらかというと中間”層”として - Webの3層構造 - フロントから見た場合、サーバサイドがDBの中間表現(処理)となっている - DDD(ドメイン駆動設計 ) - ドメイン知識をコードとして表現することで、ドメインエキスパートと技術者間の業務に対する共通理解を形成 - ACL(腐敗防止層 ) - それぞれの関心事を中間層のオブジェクトを挟むことによって、分離をしている - BFF - クライアントごとに最適化された API を提供する

Slide 14

Slide 14 text

他の事例（インフラ） - IaC - 想像しているインフラをYAMLやJSONなどで起こし、それをツールを通すことで実態としてのクラウドインフラができる - Kubernetes - あらかじめ決められた構成をSpecのYAMLで作成し、Kubernetes APIを通すことで実態としてのコンテナがオーケストレーションされる - DNS - 人間が認知できるように名前をIPアドレスにつける - CPUの命令セット (ISA) - x86-64のバイナリがx86の命令セットを使うことで、IntelやAMDなどのCPUが使える

Slide 15

Slide 15 text

他の事例（現実） - お金 - AさんとBさんの価値交換を共通の数値で表す表現 - 言語 - 自分の認知と物体を他者に伝えるための表現 - 足の追加板を机と認知しているがそれを他者にも同じ概念で伝えるために「机」という単語を使う - etc… - このスライドも僕の考えの抽象化と聞き手の理解のための中間表現(オチ)

Slide 16

Slide 16 text

結論(暴論2) この世は中間表現でできている