2488 words
12min read
Edit

Frontend Weekly 2026-01-16

#Frontend weekly #Chrome #Tailwind CSS #React #Next.js #Stylelint #Bun #Prettier #Angular

#Chrome 144 リリース

日付：2026年1月13日

Chrome 144がリリースされた。::search-text疑似要素によるページ内検索ハイライトのスタイル変更、宣言的な<geolocation>要素、新しい日時APIであるTemporal APIなどが追加された。

出展：Chrome 144 リリースノート

#::search-text 疑似要素

ページ内検索（Ctrl+F / Cmd+F）の結果ハイライトをカスタマイズするための::search-text疑似要素がサポートされた。

デモ：このボックス内のテキスト「検索対象」をブラウザのページ内検索機能（Ctrl+F または Cmd+F）で検索してください。デフォルトのハイライトとは異なるスタイル（ピンク背景、白文字）が適用されます。

/* ページ内検索のハイライトをカスタマイズ */
::search-text {
  background-color: #ff00ff;
  color: white;
  font-weight: bold;
  text-decoration: underline;
}

#geolocation 要素

ユーザーの位置情報を取得するための宣言的な<geolocation>要素が追加された。 JavaScriptによるプロンプト表示の代わりに、ユーザーが明示的にクリックすることで位置情報を提供するUIを表示する。これによりユーザーの意図が明確になり、以前ブロックした設定からの復帰も容易になる。

デモ：以下に <geolocation> 要素が表示されている場合、クリックすると位置情報の取得フローが開始されます（Chrome 144以降）。

待機中...
<!-- 位置情報取得ボタンを表示 -->
<geolocation  autolocate onlocation="updateInfo()"></geolocation>

参考：<geolocation> HTML 要素の導入 | Blog | Chrome for Developers

#Temporal API

JavaScriptのDateオブジェクトの問題点を解決するための新しい日時操作API Temporal が導入された。 タイムゾーンの取り扱いや計算が容易になり、イミュータブルなオブジェクトとして設計されている。

デモ：Temporal APIのサポート状況と現在時刻

判定中...
// 現在の日時を取得（ISO 8601カレンダー）
const now = Temporal.Now.plainDateTimeISO();
console.log(now.toString()); // 例: 2026-01-24T12:34:56.789

参考：Temporal - JavaScript | MDN

#clipboardchange イベント

システムクリップボードの内容が変更されたときに発火するclipboardchangeイベントが追加された（Chrome 140以降のOrigin Trialおよび一部環境）。 これにより、ポーリングなしでクリップボードの変更を検知し、リモートデスクトップアプリなどでクリップボードの同期を効率的に行えるようになる。

デモ：このページのテキストや、他のアプリでテキストをコピーしてみてください。

ログ待機中...
// クリップボードの変更を監視
navigator.clipboard.addEventListener('clipboardchange', (event) => {
  console.log('クリップボードの内容が変更されました');
  // 必要な同期処理などを実行
});

#Tailwind CSSのエンジニアリングチーム縮小とスポンサー支援

日付：2026年01月11日

Tailwind Labsは収益悪化に伴いエンジニアリングチームの75%を削減したが、Google AI StudioやSupabaseなどが新たなスポンサーとして支援を表明した。

発端は llms.txt の追加提案が、ドキュメントアクセス減少による有料製品への導線弱体化を懸念して見送られたことにある。 AIによるコード生成の普及が収益減の主因とされ、この窮状が明らかになった後にGoogle AI Studioなどがスポンサー就任を発表した。 Adam Wathan氏は組織規模は縮小したものの経営は安定したとし、コミュニティからの支援に感謝を示している。

出展：GitHub PR, Tailwind CSS Sponsor, Logan Kilpatrick (LinkedIn)

#VercelがReact Best Practicesを公開

日付：2026年01月14日

Vercelが10年以上にわたるReactとNext.jsの最適化ノウハウをまとめたreact-best-practicesリポジトリを公開した。 8つのカテゴリー（ウォーターフォールの排除、バンドルサイズの削減など）にわたり、40以上のルールがCRITICALからLOWの重要度とともに提供されている。AIエージェント向けのスキルとしても提供されており、npx add-skill vercel-labs/agent-skillsで導入できる。

出展：Introducing: React Best Practices

#AstroをCloudflareが買収

日付：2026年01月16日

Astroの開発元であるThe Astro Technology CompanyがCloudflareに参加することを発表した。Astro 6のリリースを控え、adoptionが毎年倍増する中、Cloudflareのリソースとサポートを得て開発を加速させる。

主な合意事項は以下の通り。

  • AstroはMITライセンスのオープンソースとして継続
  • メンテナンスは継続され、Cloudflare以外のデプロイ先も引き続きサポート
  • ガバナンスモデルやロードマップに変更はない
  • 全従業員がCloudflareに移籍し、引き続きAstroの開発に専念する

独自の有償サービス（Astro DBなど）による収益化の難しさが背景にあり、インフラ（Cloudflare）とフレームワーク（Astro）のそれぞれの強みを活かして「コンテンツ駆動型ウェブサイト」の未来を築くとしている。

出展：The Astro Technology Company joins Cloudflare

#Node.jsがasync_hooks起因のDoS脆弱性などに対応したセキュリティリリースを公開

日付：2026年1月13日

Node.jsが3件のHigh深刻度脆弱性（Buffer確保、ファイルシステム権限バイパス、HTTP/2クラッシュ）と、async_hooksに起因するDoS脆弱性（CVE-2025-59466）などを含むセキュリティリリースを公開した。影響を受けるリリースラインは20.x, 22.x, 24.x, 25.x。

async_hooksの脆弱性 (CVE-2025-59466)は、async_hooks（AsyncLocalStorageを含む）が有効な状態で、スタックオーバーフローが発生すると、回復不能なプロセス終了（exit code 7）を引き起こす問題。React Server ComponentsやNext.js、多くのAPMツールがAsyncLocalStorageを内部で使用しているため、これらを使用しているアプリケーションは潜在的にDoS攻撃に対して脆弱となる。

このパッチは、特定のエッジケースにおける回復力を向上させる「緩和策」と位置付けられている。根本的な解決として、再帰の深さを制限する、信頼できない入力による再帰処理を避けるといったアプリケーション側での防衛策が推奨されている。

Node.js 24以降ではAsyncLocalStorageの実装がAsyncContextFrame（V8の機能）ベースに変更されasync_hooksを使用しなくなったため、ReactやNext.jsはこの問題の影響を受けないが、APMツールが直接async_hooksを使用している場合は依然として影響を受ける可能性がある。

出展：December 2025 Security Releases, Mitigating DoS Vulnerability from Stack Space Exhaustion

#Stylelint 17.0.0 リリース、ESMへの移行やCSS Nesting対応など

日付：2026年1月15日

Stylelint 17.0.0がリリースされた。ECMAScript modules (ESM) への移行、CSS Nesting対応のルール刷新、Node.js 20.19.0未満のサポート終了などの破壊的変更が含まれる。

主な変更点:

  • ESM移行: CommonJS Node.js APIが削除され、ESMが必須となった。
  • CSS Nesting対応: selector-max-* 系のルールが標準CSS Nestingに対応し、ネストを展開せずに評価するようになった。
  • API変更: stylelint.lint() の戻り値から output プロパティが削除された（code プロパティを使用）。
  • 非推奨機能の削除: GitHub formatter、selector-class-pattern の resolveNestedSelectors オプションなどが削除された。

デフォルトの --fix モードが strict に変更され、構文エラーがある場合は修正を行わない安全な挙動となった。

出展：Release 17.0.0, Migrating to 17.0.0

#Bun v1.3.6がBun.Archive APIやJSONCパース機能などをリリース

日付：2026年1月13日

Bun v1.3.6がリリースされた。tarアーカイブを扱うBun.Archive API、コメント付きJSONをパースするBun.JSONC API、バンドル解析用のmetafileオプションなどが追加された。

主な新機能：

  • Bun.Archive API: tarおよびtar.gzアーカイブの作成と展開をゼロ依存でサポート。
  • Bun.JSONC API: コメントや末尾カンマを含むJSONCフォーマットをネイティブにパース可能に。
  • metafile: Bun.buildのオプションとして追加され、バンドルサイズの詳細な分析が可能に（esbuild互換）。
  • files: Bun.buildで仮想ファイルをバンドルしたり、既存ファイルの内容をオーバーライドしたりする機能。
  • パフォーマンス改善: Response.json()が3.5倍高速化、Promise.raceが30%高速化など。

出展：Bun v1.3.6 | Bun Blog

#Prettier 3.8がAngular v21.1サポートを追加

日付：2026年1月14日

Prettier 3.8がリリースされ、Angular v21.1の新機能がフルサポートされた。 @switchブロック内での連続する@caseステートメントや、テンプレート内の配列・オブジェクトリテラルおよび関数呼び出しでのスプレッド要素（...）などが美しくフォーマットされるようになった。

また、Markdownコードブロック内のAngular構文のフォーマットもサポートされた。

出展：Prettier 3.8: Support for Angular v21.1

#GitHub ProjectsがHierarchy viewをパブリックプレビューとして公開

日付：2026年1月15日

GitHub ProjectsにHierarchy view（階層表示）が追加された。プロジェクトのテーブルビューでIssueの階層構造を直接確認でき、コンテキストを切り替えることなく複雑なタスクの分解状況を可視化できる。

主な機能：

  • 最大8階層までのサブイシューの展開・折りたたみが可能
  • 階層構造を維持したままのグループ化、スライス、ソート、フィルタリング
  • プロジェクト外の既存サブイシューの表示と追加

また、Issueのパフォーマンス改善も実施され、瞬時に読み込まれるIssueの割合が2%から12%に向上したほか、Projectsに新しいViewメニューが追加されている。

出展：Hierarchy view now available in GitHub Projects

Edit on GitHub