HRC_Frontend_Conference_Fukuoka_2026.pdf

HRC 速さを追い求めたら、HTMLになった Studioのデザインデータから、公開サイトのHTMLを生成するエンジン。菅原孝則フロントエンドカンファレンス福岡 2026

自己紹介菅原孝則 Studioの古参エンジニアコロナ禍に海外で2年間暮らして。コロナ明けに福岡に引越し。 2 x.com/oligin020

コードを書かずに、 Webサイトを作って公開。デザインから公開まで、ひとつのツールで。 3

今日のお話速さを追い求めた、エンジン刷新の2年半。作り直す決断設計と互換性の試行錯誤ヘルシーなインターネットへ 4 HRC Studioのデザインデータを HTML
/ CSSに変換する。デザインデータ JSON ↓ HTML / CSS 公開サイト

20万超 Studioがホスティングする規模サイトごとに違う、見た目と動きを守る。公開サイト現在のホスティング規模基盤の変更が、個々のサイトに影響する。 5 公開サイトの基盤

実際に、 Studioを操作してみます。 6

Studioが掲げてきた志グローバルに通用するツールを作る。 7 第1章｜作り直す決断

10年も機能追加してたら流石に公開サイトが重くなる作る側表現力が増える見る側は、待つ 8

2021年、公共サイトの保存で困った公開サイト SPAは自動アーカイブの対象外、と説明を受けた 9 Webアーカイブ

本文を読む前に、ブラウザの仕事がある受信したHTML <body> </body> JSON + JavaScript 解釈・組み立て本文を表示
10

白紙でも、80点くらい。 Lighthouseで測った、当時の公開サイト 80 500KB超表示前に読むJavaScript 11 点くらい

いろいろあって、高速化＆MPA化にチャレンジしてみた。 12

最初の高速化は、6か月で凍結 6 開始 13 完了の目処が立たないほかに任せたい仕事があるか月凍結

やっぱ遅いよな日本のサーバーは遠い。 CDNの大切さを実感した。 14

やっぱり遅いアンテナが、 1本立つかどうかで  SPAは無理ゲー 15

2024年作り直すチャンスがやってきた！ 16

世界一速くする。 17

世界一の基準を、社内に示すプロジェクトの北極星は、阿部寛のホームページ。 18

Webサイトの本質だけで、できている HTML 速さ 19 魚拓での再現クローラー

こうすればいいのは分かりきったことでもなかなかそうもいかない 21

JSONをHTMLにするだけなんやが JSON フレームワークライブラリ更新に約2か月数人で対応。しかも、更新後の挙動を保証しきれない。 22 HTML

E2Eに頼っても、最後は目視確認だった実装 E2E 気づけずに、またバグを埋め込む 23 目視確認

書きやすくて速くないと、カバレッジを上げる気にならない！素直なunit testを書いて、すぐ確かめたい。 plainなobject { title: "記事A" } f
変換する関数 24 期待するHTML 結果を直接確かめる

何を残すかは、自分たちで決めたい依存先の都合自分たちの要件削れないファイル必要なものだけ残す 25

巨人の肩に乗っていては、阿部寛のホームページには絶対に辿り着けない！

技術選定の判断軸テストの書きやすさ実行速度開発速度 CIの速度シンプルに作るために、外部ライブラリを徹底排除する。 27

2年間、同じ議論で立ち止まりたくない「ライブラリを入れよう」開発開始 28 「ライブラリを入れよう」「ライブラリを入れよう」 2年の見込み

一人で。誰にも相談しない、と決めた。 29 アーキテクチャ大枠の実装

もちろん、リスクはある。受け入れられない運用できない時間がかかりすぎる打ち切られる 30

組織が落ち着くまでに、形にする組織改編期チャンス期間組織が落ち着く進捗悪いと最悪凍結一定レベルまで形にする 31

でも、やるんだよ CTOと自分の信用貯金をここで使い切る 32

まずはここから始めました 33 Bun Bun test Biome 実行環境テスト Lint・フォーマット

まず、動くことを証明する JSON 試作公開サイト 34

別のエンジンで、公開サイトが動いた 2 35 JSON → HTML 週間コンパクトな変換実装

第2章ここから、考古学が始まる。 36

一つの型に、26種類のBox 既存の型定義（抜粋） interface StudioDom { type?: StudioDomType content?: StudioDomContent style?:
StudioDomStyle state?: StudioDomState action?: StudioDomAction children?: StudioDom[] // ... } 正しい組み合わせは、型から分からない。 37 第2章｜既存仕様の考古学種類・スタイル・状態・挙動

コードからは読み解かない。出力データと、画面の動き。この二つから仕様を割り出した。 38 第2章｜既存仕様の考古学

第3章同じ動きを、シンプルな仕組みで。 39

まず、全部MPAで処理できないか。サーバー側で処理 40 データの解釈 HTML生成スタイル動作の再現第3章｜処理の境界

ブラウザでしかできない部分を、切り出す 41 サーバーブラウザデータの解釈 HTML・CSSの生成操作状態の更新第3章｜処理の境界

属性と本文には、値を直接割り当てるデータ url: "/articles/a" title: "記事A" 42 第3章｜スタイル生成したHTML <a
href="/articles/a"> 記事A </a>

ここで、ちょっとした発明があった。 43 第3章｜スタイル

共通スタイルを持ち、colorだけを渡す。 Editorで、見出しの色をバインディング masterの共通スタイル .article-title { font-weight: 700; color: var(--title-color); }
親インスタンスの差分 <div style="--title-color: #AC2E2E"> <h2 class="article-title">記事A</h2> </div> CSS変数は、子孫要素にも伝わる。 44 第3章｜スタイル

Componentも、Listも、Carouselも。 masterの共通スタイル Component List Carousel CSS変数の差分 CSS変数の差分 CSS変数の差分 45 第3章｜スタイル

追加した要素も、同じCSSで表示できる読み込み済みのHTML <style> .article-title { font-weight: 700; color: var(--title-color); }
</style> <div style="--title-color: #AC2E2E"> <h2 class="article-title">記事A</h2> </div> 親に渡したCSS変数を、追加した子孫要素も参照できる。 46 第3章｜スタイル＋新しいインスタンス <div style="--title-color: #2459A6"> <h2 class="article-title"> 記事B </h2> </div>

第4章試行錯誤。 47

Carouselという魔境表現力が無限大はテストケースも無限大 48 第4章｜試行錯誤・カルーセル

データの中に、条件分岐も関数も。独自DSL 判定関数定義関数呼び出し 49 第4章｜試行錯誤・カルーセル独自パーサー関数化 Vue.js
ライフサイクル computed

当然、自作する。既存ライブラリ細かな制御が合わない 50 第4章｜試行錯誤・カルーセル自作評価と処理順まで合わせる

Vue.jsの内部処理順にまで踏み込む独自DSL 独自DSL Vue.js ブラウザのイベント carousel-renderer DOM computed 要素条件式
DSL由来の関数ライフサイクル評価結果を受け取る初期化関数定義 inlineStyle 条件判定依存する値状態関数呼び出し transition スタイル更新条件判定値の参照ユーザー定義変数ユーザー定義の値トリガー処理評価結果更新処理データトリガーユーザー定義の値別の値を参照描画処理独自パーサー表示状態タイミング調整再評価次の更新生成された関数要素の入れ替え処理を再開値の受け渡し要素の制御処理順が1つでも狂うと、既存の動作とズレる。 51 タイマー・同期第4章｜試行錯誤・カルーセル処理を予約 setTimeout 待機処理を再開要素を入れ替える次の処理へ

Reactiveな挙動をトレースするのとても辛い 4 カルーセルだけで、たぶん。 52 か月第4章｜試行錯誤・カルーセル

サイズ別画像切り替え画像読むのにjsなんで使わにゃならんのだ 53 第4章｜試行錯誤・画像

画像のJSも消せるんちゃうか？画像を切り替える基準は、viewportではなくcontainerのサイズ。同じviewport 広いcontainer 大きい画像を選ぶ画面幅が同じでも、必要な画像サイズは違う。 54 第4章｜試行錯誤・画像狭いcontainer 小さい画像を選ぶ
JSで画像を選択 ↓ この処理を CSSだけにできないか？

画像選択、CSSだけでいけた！やったーーー！ SVG / ラッパー img 小 Container Queryで選択 55
第4章｜試行錯誤・画像 img 中 img 大 loading="lazy"

横を直すと、縦が壊れる。なんでや。 3月10日同日 3月16日横並びで縮まない縦並びで位置がズレる幅の指定を組み直す
修正撤回再修正 56 第4章｜試行錯誤・画像

2年くらい粘ったが敗北しJSへ戻した SVG / ラッパー img img img img CustomElementで妥協 57
第4章｜試行錯誤・画像

第5章 2年半たった現状 58

248,725 開発の節目とコード総量各月末の総行数行 · 2026/6/12 リリース時点千行 300 1
9 3 8 200 2 4 7 5 6 100 1 2 3 4 6 5 7 8 0 2024/3 2024/9 2025/3 2025/9 実装・テスト・開発ツール。依存コード・データ・生成物を除外。第5章｜開発の思い出と成果 59 2026/3 6/12 9 2024.08.16 型と生成処理を再編 2025.01頃 Clineを使い始める 2025.03頃 Claude Codeを使い始める 2025.07.03 カルーセルを再設計 2025.09.22 生成とサーバーを分離 2025.11頃バグ修正にラストスパート 2026.02.25 RSSをIsland化 2026.04.22 取得とHTML構築を分離 2026.06.12 リリース 2・3・6は本人の回想

行カバレッジは81.4%に。行カバレッジ｜両方とも現在のコードで計測 Studio Preview HRC（全パッケージ込み）未実行ファイルを含む。テスト・モック・生成データを除外。 2026.09.10 計測｜実行基盤が異なるため参考比較 60 第5章｜開発の思い出と成果
32.8% 81.4%

13 外部ライブラリ個監視用を含む 61 第5章｜開発の思い出と成果

58 CI時間 62 第5章｜開発の思い出と成果秒

モバイルでも100点を取れるようになりましたモバイル Lighthouse｜公式記事の計測例新基盤への切り替えに加え、実装もチューニングした比較。出典：Studio公式発表 · 2026.01.29 第5章｜開発の思い出と成果 63

できてみたら誰からも文句を言われませんでした 64

第6章ヘルシーなインターネットへ。 65

細い回線でも、本文を読めるようにしたい。 66 第6章｜ヘルシーなインターネット

本文がHTMLにある。人が読める <article> 本文 </article> 機械が読めるアーカイブできる 67 第6章｜ヘルシーなインターネット

今の実行環境がなくなっても、情報は残したい。今の実行環境情報 68 第6章｜ヘルシーなインターネット

スペシャルサンクス HRC全般 HRC全般 VRT anatoo hanayama mizchi x.com/anatoo 69 github.com/hanatyan128
x.com/mizchi

ご清聴ありがとうございました

HRC_Frontend_Conference_Fukuoka_2026.pdf

HRC_Frontend_Conference_Fukuoka_2026.pdf

More Decks by takanori sugawara

Other Decks in Technology

Featured

Transcript