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

Transcript

1. 我々はなぜ中間表現を作るのか in React Tokyo #9 2025/9/19
2. 社内システムを改修したり、インフラを作ったり、APIを生 やしたり...etc 趣味：#トンチキ技術グッズを作ったり 河村 直樹（@iwonder118） 自己紹介
3. 皆さん！中間表現といえば？？
4. よく目にする (？)中間表現 JSX 引用：https://ja.react.dev/learn/writing-markup-with-jsx
5. JSXとは JSXとは JavaScript XML の略で、JavaScriptの中にHTMLのような構文を書 ける仕組み 1. 可読性が高い HTMLのようにUI構造を書けるので、フロントエンドの見通しがよくなる 2. 宣言的なUI 「何を表示したいか」をコードでそのまま表現できる
6. JSXとは JSXとは JavaScript XML の略で、JavaScriptの中にHTMLのような構文を書 ける仕組み 1. 可読性が高い HTMLのようにUI構造を書けるので、フロントエンドの見通しがよくなる 2. 宣言的なUI 「何を表示したいか」をコードでそのまま表現できる
7. つまり YAMLやJSONで仕様書 を書いているに過ぎない（暴論） 何ならJava、C#関係の設定ファイルはXML。それを書いているのと同じ... あれだけデータ通信で憎み、JSONに追いやられたXMLを我々は書いている矛盾 JSXを書くということは......
8. もう一例 Fiber Tree JSX Fiber Tree(イメージ)
9. Fiber Treeとは JSXから作成した React Elementの木構造を内部構造に最適化したもの 1. 状態管理を内包 各ノードが props・state・更新キューを持ち、コンポーネントの状態を追跡できる 2. 差分計算の単位 新旧の Fiber Tree を比較して、更新が必要な部分だけを効率的に抽出する 3. スケジューリング可能 優先度情報を持ち、重たい更新を分割したり後回しにすることで UI を滑らかに保 つ child・sibling・return の参照を持ち、木を巡回しながら中断・再開できる
10. 両者の共通点 1. AとBそれぞれの中間においての抽象化を行っている 一方向ではなかったりも（可逆性ある場合） A B 中間表現 2. AとBの間に入ることで依存度を下げて、疎結合にしている つまり Interface…. 　　 副次的に疎結合であるからこその拡張性が獲得できている
11. 相違点 逆に目的が違う JSX = 認知負荷を下げたい　　Fiber Tree = 効率的な仮想DOMのレンダリング 人 DOM JSX Fiber Tree React 仮想 DOM etc… React Element
12. 他の事例（言語） - TypeScript - 我々の素晴らしい表現力 ()で悪魔のJavaScriptを従えさせさせる契約文 ※意訳 - 安全なJavaScriptの生成のためのスーパーセットとしてのAltJS - コンパイラ (例としてC言語) - 高級言語を機械語へ変換するためにアセンブラを挟んでいる - JVM系 - 言語とJVMのJavaバイトコードを挟んで機械語を動かしている - そのお陰でKotlin、Scala、Groovyが存在している。さすがJavaバイトコー ド - WASM(Web Assembly) - 多言語を中間の機械言語を介し、バイナリをブラウザで動かす
13. 他の事例（設計） ※これはどちらかというと中間”層”として - Webの3層構造 - フロントから見た場合、サーバサイドがDBの中間表現(処理)となっている - DDD(ドメイン駆動設計 ) - ドメイン知識をコードとして表現することで、ドメインエキスパートと技術者間の業務 に対する共通理解を形成 - ACL(腐敗防止層 ) - それぞれの関心事を中間層のオブジェクトを挟むことによって、分離をしている - BFF - クライアントごとに最適化された API を提供する
14. 他の事例（インフラ） - IaC - 想像しているインフラをYAMLやJSONなどで起こし、それをツールを通すことで 実態としてのクラウドインフラができる - Kubernetes - あらかじめ決められた構成をSpecのYAMLで作成し、Kubernetes APIを通すこ とで実態としてのコンテナがオーケストレーションされる - DNS - 人間が認知できるように名前をIPアドレスにつける - CPUの命令セット (ISA) - x86-64のバイナリがx86の命令セットを使うことで、IntelやAMDなどのCPUが使 える
15. 他の事例（現実） - お金 - AさんとBさんの価値交換を共通の数値で表す表現 - 言語 - 自分の認知と物体を他者に伝えるための表現 - 足の追加板を机と認知しているがそれを他者にも同じ概念で伝えるために 「机」という単語を使う - etc… - このスライドも僕の考えの抽象化と聞き手の理解のための中間表現(オチ)
16. 結論(暴論2) この世は中間表現でできている