あなたが見ていない間にフロントエンドで何が起きていたのか

kciter1 · 2026-07-20T02:12:58+09:00

2008年ごろにフロントエンドを離れた開発者に向けて、この20年間の変化を説明する文章すべてのツールは実際の問題（傷）の上にできた瘢痕組織であり、各レイヤーの解決策が次のレイヤーの問題を生み、それが積み重なってきたというのが全体の主張記事全体を通して 1つを標本として、各時代にボタンがどう変化したかを追跡する Layer I — jQuery (2006–2010) ページ全体を再読み込みせずに一部だけを変えたいという要求から始まった jQueryはブラウザ間の差異をなくし、AJAXを大衆化したが、データがJS変数と画面の両方に存在し、開発者が自分で同期しなければならない問題が生まれたこの手動DOM操作こそが、その後のすべてのレイヤーが解決しようとする「原罪」である Layer II — フレームワーク (2010–2015) 宣言的UI: 画面を更新する手順の代わりに、データに応じた画面の姿を記述すれば、フレームワークが更新を処理する Reactがコンポーネント + JSX + Virtual DOMで時代を主導し、Vue/Angular/Svelte/Solidがそれに続いた現在、すべてのフレームワークは依存関係を追跡して必要な場所だけを更新するsignalという概念へと収束しつつある htmx、Alpine.js、Hotwireなど、サーバーからHTMLを送る方式へ回帰する陣営も存在する Layer III — ビルド (2012–2018) JSにはモジュールシステムがなかったためCommonJSとES Modulesが競合し、旧式ブラウザ互換のためにBabelのトランスパイルとwebpackのバンドルが必要になったビルドにはminify、tree-shaking、コード分割、ソースマップ生成が含まれるその代償としてnode_modulesが生まれ、空のスタータープロジェクトですら約25万個のファイルをインストールする Layer IV — ツール競争 (2018–2024) 遅いビルドと複雑なwebpack設定の問題を、Go/Rustでの再実装によって解決した時代 esbuild（Go）がバンドリングを10〜100倍高速化し、SWC（Rust）がBabelを置き換えた Viteが標準ツールとして定着し、本番用バンドラーはRustベースのRolldownへ置き換えが進んでおり、関連スタックはVoidZero（最近Cloudflareが買収）の下へ統合されつつあるパッケージマネージャーもpnpmやBunなどで同じ流れをたどっている Layer V — サーバーレンダリングの帰還 (2014–2026) SPAはサーバーが空のdivしか送らないため、初期読み込み時に空白画面が表示され、検索エンジンにも空のページとして見えてしまう問題があった解決策はサーバー側でHTMLを再びレンダリングすることで、2008年方式への回帰でもある SSR（リクエストごとにレンダリング）、SSG（ビルド時に事前レンダリング）、ISR（自動更新されるSSG）が登場し、Next.js、Astro、SvelteKit、Nuxtなどのメタフレームワークがこれを担うサーバーHTMLをブラウザで再び動かすhydrationのコストが新たな問題となり、Islands（Astro）、Resumability（Qwik）、React Server Componentsがhydrationを減らす手法として登場した Layer VI — エンジニアリングツール (2015–2026) TypeScriptが型システムによってリファクタリングの安全性を確保し、事実上の標準となった Tailwindがユーティリティクラス方式でスタイリングを主導する一方、ネイティブCSSもnesting、変数、container queryなどへ進化し、既存ツーリングの必要性を減らしている shadcn/uiはコンポーネントをインストールする代わりにソースをコピーして所有する方式を定着させ、TanStack Query、Zustand、Zod、Vitest、Playwrightが2026年のアプリの基本語彙を形作っている Layer VII — デプロイ (2015–2026) FTPアップロードの代わりにGitリポジトリをVercel/Netlify/Cloudflareへ接続すると、pushのたびに自動でビルド・デプロイされ、PRごとにライブプレビューURLが生成されるサーバーレス関数とエッジ（ユーザー近くの数百のデータセンターでコードを実行する）の概念が定着した Layer VIII — AI (2023–2026) v0、Lovable、Boltに自然言語で説明すると動作するフロントエンドが生成され、Cursor、Claude Code、Copilotがコードを代わりに書くバックエンド/システムエンジニアでも1日でフロントエンドを作れるようになり、エンジニアリング分野間の境界が曖昧になっているただし生成されたコードは上の8つのレイヤーの知識を前提としており、このギャップを埋めることがこの記事の目的である Bedrock — 結論 2026年最前線の方向性は、サーバーでHTMLをレンダリングし、JSをほとんど送らず、Webプラットフォームを活用することだ業界は20年かけて大きな円を描いた末に、FTPでアップロードしていたファイルと似た地点へ戻ってきたとまとめている

2008年ごろにフロントエンドを離れた開発者に向けて、この20年間の変化を説明する文章
すべてのツールは実際の問題（傷）の上にできた瘢痕組織であり、各レイヤーの解決策が次のレイヤーの問題を生み、それが積み重なってきたというのが全体の主張
記事全体を通して <button> 1つを標本として、各時代にボタンがどう変化したかを追跡する

Layer I — jQuery (2006–2010)
- ページ全体を再読み込みせずに一部だけを変えたいという要求から始まった
- jQueryはブラウザ間の差異をなくし、AJAXを大衆化したが、データがJS変数と画面の両方に存在し、開発者が自分で同期しなければならない問題が生まれた
- この手動DOM操作こそが、その後のすべてのレイヤーが解決しようとする「原罪」である
Layer II — フレームワーク (2010–2015)
- 宣言的UI: 画面を更新する手順の代わりに、データに応じた画面の姿を記述すれば、フレームワークが更新を処理する
- Reactがコンポーネント + JSX + Virtual DOMで時代を主導し、Vue/Angular/Svelte/Solidがそれに続いた
- 現在、すべてのフレームワークは依存関係を追跡して必要な場所だけを更新するsignalという概念へと収束しつつある
- htmx、Alpine.js、Hotwireなど、サーバーからHTMLを送る方式へ回帰する陣営も存在する
Layer III — ビルド (2012–2018)
- JSにはモジュールシステムがなかったためCommonJSとES Modulesが競合し、旧式ブラウザ互換のためにBabelのトランスパイルとwebpackのバンドルが必要になった
- ビルドにはminify、tree-shaking、コード分割、ソースマップ生成が含まれる
- その代償としてnode_modulesが生まれ、空のスタータープロジェクトですら約25万個のファイルをインストールする
Layer IV — ツール競争 (2018–2024)
- 遅いビルドと複雑なwebpack設定の問題を、Go/Rustでの再実装によって解決した時代
- esbuild（Go）がバンドリングを10〜100倍高速化し、SWC（Rust）がBabelを置き換えた
- Viteが標準ツールとして定着し、本番用バンドラーはRustベースのRolldownへ置き換えが進んでおり、関連スタックはVoidZero（最近Cloudflareが買収）の下へ統合されつつある
- パッケージマネージャーもpnpmやBunなどで同じ流れをたどっている
Layer V — サーバーレンダリングの帰還 (2014–2026)
- SPAはサーバーが空のdivしか送らないため、初期読み込み時に空白画面が表示され、検索エンジンにも空のページとして見えてしまう問題があった
- 解決策はサーバー側でHTMLを再びレンダリングすることで、2008年方式への回帰でもある
- SSR（リクエストごとにレンダリング）、SSG（ビルド時に事前レンダリング）、ISR（自動更新されるSSG）が登場し、Next.js、Astro、SvelteKit、Nuxtなどのメタフレームワークがこれを担う
- サーバーHTMLをブラウザで再び動かすhydrationのコストが新たな問題となり、Islands（Astro）、Resumability（Qwik）、React Server Componentsがhydrationを減らす手法として登場した
Layer VI — エンジニアリングツール (2015–2026)
- TypeScriptが型システムによってリファクタリングの安全性を確保し、事実上の標準となった
- Tailwindがユーティリティクラス方式でスタイリングを主導する一方、ネイティブCSSもnesting、変数、container queryなどへ進化し、既存ツーリングの必要性を減らしている
- shadcn/uiはコンポーネントをインストールする代わりにソースをコピーして所有する方式を定着させ、TanStack Query、Zustand、Zod、Vitest、Playwrightが2026年のアプリの基本語彙を形作っている
Layer VII — デプロイ (2015–2026)
- FTPアップロードの代わりにGitリポジトリをVercel/Netlify/Cloudflareへ接続すると、pushのたびに自動でビルド・デプロイされ、PRごとにライブプレビューURLが生成される
- サーバーレス関数とエッジ（ユーザー近くの数百のデータセンターでコードを実行する）の概念が定着した
Layer VIII — AI (2023–2026)
- v0、Lovable、Boltに自然言語で説明すると動作するフロントエンドが生成され、Cursor、Claude Code、Copilotがコードを代わりに書く
- バックエンド/システムエンジニアでも1日でフロントエンドを作れるようになり、エンジニアリング分野間の境界が曖昧になっている
- ただし生成されたコードは上の8つのレイヤーの知識を前提としており、このギャップを埋めることがこの記事の目的である
Bedrock — 結論
- 2026年最前線の方向性は、サーバーでHTMLをレンダリングし、JSをほとんど送らず、Webプラットフォームを活用することだ
- 業界は20年かけて大きな円を描いた末に、FTPでアップロードしていたファイルと似た地点へ戻ってきたとまとめている

あなたが見ていない間にフロントエンドで何が起きていたのか

関連記事

4件のコメント