Japanese Translation:

ウェブ開発において大きなシフトが発生しており、人間中心の開発から、AI エージェントを最適化するようにアプリケーションを開発する方向へと移行しています。著名な教育者は従来のフロントエンドトピックから転換しており、業界の風景に根本的な変化が起きていることを示しています。現在、開発者は「vibe-coded」ソリューションを生成するために AI ツールに依存しがちで、これはフレームワークのトレンド（特に AI モデルのトレーニングバイアスによる React の優先）を、人間工学的なウェブ標準や開発者の体験よりも重視するアプローチです。このアプローチは、しばしば高いスタイル計算コストを特徴とする非最適なパフォーマンスを生み出します。

したがって、教育も将来的には Astro や Eleventy などのサーバーレンダリング型アーキテクチャや静的サイトジェネレーターへと転換し、従来の単一ページアプリケーション（SPA）ではなく、コンテンツの速度と機械による読みやすさに焦点を当てることになります。データベースマイグレーションといったバックエンドタスクとは異なり、フロントエンド開発は AI エージェントに直接委任することが比較的 safe と見られています。これらのエージェントが実験的な標準よりも現在の規範を強制するためには、従来のフロントエンドスキルは価値を失い、AI エージェントワークフローに関する新たな専門性が不可欠となります。おそらく新しい職業上の必要性として、自動化されたシステムによって生成された欠陥のあるコードを修復することに特化した専門コンサルティングサービスが登場するでしょう。業界ではまた、人間工学的なウェブ標準が重要性を失いつつあり、エージェントは自らの内部の「体験」を優先する傾向も見られます。

フロントエンド教育者の引退と AI 時代におけるウェブ開発の未来

1. 背景：教育者の変化と著者の状況

フロントエンド分野の尊敬する多くの方々が活動から距離を置いています。

引退またはペースダウンしている有名人: アクセル・ラウシュマイヤー、サルマ・アラム＝ナイロー、ジョシュ・W・カムノなど。
話題の転換: ケント・C・ドッズ、アディ・オスマニ、レイチェル・ナボース、リディア・ハリーなどは、フロントエンド開発というテーマから他の分野へシフトしています。

著者の経歴と現在の情熱：

生活の手段としてウェブ開発を行っていたわけではありません。
ブログや会議での基調講演（CSS パフォーマンスなど）を通じて貢献してきました。
最近の研究テーマ: CSS パフォーマンスの微細な部分（シャドウ DOM、ブラウザのスタイリングエンジン動作、CSS-in-JS の落とし穴）。

具体的事例：Claude Sonnet を問う難問

好奇心から Chrome のトレース（パフォーマンスプロファイラ記録）を AI に問いかけた事例。

状況: Chrome トレース上で「Style Calculation（スタイル計算）」コストが高いが、「Layout コスト」は低い現象を確認。

質問プロンプト:

インターネットを検索せずに答えてください：クロームのトレースを見ていると、反復的に高い Style コスト却又は比較的低い Layout コストが確認できます。この Web アプリを最適化するためにどのような点を探るべきでしょうか？また、次に何を測定すべきでしょうか？

結果: Claude Sonnet は評価に値する回答を返しました。これは経験豊富な開発者ですら躓きやすい課題です。

2. 「Style」コストが意味することと対策

Style コストが高い真の意味

ブラウザは CSS セレクターを DOM に照合し、最終的なスタイルを計算します。

高価なプロセス: リサイズや移動の有無に関わらず発生します（移動・リサイズの担当は Layout です）。
結論: 「Style コストが高く、Layout コストが低い」場合、多くの要素に対するセレクター照合への支払いであり、幾何学的な計算の負担ではないことを示唆します。

Web アプリにおいて探るべき 5 つの要因

1. セレクターの複雑性と数

過度に深くネストしたセレクター:
```
.a .b .c > .d + .e
```
などの祖先コンバイネーターは、照合試行ごとに DOM の広範囲をたらしなければならないため非効率です。
ユニバーサル/属性セレクター: 広範囲に適用される
```
[data-foo="bar"]
```
などはコストがかかります。
CSS-in-JS の副作用: ライブラリが生成する膨大な固有クラス名やルールは、スタイル再計算時に全セットを考慮せねばなりません。

2. 無効化の範囲 (Invalidation Scope) —— 最大の問題点

DOM ツリーの上位で変更が行われると、 subtree 全体にスタイル再計算が強制されます。

例:
```
<body>
```
やトップレベルコンテナにクラスをトグルすると、実際に変わる要素は少数でも大規模な無効化が発生します。
対策: ステータス変更（テーマ、ローディング、ホバー）が過剰な範囲に影響していないか確認しましょう。
- 測定手法: Chrome DevTools の「Selector Stats」を有効化（DevTools パフォーマンス設定から）。遅い上位セレクターとその照合要素数を可視化します。

3. 頻度と増幅

一フレーム内での複数回のトリガーが問題になります。

同期再計算の強制: クラス変更直後にスタイルプロパティをループで読む。
バッチ化の欠如: JS アニメーションや
```
.classList.toggle()
```
が
```
requestAnimationFrame
```
ごとに散発的に発生する。
DOM 変異: 小さな変化がバッチ化されず、毎度スタイルパスを強制する。

4. 継承/計算済みプロパティの伝播

祖先の変更がすべての子要素に波及します。

継承プロパティ:
```
font-size
```
や
```
color
```
の変更は、子要素の全スタイル再計算を強制（レイアウト変化なし）。
カスタムプロパティ (CSS 変数):
```
:root
```
や共有祖先で
```
--custom-prop
```
を更新すると、参照する全ての要素で再計算が発生します。

5. シャドウ DOM / コンポーネント境界

フレームワーク（シャドルートやスコープ化）を使用する場合、各コンポーネンスインスタンスが不要な共有スタイルの再計算を行っていないか確認が必要です。

次に測定すべきアクション

Selector Stats の有効化: DevTools ギアアイコンから有効にし、再記録したトレースで遅いセレクターと照合数を把握します。
トリガー元の特定: 「Recalculate Style」イベントのコールスタックを確認（
```
classList.toggle
```
や
```
style.setProperty
```
など）。
影響範囲の確認: 「Elements Affected」の数を実際の変更数と比較し、ギャップがあれば過剰無効化を示します。
発生場所の観察: ルート付近かサブツリー内かによってコストを判断します。
強制同期スタイルの排除: 「Forced reflow」（紫色警告）を探し、
```
getComputedStyle
```
をバッチ化せずに使用していないか確認します。

発見後の典型的な修正策

スコープ制限: トグル操作を共通祖先全体ではなく、最小のサブツリーに限定します。
セレクター単純化: 祖先チェーンよりも単一クラスのセレクターを使用します。
変数管理: CSS カスタムプロパティ更新を最小範囲へ移動させます。
バッチ処理: DOM クラス変更をまとめて行い、1 回の再計算に留めます。
コンテナー化:
```
content-visibility: auto
```
や
```
contain: style layout
```
で無効化範囲を制限します。

3. AI を活用した改善アプローチ

著者自身がブラウザパフォーマンスチームでの経験があるにもかかわらず、以下のような方法で対処するようになりました。

ワークフロー: Chrome トレースを Claude Code に提出し、改善案を提案させる。
成果: 実際の業務でもこれを行い、良い結果を得ています。

「読み込みの遅いウェブサイトが与えられた場合、クロームのトレースを Claude Code に投げかけ、改善案を提案させる」ことが標準的になりつつあります。

4. フロントエンド開発の未来と教育への影響

現状はフロントエンド教育にとって好ましくない状況にあります。かつて「開発者全体のレベル向上」に貢献することに充実感を持っていた人々が、励ましを得にくい環境にあるのが実情です。

逆行する傾向と核心の問題

核心: フロントエンド知識への投資価値が低下しつつあるか？

① エージェント（AI）によるリスクの相対的低減

データベースミグレーションなど: AI に書かせたコードは慎重にレビュー、ステージング環境で実行する必要があります。
React コンポーネント:
- エージェントに生成させ、そのままデプロイするリスク（YOLO）は低いです。
- アクセシビリティ破損や無限ループのリスクはあるものの、コードが一時的であり代替しやすいため、監督なしでの AI 依存が安心感を生みます。

② デベロッパーエクスペリエンス (DevEx) の低下

過去: 「使いやすさ（Ergonomics）」と「成果（Outcomes）」のトレードオフ議論が盛ん（例：Svelte/Solid はコード量少でパフォーマンスが良いという主張）。
現在: Cursor や Viget などは Solid/Lit から React へ移行（エージェントによる書き換えのコスト対効果重視）。
- 原因: **「エージェントは React を知っている」**ため。React がトレーニングデータに過度に存在し、DevEx よりも「AI の理解度」が優先されています。

③ 標準化の停滞と相対的な重要性低下

ショートハンド/新構文: パフォーマンス向上のための努力が、エージェントによる簡略化（例：CSS で 3 行→1 行）により重要性を失います。
Chrome チームの発言: 「Web コンポーネント標準（Shadow DOM など）はブラウザの実能には寄与せず、DevEx しか影響しない」。AI コーディング時代、これらの API はスポットライトから外れるでしょう。
- 結果：標準化の議論は「新しい構文を使うべき」という方向から、「新興機能の現状」へと縮小します。

ポジティブな展望：適応の可能性

1. エージェントはまだ全体像を理解していない

SPA の全てが解ではないため、Astro や Eleventy (MPA) などの選択余地があります。
Astro は扱いにくいように見えますが、コード量が約 50% 削減できるため、エージェントも対応可能です。

2. アジェンティックな Web サイトの成功（Vercel is-agentic の例）

サーバーサイドレンダリング、アクセシビリティ、ページ速度などの原則を AI に適用することで、豊かな成果が得られます。
課題: シアトルからパリへのフライト情報を検索する場合、読み込み遅い Web サイトより AI エージェントを使う方が好ましく、MCP（Model Context Protocol）やボットブロック問題を解決するスタートアップも現れています。

3. 「雰囲気コーディング」に対するコンサルティング

AI 生成コードで「荷重支え」になっている不健全なウェブサイトに対し、本物の専門知識を提供する機会があります。
2027-28 年には AI が専門家を超えるかもしれませんが、現時点では専門知識は依然として重要です。

5. 結論：変化する世界での姿勢

この記事は自慰的な気分転換や、AI ブームへの単なる嘆きではありません。

数年かけて築いた知識が陳腐化することは悲しい事実ですが、それを喜ぶことも否定することもありません。
「AI について話すのに疲れた」という空気に加え、将来の不安（キャリア軌道の崩壊）が存在します。

比喩: 隕石衝突後の塵

地球に隕石が衝突し、廃墟を調査している状態。塵が落ち着くまでのことは予測困難で、どの生き残りが繁栄するか分かりません。
クレーター（現実の変化）を無視する否定姿勢は危険です。
COVID-19 の経験: 議論が疲れる前に、ウイルス学や対策を学びました。それが後に有益でした。

今後の展望

著者はゲームへの投資を減らし、フロントエンドから距離を置くか、ブログのテーマを変えつつあります。
それでもフロントエンド分野への愛情と尊敬は変わりません。
同僚たちがこれらの変化をナビゲートし、奇妙な新世界で繁栄することを願っています。

結論: フロントエンド開発の世界は変化していますが、それは終わりではなく、新しい時代の始まりです。専門知識と適応力を持ってこの「隕石の時代」を生き抜くことが求められます。

現在フロントエンド開発に衝突している小惑星