モダンJSフレームワークのビルドプロセス 〜なぜReactは503行、Svelteは12行なのか〜

JSConf 2025 の登壇資料です。

Transcript

1. モダンJSフレームワークの ビルドプロセス なぜReactは503行、Svelteは12行なのか フロントエンド テックリード Maple
2. 登壇者紹介 Name Maple Carrier 株式会社SODA Hobby Comment ピアノ、アニメ オフライン登壇初めてです。 2
3. Agenda 1. 実測値 2. 抽象化アーキテクチャ 3. Svelteのコンパイル戦略 4. React Compilerと未来予想 3
4. 実測値 同じボタンコンポーネントが503行 , 12行になる現実 1. 4
5. Version Bundler Build Command React 19.1.1 esbuild 0.19.0 esbuild --bundle --minify --format=esm React Version Bundler Build Command Svelte 5.0.0 Vite 5.0.0 vite build --minify Svelte ビルド環境情報 5
6. ビルド前ソースコード 1 2 3 4 5 6 7 8 9 10 11 import from export default function const return button button { useState } ; () { [count, setCount] ( ); ( < onClick={() (count )}> Count: {count} </ > ); } 'react' Counter useState setCount = => + 0 1 1 2 3 4 5 6 7 < > let count = 0; </ > < on:click={() count }> Count: {count} </ > script script button button => ++ React Svelte 6
7. ほぼ同じコード... しかし、ビルドすると？ 7
8. ビルド後ソースコード 1 2 3 4 5 6 7 8 9 var var var var var var var function return __create Object.create; __defProp Object.defineProperty; __getOwnPropDesc Object.getOwnPropertyDescriptor; __getOwnPropNames Object.getOwnPropertyNames; __getProtoOf Object.getPrototypeOf; __hasOwnProp Object.prototype.hasOwnProperty; (cb, mod) () { mod ( , cb[ (cb)[ ]])((mod { exports {} }).exports, mod), mod.exports; }; = = = = = = = => || = : __commonJS __require __getOwnPropNames 0 0 1 2 3 4 5 6 7 8 9 10 11 12 13 import as from var export default function let var var $ ; root $. ( ); ($anchor) { count $. ( ); button (); text $. (button); $. (() $. (text, ${$. (count) } )); $. ( , button, () $. (count)); $. ($anchor, button); } * = = = = => ?? => 'svelte/internal/client' `<button> </button>` `Count: '' ` 'click' template Button state root child template_effect set_text get event update append 0 React 503行 Svelte 12行 8
9. 同じUIなのに、 なぜこれほど違うのか？ 9
10. この謎を解明するため、 ビルドプロセスを詳しく 見ていきましょう 10
11. 抽象化アーキテクチャ なぜ503行が必要なのか - 5つの抽象化層の詳細 2. 11
12. 第1層：Component Foundation System createElement, Component基盤、 共通ユーティリティ 第2層：JSX Transformation System JSX変換、動的コンポーネント生成、 Props管理 第3層：UI Update Optimization System UI最適化 第5層：State Management System 状態管理、副作用処理、ライフサイクル 抽象化 第4層：Rendering Control System レンダリング制御 抽象化アーキテクチャ概要 12 ※これは私がReactのビルド後コードを理解しやすくするために整理した独自の分類です
13. 第1層: Component Foundation System 目標 コンポーネントの基盤処理 を実現する 13
14. createElement: JSX→Virtual DOM Component基底クラス 開発時型チェック Context API基盤 実行時に必要な処理 React ランタイムで処理 コンパイル時で処理 テンプレート→直接DOMコード コンポーネントコンパイル TypeScript統合型チェック 自動依存追跡 同じ目標を異なる戦略で達成 Svelte VS 14
15. 第2層: JSX Transformation System 目標 JSX/テンプレートをDOMに 変換する 15
16. JSX→createElement変換 動的コンポーネント生成 Props管理と検証 実行時に必要な処理 React ランタイムで処理 コンパイル時で処理 テンプレート→DOM変換 静的コンポーネント解析 TypeScript統合型システム 同じ目標を異なる戦略で達成 Svelte VS 16
17. 第3層: UI Update Optimization System 目標 UI更新を最適化して実行する 17
18. 実行時に必要な処理 仮想DOM表現生成 Diffアルゴリズム 最小限DOM操作 React ランタイムで処理 コンパイル時で処理 コンパイル時更新解析 自動依存追跡 直接DOM操作コード生成 ゼロオーバーヘッド 同じ目標を異なる戦略で達成 Svelte VS 18
19. 第4層: Rendering Control System 目標 レンダリングのパフォーマンス を制御する 19
20. 実行時に必要な処理 中断可能レンダリング Lanes優先度管理 Fiber仮想スタック Concurrent機能 React ランタイムで処理 コンパイル時で処理 シンプルな同期更新 tick()で手動制御 直接実行 予測可能なパフォーマンス 同じ目標を異なる戦略で達成 Svelte VS 20
21. 第5層: State Management System 目標 状態管理とリアクティブ 更新を実現 21
22. 実行時に必要な処理 useState, useReducer useEffect 副作用制御 useMemo, useCallback カスタムHooks React ランタイムで処理 コンパイル時で処理 ネイティブlet/const $: リアクティブ文 自動依存追跡 JavaScript関数 同じ目標を異なる戦略で達成 Svelte VS 22
23. 異なる戦略で同じ目標を達成 23
24. Svelteのコンパイル戦略 3. 12行を実現するコンパイル時処理 24
25. 抽象化層をすべて削除する Component Foundation System JSX Transformation System UI Update Optimization System Rendering Control System State Management System 削除される5層 残る必要最小限の機能 直接DOM操作 イベントハンドラー 状態更新関数 25
26. React Compilerと未来予想 Svelte5 ,React Compiler 4. 27
27. React Compilerのアプローチ VDOMは維持 自動メモ化でVDOM差分処理を最小化 不要な再レンダリングを抑制 useMemo/useCallback/React.memoが不要に ビルド時自動最適化 26
28. 私が考えるこれまでの変遷と未来予想 2006-2014 jQuery時代 シンプルなDOM操作API プラグインエコシステムの充実 2015-2018 Virtual DOM時代 React, Vue 2が主流 ランタイム抽象化による開発者体験向上 2019-2024 Svelte, Solid.js 認知拡大 パフォーマンス重視へ回帰 ランタイムオーバーヘッドの削減 2025- ハイブリッド時代 React Compiler 既存フレームワークでコンパイル最適化を採用 28
29. Thank You! 29