原題: The asteroid currently hitting frontend web development
著者: Nolan Lawson
公開日: 2026-08-23
ソースURL: The asteroid currently hitting frontend web development
アーカイブ日: 2026-09-06
著者はまず、自分が敬愛してきたフロントエンドWebの教育者たちが相次いで活動を縮小したり、身を引いたりしている現状から書き始める。Axel Rauschmayer、Salma Alam-Naylor、Josh W. Comeauといった名前が挙がる。一方でKent C. Dodds、Addy Osmani、Rachel Nabors、Lydia Hallieのような著名人は、フロントエンド開発を語ることから別の話題へ、つまりAIへと軸足を移した。
著者自身はWeb開発を語ることで生計を立ててきたわけではないが、ブログを持ち、カンファレンスやポッドキャストで自分が夢中になっている題材を語ってきた。直近の情熱はCSS性能の細部だった。shadow DOMの仕組み、ブラウザのスタイルエンジンの動作、CSS-in-JSの罠といった主題である。
そこで著者は試しに、Claude Sonnetに自分のお気に入りの頭の体操を出してみた。「Chromeのトレースで、Style計算のコストが高くLayoutのコストは低いスパンが繰り返し見えるとき、Webアプリの何を疑い、次に何を計測するか」という問いである。これは経験豊富な開発者ですら繰り返しつまずくのを著者が見てきた種類の問題だった。
Claudeの回答は、著者の言葉を借りれば「完全に立派な」ものだった。回答はまず、Styleフェーズがセレクタ照合と計算済みスタイルの算出であり、要素が動くか大きさが変わるかとは独立に高コストになり得ることを説明する。したがってStyleが高くLayoutが低いなら、支払っているのは幾何ではなく多数の要素に対するセレクタ照合と無効化のコストだと切り分ける。続いて疑うべき箇所を五つ挙げる。子孫コンビネータや全称セレクタ、属性セレクタを広く当てるセレクタの複雑さと数。大量の一意なクラス名を生むCSS-in-JS。DOMの上位でクラスや属性を切り替えることで大きなサブツリーの再計算を強いる無効化の範囲。回答はこれを「たいてい最大の要因」と位置づける。さらに、クラス変更直後にスタイルを読み取るループやrequestAnimationFrameごとの多数ノードへの個別更新といった再計算の頻度と増幅。font-sizeやcolorなど継承プロパティやルート付近のCSSカスタムプロパティを変えることによる伝播。そしてshadow rootごとにスタイルシートが共有されず再計算が重複する可能性である。
次に計測すべきものとして、回答はDevToolsのPerformanceパネルで「Selector Stats」を有効にして再記録し、遅いセレクタと照合回数を見ることを「最も有用な次の一手」として挙げる。Recalculate Styleイベントの呼び出し元、影響を受けた要素数と実際に見た目が変わった要素数の差、変更が起きたDOM上の位置、getComputedStyleとDOM書き込みの交錯による強制同期スタイルも確認項目に入る。修正策としては状態切り替えの範囲を最小サブツリーに絞る、単一クラスセレクタを優先する、カスタムプロパティの更新スコープを狭める、DOM変更をまとめて一度の再計算にする、content-visibilityやcontainで無効化範囲を区切る、と列挙される。
著者はこの結果を受けて率直に認める。ブラウザ性能について何年も書き、実際にブラウザの性能チームで働いた自分ですら、いま遅いWebサイトを渡されたら、おそらくChromeのトレースをClaude Codeに投げて改善案を出させるだろう。実際に本業でそれをやり、良い結果を得ている、と。
ここから著者は、フロントエンド教育がどこに向かうのかを考える。明るい答えは持っていないと断りつつ、それでも考える価値はあるとして、中核の問いを「この新しい時代にフロントエンド開発そのものがどこに着地するか」に置く。そして、フロントエンドの知識への投資を減らす方向に働く三つの趨勢を挙げる。
第一に、フロントエンドはエージェントに丸ごと任せてもリスクが低い。データベースのマイグレーションをエージェントに書かせるなら、何度もAIレビューを回し、自分の目で精査し、まずステージングで走らせるだろう。しかしReactコンポーネントなら、そのまま本番に放り込むリスクは通常はるかに低い。著者はリスクがゼロだとは言わない。アクセシビリティを壊す、無限ループでユーザーを止めるといった危険はある。それでもフロントエンドのコードは他の種類のコードよりずっと使い捨てで置き換え可能であり、多くのAIコーダーが良くも悪くも監督なしでエージェントに任せて平気だと感じるだろうと予想する。
第二に、開発者体験の重要性が全体として下がっている。LLM以前のフロントエンドの議論の多くは、エルゴノミクス対成果の対立軸で行われていた。Alex Russellの「開発者体験のおとり商法」はその好例であり、SvelteやSolidは自分たちのエルゴノミクスがReactより少ないコードと良い性能という成果につながると長く主張してきた。ところがCursorとVigetは、それぞれSolitとLitからReactへ移行したことをブログで公表している。エージェントによって書き直しが安くなったのなら、より高性能で冗長でないフレームワークに移ればよいはずだが、答えは明快で「エージェントがReactを知っている」からだった。Cursorは明示的にそう述べており、Vigetも同じだろうと著者は推測する。Reactは学習データの重みの中で大幅に過剰代表されており、開発者体験より「エージェント体験」が重要になり始めている。
第三に、標準がこの変化に追随する。著者はWeb標準の現場を数年離れているので純粋な推測だと断りつつ、より良いCSSの短縮記法や簡潔なJavaScript構文といったサイト構築のエルゴノミクス改善は、性能や能力を実際に動かすものに比べて重要でないと見なされるようになると予想する。エージェントにとって1行のCSSを3行で書くことはたいした違いではなく、むしろ学習データにない新しい構文を使うにはエージェントを指導しなければならず、かえって難しい。
この転換はある意味ですでに始まっていたのかもしれない、と著者は数年前のTPACの記憶を引く。AIコーディングのブームよりずっと前、Chromeチームのある人物に自分がWeb Componentsの標準に取り組んでいると話したところ、相手はそれには興味がないと答えた。それらのAPIは開発者体験に影響するだけで、Project Fuguのようにブラウザをより有能にはしないからだ、と。著者はこれを良い指摘として記憶している。shadow DOMやcustom elementsはWeb開発者に新しい超能力を与えず、コードがどこでどう書かれるかを変えるだけである。AIコーディングが主流になれば、こうしたものは脚光の外へ出ていくだろう。標準がフロントエンド開発者の追うべき話題から消えるわけではないが、「この新しい構文を使おう」という、カンファレンス講演や記事の尽きない素材から、「こういう新しい能力が出てきた」へと重心が移る。そして後者は標準化団体で論争になりやすく、機能の母数も小さいため、話題の総量は前者よりずっと小さくなると予測する。
この厳しい未来にフロントエンド教育はどう適応できるか。完全に暗い話にしないために、著者は三つの前向きな方向を示す。
一つ目は、エージェントにはまだ大局を教える必要があるという点だ。エージェントやハーネスはReactを、とりわけSPAを書きたがる。しかしSPAはあらゆる問題の答えではない。マーケティングサイトのために複雑なSPAをエージェントに書かせて大量のトークンを燃やし、その後で戻るボタン、フォーカス状態、性能のバグを直し続けることもできるし、AstroやEleventyのようなMPAフレームワークを選んで終わりにすることもできる。Astroは見た目がReactに似ていて実は違うため、エージェントには少し扱いにくいかもしれないが、書くコードが全体でおよそ半分になるなら問題にならないだろうと著者は見る。
二つ目は、エージェントにとってよく動くWebサイトを作ることが当面は実りある仕事になるという点だ。Vercelのis-agenticがその例として挙がる。皮肉なことに、これはサーバーサイドレンダリングされたコンテンツ、適切なアクセシビリティ、ページ速度といった、公開サイトが本来やっているべきだった基本に立ち返る。「AI」の一語を貼ることで人々が基本を気にするようになるなら大歓迎だ、と著者は言う。ただしこの点については著者はやや楽観的になれない。エージェントが主役になるにつれて、Webが現在の形のまま生き残るかどうか確信がないからだ。シアトルからパリへの航空券の価格を知りたいとき、著者は読み込みの遅いサイトで苛立つボタンを次々押すより、エージェントに尋ねたい。それができない唯一の理由は、それらのサイトがボットを明示的に遮断しているか、MCPを提供していないからであり、この問題を解こうと手をこまねいているスタートアップはいくらでもあるだろう。現状が持続可能かは分からない、と著者は述べる。
三つ目は、vibe codingで生まれた怪物のためのコンサルティングだ。いま膨大な量のAI生成フロントエンドコードが吐き出されており、そのうちの一部はClaude風の言い回しで言えば確実に「load-bearing」になる。それらのサイトが遅く、規制に不適合で、セキュリティホールだらけなら、エージェントに「サイトを直して」と頼むだけでは済まないかもしれない。金銭が絡み、vibe coderのWeb開発知識が「Webサイトとはインターネット上にホストされたアプリだ」から先に伸びていなければ、本物の専門知識が求められる余地がある。著者はこれが三つの中で最も頼りない論点だと認める。次世代の「自己修復」Webアプリが2027年か2028年には平均的な専門家を凌ぐ様子が容易に想像できるからだ。それでも当面は、専門知識はまだ意味を持つ。
著者は、この記事は自分を慰めるためでも、AIブームで覆された経歴の墓の上で踊るためでもないと書く。自分は生来の陰鬱な人間で、この文章は自分の憂鬱に浸ることを自分に許したものだ。何年もかけて築いた膨大な知識がほぼ時代遅れになったことを記して喜びはないし、はるかに優れた同業者たちに同じことが起きるのを見て嬉しいわけでもない。しかし起きていないふりをするのも有効な戦略ではない。
近ごろ読むブログには「AIの話はもう疲れた」「AIの話を二度としないでほしい」という気分がある。その一部は、世を斜めに見る超然とした態度をバッジのように身につける心地よさだろうが、多くは本物の恐怖から来ていると著者は考える。一年後に何が起きるか分からないと認めるのは怖い。自分のキャリアが一定の軌道を進み、穏やかに引退に着地すると思い描いていたのに、目標のわずか数年手前ですべてが覆されるのを見るのは足元を揺さぶられる。
著者が使ってきた比喩は、小惑星が地球に落ちたばかりで、我々はまだ瓦礫を調べている、というものだ。塵が落ち着いた後に何が起きるか、ましてどの小さなネズミが哺乳類の時代を切り開くかは予測しがたい。しかしクレーターを丸ごと無視するのは最悪の否認である。もう一つの比喩はcovidだ。covidが来たとき、著者は「covidの話はもう疲れた」とは思わず、ウイルス、疫学、マスクについて学べることをすべて学びたいと思った。covidはその後数年間、生活を支配することになったので、それは良い判断だった。
著者は自分がこの領域に賭けているものが今では少ないことも認める。Web標準からは離れ、現職ではフロントエンドすら担当しておらず、ブログはブラウザや性能やアクセシビリティという通常の献立ではなく、AIについての嘆きが大半になっている。それでもフロントエンドという分野への愛情と敬意は変わらず、その将来を気にかけている。数年で見違えるものになるかもしれないが、同業者たちがこの変化を乗り切り、奇妙な新世界で栄える道を見つけることを願って記事は終わる。
この記事の価値は、フロントエンドの深部を最もよく知る立場の人間が、自分の専門知識の陳腐化を自分の手で確認したという一次証言にある。著者はブラウザの性能チームで働き、Web Componentsの標準策定に関わった人物であり、CSSスタイル計算のボトルネック診断は本人が「経験豊富な開発者すらつまずく」と語る得意分野だった。その問いにClaudeが十分な回答を返した事実を、感傷を交えずそのまま記録している。AIとソフトウェア開発を論じる記事は多いが、専門家自身が自分の分野で行った検証を出発点にしているものは少ない。
論として長く残るのは、三つの逆風の分析である。とりわけ「開発者体験よりエージェント体験」という観察は、CursorとVigetがSolidやLitからReactへ戻ったという具体的な事実に裏打ちされ、フレームワーク選択の基準が学習データの分布に引き寄せられるという構造を言い当てている。またTPACでの会話から引き出した「エルゴノミクスを変えるAPIと能力を広げるAPI」の区別は、AI以前から存在した対立軸をAIが決着させたという読みであり、Web標準の優先順位を考えるうえで今後も参照される枠組みになるだろう。フロントエンドが「委ねやすいがゆえに投資が減る」という第一の趨勢も、コードの使い捨て性と監督コストの関係を簡潔に説明している。
弱点は著者自身が明示している。三つの活路のうちコンサルティングは自己修復するアプリの登場で消えるかもしれず、エージェント向けサイトの整備はWebそのものの存続と絡む。予測の多くは推測と断られており、五年後に外れている可能性は高い。しかしこの記事の長期的な参照価値は予測の的中にあるのではなく、転換期の当事者が恐怖を認めたうえで否認を拒み、自分の分野の行き先を考え抜いた記録である点にある。小惑星の比喩とcovidの比喩は、「疲れた」という気分の裏にある恐怖を名指しし、学ぶことを選ぶ姿勢を示している。フロントエンド教育者、標準策定に関わる人、そして専門知識の価値が揺らいでいるあらゆる分野の実務者にとって、読後に自分の投資先を見直させる文章である。
フロントエンド開発, AIコーディング, 開発者教育, Web標準, React, CSS性能, エージェント体験, キャリア