ハクソク

世界を動かす技術を、日本語で。

現在フロントエンドウェブ開発に影響を与えている小惑星

2026年9月4日原文(nolanlawson.com)

概要

  • フロントエンド分野の著名教育者が活動を縮小または転換
  • CSSパフォーマンス分析に関する実践的な知見
  • フロントエンド教育の現状とAI時代の課題
  • AIエージェントによるフロントエンド開発の今後
  • 今後のフロントエンド教育の方向性

フロントエンド教育者の現状と変化

  • Axel Rauschmayer、 Salma Alam-Naylor、 Josh W. Comeau など著名な教育者が活動縮小
  • Kent C. Dodds、 Addy Osmani、 Rachel Nabors、 Lydia Hallie などはフロントエンド以外へ転換
  • 私自身は生計を立てていないが、ブログやカンファレンスでCSSパフォーマンス等を解説
  • 最近は CSSのパフォーマンス や shadow DOM、 CSS-in-JSの落とし穴 などを解説
  • Chromeのトレースで「Style Calculation」が高い場合の分析方法に関心

Chromeトレースで「Style Calculation」コストが高い場合の分析

  • Style（Recalculate Style） は、ブラウザがCSSセレクタをDOMに適用し、最終的なスタイルを計算するフェーズ

  • Styleコストが高く、Layoutコストが低い場合 は、セレクタのマッチや無効化範囲が広い可能性

    • セレクタの複雑さと数
      • 複雑または深いセレクタ（例：.a .b .c > .d + .e）はDOM探索コスト増加
      • ユニバーサルセレクタ や 属性セレクタ の多用
      • CSS-in-JSによる膨大なクラス生成
    • 無効化（Invalidation）範囲
      • DOM上位でのクラス/属性変更が広範囲の再計算を誘発
      • 例えば body や大きなコンテナへのクラス付与で全体に波及
      • Chrome DevToolsの「Selector Stats」で遅いセレクタや影響範囲を確認
    • 頻度・増幅
      • 1フレーム内で何度もスタイル再計算が発生するケース
      • ループ内でのクラス変更や多数のノードへの頻繁なスタイル更新
      • DOM変更をバッチ処理せず個別に行う場合
    • 継承/計算プロパティの伝播
      • 祖先要素の font-size や color 変更で全子孫の再計算
      • CSSカスタムプロパティ （--custom-prop）を高位で変更すると全参照要素が再計算
    • Shadow DOM/コンポーネント境界
      • Shadow Rootやスコープドスタイルの多用で、インスタンスごとに再計算が繰り返される場合

  • 次に測定すべきこと

    • DevToolsの「Selector Stats」を有効化し、再トレースで遅いセレクタと影響要素数を特定
    • 「Recalculate Style」イベントの発生元やコールスタックを確認
    • 再計算で影響を受ける要素数と、実際に見た目が変わる要素数のギャップ分析
    • DOM内のどこで変更が発生したか（ルート近くか、限定的か）を確認
    • 強制同期スタイル（getComputedStyle等）による「Forced reflow」警告の有無

  • 典型的な対策

    • クラスや状態の変更範囲を最小限に限定
    • セレクタを簡素化し、単一クラス指定を推奨
    • CSSカスタムプロパティの更新範囲を限定
    • DOM/クラス変更はバッチ処理でまとめる
    • content-visibility: auto や contain: style layout で無効化範囲を限定

フロントエンド教育とAI時代の課題

  • フロントエンド開発教育の現状は厳しい状況

  • フロントエンド知識への投資が減少傾向

    • フロントエンドはAIエージェントに任せやすい
      • DBマイグレーション等に比べ、フロントエンドコードはリスクが低く使い捨て可能
      • AIエージェントによる自動生成が進み、品質担保やアクセシビリティ等のリスクは残るが、全体的な敷居は低下
    • DevExp（開発者体験）の重要性低下
      • 以前はSvelteやSolidなど、エルゴノミクス（使いやすさ）と成果の議論が活発
      • 現在は「エージェントがReactを知っている」ため、Reactが選ばれやすい傾向
      • エージェント体験（Agent Experience）がDevExpより重視される時代へ
    • Web標準の進化とその意義
      • CSSやJS構文改善など、エルゴノミクス向上の努力は相対的に重要性が低下
      • エージェントにとっては「3行のCSS」も「1行のCSS」も大差なし
      • 新機能よりもパフォーマンスや機能拡張が重視される流れ
      • Shadow DOMやCustom Elementsは開発体験向上には寄与するが、根本的な新機能ではないとの認識

フロントエンド教育の今後

  • AI時代における教育の方向性
    • エージェントに対して「全体像」を教育する重要性
      • SPA（Single Page Application）だけでなく、MPA（Multi Page Application）やAstro、Eleventyなどの選択肢
      • エージェントが苦手なフレームワークでも、全体のコード量削減が可能
    • エージェント対応ウェブサイトの設計
      • Vercelの is-agentic のような取り組み
      • サーバーレンダリング、アクセシビリティ、ページ速度など、基本に忠実な設計が重要
      • AI時代でも「良いウェブサイトの基本」は不変
    • AI生成フロントエンドのコンサルティング需要
      • AI生成コードの品質問題やパフォーマンス課題への専門家によるアドバイス
      • 「load-bearing」なAI生成サイトの最適化・監査サービスの可能性

まとめ

  • フロントエンド教育はAI時代の大きな転換点を迎えている
  • AIエージェントの普及により、知識や標準の価値観が変化
  • しかし「全体設計」「パフォーマンス」「アクセシビリティ」など人間の専門性が活きる分野は残る
  • 今後はAI活用と人間の知見のバランスが重要

Hackerたちの意見

僕の妻はチームの管理をしていて、契約者を使って企業のウェブサイトを作ることに関わってきたんだ。彼女はHTMLについては全く知らないけど、人を管理するのが得意なんだよね。今は資金調達前のバイオテクノロジーのスタートアップで働いてる。お金はほとんどない状態なんだけど、ウェブサイトのリデザインをしたいらしい。僕は彼女にdeepseekのキーを渡して、彼女は画像検出機能付きのflash-v4を使ってる（deepseekはまだ実験段階って言ってた気がする）。彼女は今のウェブサイトを提供して、どんな風にしたいかを伝えるだけで、すごくうまくいってるよ。もちろんAIが生成したものだけど、すぐに結果が出るし、deepseekに指示を出すだけで見た目を良くすることもできるんだ。彼女はグラフィックデザイナーに連絡しなくても、画像のテキストを新しい商品名に変えることもできたんだよ。これは単純な例だけど、基本的には以前は誰かに$Xで入札してもらうような仕事が、今は自分で$20でできるようになったってことだね。

└

1995年にウェブ開発のビジネスを始めて、数十年にわたってウェブ関連のコーディングをしてきたよ。OPと同じように、そういう裏側の仕組みを学んできたおかげで、何が雑で何がパフォーマンスがいいかを簡単に見分けられるんだ。それに、AIを使って苦手な部分を改善させる方法も分かるしね。今はスーパーパワーを手に入れた気分だよ。これが大好きで、もっとやりたい。妻が低コストで生産的になれるってことは、もっと多くの製品が作られ、機会が増えるってことだよね。ウェブサイトデザインにお金を使う代わりに、彼女のビジネスはバイオテクノロジーの開発にお金を使えるようになる。過去から変わることになっても、それを歓迎するよ。何千ドルも請求してきた人たちが、月20ドルのサブスクリプションに取って代わられることになってもね。

└

僕の母は心理学のクリニックをやっていて、20年前のウェブサイトを更新したいと思ってたんだ。最初の数回のプロンプト（基本的には一枚の静的なページ、パンフレットみたいな感じで、ホスティングのことは気にしないで）をChatGPTに入力して、数日後に彼女が.zipファイルを送ってきた。それをアップロードするのにちょっと時間がかかったのは、彼女がChatGPTにお金を払ってなかったから、無料の制限がリセットされるのを何回も待たなきゃいけなかったから。でも全体的には、彼女にとってすごく力を与える経験だったよ。

└

その「企業ウェブサイト」を見せてよ。

└

彼女はグラフィックデザイナーに連絡しなくても、画像のテキストを新しい商品名に変えることができたんだ。これは合法なのかな…？グラフィックデザインについてはあまり知らないけど。

└

AIで作られた静的HTMLページは、契約者が作らない別のWordPressサイトになっちゃうだけで、放置されて、危険なフィッシングやランサムウェア攻撃に使われるだけだよ。

└

彼女がそれをできるのは、最初に君が設定してあげたからだよ。彼女はdeepseekやindex.htmlファイルが入ったフォルダの意味も知らなかっただろうし、「ウェブサイトが必要です」なんてChatGPTに何を聞けばいいかも分からなかったはず。君が99%の、彼女が簡単には得られない重要な知識を提供したのに、誰でもできる簡単な作業みたいに聞こえるのはちょっと違うと思うよ。

└

重要なのは、自分でやってるから、他のことに使える時間が減っちゃうってことだよね。もし何かうまくいかなかったら、誰がバックアップするの？小さなショップやスタートアップにはあまり関係ないかもしれないけど、ミッションクリティカルなサイトでは、誰がもっと信頼できるの？AIはツールに過ぎない、それだけのことだよ。

一方で、CursorとVigetは、それぞれSolidとLitからReactへのコードベースの移行についてブログを書いている。読んでてイライラしたよ。みんながもっとパフォーマンスの良いフロントエンドソリューションに移行すべきだと思ってたのに。Litや通常のHTML、HTMXを書くのに、そんなに多くのトークンが必要なの？

└

少なくとも去年は、ほとんどのエージェントがhtmxでかなりひどいコードを書いてたよ。

└

エージェントがLitや通常のHTML、HTMXを書くのにそんなに多くのトークンが必要なの？絶対に違うよ。それはスキルの問題だね。シャドウDOMはちょっと難しいこともあるけど。

元々はFlash開発者だったんだけど、スティーブ・ジョブズがiPhoneからFlashを禁止したときに、フロントエンドにシフトしたんだ。次の10年くらいでウェブの進化を見て、どの部分も大好きだった。今は、フロントエンドエンジニアとして、もっとシニアな立場になってる。再び、壁に書かれてることが見える。AIに向けてスキルを再構築する時が来たんだ。悪いニュースじゃないよ。経験豊富なエンジニアがガードレールやフレームワーク、新しいツールを作る手助けが必要なんだ。実際の技術経験を持ったエンジニアが必要な仕事がたくさんある。初期のインターネットのように、これは新しい始まりだと思っていて、私たちがどう進化させるかを決めることができるんだ。

Hacker Newsで議論の続きを見る