Cybozu Frontend Monthly #70

イベント概要

サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。

その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエンジニアのメンバーが共有していきます。

このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。

開催日

2026年07月28日

イベントページ

https://cybozu.connpass.com/event/401243/

メンバー

---

コンテンツ

👀 Notable Articles

Next.js 16.3 Preview

• 共有者: @mugi_uno

Next.js 16.3 Preview における「Instant Navigations」「Turbopack の改善」「AI 連携の強化」といった内容を含むアップデートの詳細情報が公開されました。

Instant Navigations

https://nextjs.org/blog/next-16-3-instant-navigations

Next.js App Router の基本的な構成であるサーバー主体の構成を保ちつつ、SPA のような即時遷移を可能とする機能です。 中でも新しく追加された Partial Prefetching が大きい変化で、従来は画面内のリンクごとにプリフェッチされていましたが、Partial Prefetching では、ルートごとに再利用可能なガワの部分（シェル）だけをプリフェッチしてキャッシュする仕様が取り入れられました。なお、これを “レイアウト” ではなく “シェル” と呼んでいるのは、レイアウトに限らず <Suspence> や use cache でマークされた箇所まで潜って判断するためのようです。（Next.js DevTools の機能追加で、どこまでをシェルとして扱っているかの確認も可能になっているようです）

最終的に次のような形で SPA のような遷移が実現されます。

• cache components の仕組みによって、<Suspence> および use cache のいずれかが強制されていく
• <Suspence> および use cache の境界までを “シェル” としてプリフェッチする
• 遷移時にはシェルまでを即時描画し、遷移後に動的な部分をストリーミングで描画する

Turbopack の改善

https://nextjs.org/blog/next-16-3-turbopack

主にパフォーマンスやメモリ使用量の大幅な改善が含まれます。

また、experimental な機能として Rust React Compiler のサポートが含まれています。 現状では React Compiler の有効化には Babel Transform が必須です。実行時のパフォーマンス改善が期待できますが、引き換えにビルドパフォーマンスが大幅に低下してしまうケースが珍しくありません。新たに React チームが開発している Rust 製の React Compiler によって、このビルドパフォーマンス問題の改善が期待できます。

AI 連携の強化

https://nextjs.org/blog/next-16-3-ai-improvements

AI Agent を主体とした開発を想定した機能が多数追加されており、基本的なナレッジ周りでは、AGENTS.md を参考にしたドキュメントのバンドルや、llms.txt のサポートが行われました。

また、エラー画面にはエージェントへ修正指示を出すための「Copy prompt」ボタンが配置されたり、多くの Agent Skills の追加も行われています。 特に、next-cache-components-adoption Skill や next-cache-components-optimizer Skill は、前述の Instant Navigations に関連して Cache Components 周りの有効化や最適化を行うためのスキルとなっており、新機能に関するサポートも AI を駆使してスムーズに実施できるようになっています。

npm install-time security and GAT bypass2fa deprecation

• 共有者: @nus3

npm v12 がリリースされ、npm install 時の動作が次のように変更されました。

• allow-scriptsがデフォルト""に
  • インストール時のライフサイクルスクリプト（preinstall、postinstallなど）がデフォルトでは実行しない
• allow-gitがデフォルトnoneに
  • デフォルトでは Git リポジトリから依存関係を取得しない
• allow-remoteがデフォルトnoneに
  • デフォルトでは URL から依存関係を取得しない

改めて、各パッケージマネージャーの挙動をまとめてみました。

パッケージマネージャー	ライフサイクルスクリプト
npm v12	❌ デフォルト実行しない
pnpm v11	❌ デフォルト実行しない
Yarn v4.14 以降 (Berry)	❌ デフォルト実行しない
Bun	❌ デフォルト実行しない
Deno	❌ デフォルト実行しない

pnpm dlx my-toolの場合、my-tool 自身の postinstall は実行されるにあるように、dlx や npx で指定したパッケージのコマンドを実行する場合は、ライフサイクルスクリプトは実行されるかどうかは別途、調べたほうが良さそう。

Announcing TypeScript 7.0

• 共有者: @sajikix

TypeScript 7.0 が、正式リリースされました。Go 言語によるネイティブポート化プロジェクトの成果で、元のコードベースの構造とロジックをできるだけ忠実に維持しつつ書き直すことで、2 つのコンパイラ間の結果の一貫性・互換性を保ちながら高速化を実現しています。

vscode や sentry などの巨大 PJ では概ね 7 倍以上の高速化を実現しており、同時にメモリ使用量も削減しているそうです。Slack、Vanta、PowerBI、Canva など各社からの導入事例も紹介されており、Slack は CI の型チェック時間が 7.5 分から 1.25 分になったとしています。

並列化オプションについて

また --checkers オプションと--buildersオプションで型チェックや build の並列数をカスタマイズできるようになっています。--checkersはデフォルトが４ですが、コア数が多い大きめのマシン/大規模コードベースでは増やすとさらに高速化する可能性があります。一方で並列数を増やすほどメモリ使用量は増加するので、CI などでメモリ不足となる場合はむしろ減らすといった調整も可能です。--buildersオプションは monorepo などの環境で有効としていますが、--buildersと--checkersの数は掛け算になる点は注意が必要です。また全体を単一スレッド化するデバッグ用フラグとして--singleThreadedも用意されています。

v7 へのアップデート

v7 への移行ですが、v6 に上げられている人は大きな対応は不要なようですが、以下などは改めて注意すると良さそうです。

• strict: true、module: esnextがデフォルトに
• rootDirがデフォルトで./になり、src 配下に tsconfig がない構成では明示指定が必要
• typesのデフォルトが[]に変更（@types パッケージの暗黙読み込みがなくなる）
• target: es5、moduleResolution: node/node10/classic、module: amd/umd/systemjs/none、baseUrlなどが完全に非サポートに

開発者向け API について

7.0 時点ではプログラマティック API を提供しないことは明言されており、lint 系のツールなどは 6.0 API を再エクスポートする@typescript/typescript6 パッケージを使うことが推奨されています。(一部の lint ツールなどはカスタマイズして内部の API を露出させて使っている場合もありますが。)

一方で後続の v7.1 では現行とは異なる新しい API が提供される見込みだとしており、今後 TypeScript の API がどのように変わるのかは注目です。

🗓 Monthly Articles

📖 Framework, Library

• React Router v8
  • 12 年の歴史を持つ React Router のメジャーバージョン v8 がリリースされ、ミドルウェア対応・分割ルートモジュール・型安全なhrefなどが追加。破壊的変更は最小限に抑えられており、Node 22.22+や React 19.2.7+などベースラインの引き上げが主な変更点。
• pnpr
  • pnpm 発の Rust 製 npm レジストリサーバーpnprが experimental として開発中で、verdaccio のようにプライベートレジストリの構築や upstream registry のプロキシ・キャッシングに利用できる。
• Astro 7.0
  • 速度向上に重点を置いた Astro 7.0 がリリースされ、Rust で書き直された.astroコンパイラや新しい Markdown/MDX パイプライン、キュー方式レンダリングエンジンの導入によりビルドが最大 61%高速化。Vite 8/Rolldown 統合やルートキャッシングの安定化、AI エージェント向けのバックグラウンド dev サーバーなども追加。
• Rolldown Pulls Rust React Compiler Integration After Binary Size Increase
  • Rolldown は Rust 版 React Compiler の Rolldown/Vite 統合を、Oxc napi アドオンのバイナリサイズが 3.51MiB から 8.66MiB へ肥大化したことを理由に一旦中止した。Evan You はフレームワーク非依存の Vite に全ユーザー向けで React 固有コードを配布する負担を懸念しており、現在はより軽量な実装への切り替えが検討されている。
• Announcing Rspack 2.1
  • Rspack 2.1 がリリースされ、Rust 版 React Compiler のサポートにより Babel 版比 7〜13 倍の高速化を実現。Vite/Turbopack 互換のimport.meta.globサポートも追加され、Rspack 自体ではないものの TanStack Start が Rsbuild を正式サポートするなどエコシステムも拡大している。
• Turbopack: What’s New in Next.js 16.3
  • Next.js 16.3 の Turbopack は、キャッシュ退避により dev サーバーのメモリ使用量を最大 90%削減し、next buildにも対応した永続ファイルシステムキャッシュでビルドを最大 2.3 倍高速化した。experimental な Rust 版 React Compiler 統合や Vite 互換のimport.meta.globサポートも追加されている。
• Next.js 16.3: Instant Navigations
  • cacheComponentsとpartialPrefetchingを有効にすることで、Suspense によるストリーミングや'use cache'によるキャッシュを使い、サーバー駆動の Next.js アプリでも SPA のような瞬時のページ遷移を実現する新機能。リンク単位ではなくルート単位で再利用可能な「シェル」をプリフェッチする方式に変更し、Navigation Inspector やテスト用のinstant()ヘルパーで遷移速度を検証できる。
• Next.js 16.3: AI Improvements
  • AGENTS.md へのドキュメント自動同期、next-dev-loopなど複数の agent 向け一次 Skill の追加、React DevTools 統合を備えたagent-browser、Instant Insights のエラーをコピペ可能な修正プロンプトに変換する「Actionable errors」など、コーディングエージェント向け機能を多数追加した。
• June 2026 - Components for Chat Interfaces
  • shadcn/ui が会話 UI 向けの新コンポーネント群(MessageScroller、Message、Bubble、Attachment、Marker)を公開した。ストリーミング応答やスクロール制御を扱う小さな部品を組み合わせて、AI チャットやサポートインボックスなど様々な会話インターフェースを構築できる。
• feat(experimental): support aria snapshot
  • Vitest に Playwright の Aria Snapshot に着想を得たtoMatchAriaSnapshot()/toMatchAriaInlineSnapshot()が実験的機能として追加され、DOM のアクセシビリティツリーをスナップショットとして比較できるようになった。
• Wordgard Docs
  • ProseMirror の後継として開発されているリッチテキスト編集ライブラリ「Wordgard」のドキュメント。ProseMirror からの移行ガイドが用意されている一方、ProseMirror 自体も今後サポートが継続される見込み。
• Gea — Compiler-First Reactive UI
  • 通常の JavaScript のクラスと関数だけでビルド時に依存関係を解析し、Virtual DOM やフック・シグナルを使わずリアクティブな DOM 更新を実現する新しい UI フレームワーク「Gea」。Hello World のバンドルサイズは SolidJS の約 30 分の 1、React の約 420 分の 1 と非常に軽量。
• LiteRT.js, Google’s high performance Web AI Inference
  • TensorFlow Lite/TensorFlow.js の後継として開発された、ブラウザ上で機械学習モデルを高速推論できる JavaScript ライブラリ「LiteRT.js」。CPU 向け XNNPACK、GPU 向け WebGPU、NPU 向け WebNN など複数のバックエンドに対応する。
• tsz-org/tsz: A performance-first TypeScript checker
  • AI コーディング支援を活用して Rust で開発されている高速な TypeScript チェッカー「tsz」。tsc の型チェック・出力・LanguageService の互換性テストで 9 割超のカバレッジを達成しており、tsgo の 2 倍速を目標に掲げている。
• NestJS v12 is Coming: What’s New
  • 2026 年 Q3 リリース予定の NestJS v12 では、コアパッケージの ESM 移行、Webpack から Rspack へのビルドツール刷新、ESM プロジェクトでの Vitest と oxlint のデフォルト採用、ルートデコレーターの Standard Schema 対応(Zod/Valibot など)が予定されている。
• Oxc Type Checker
  • oxc プロジェクト内で開発が始まった実験的な JS/TypeScript 型チェッカーのスキャフォールド。パーサーとセマンティックアナライザーを組み合わせて AST を走査し診断を出す土台のみで、実際の型チェック機能はまだ実装されていない。
• Announcing Vite+ Beta
  • Vite・Vitest・Rolldown・tsdown・Oxlint/Oxfmt を束ねた統合ツールチェーン「Vite+」のベータ版が公開された。vp dev/vp buildなど一貫した CLI を提供し、既に 1,300 以上のパブリックリポジトリで採用されている。
• Engineering High-Performance Parsers with Data-Oriented Design
  • Zig 言語で書かれた JS/TS パーサー yuku の設計思想を解説する記事。文法の実装以上にメモリ上のデータ構造(平坦配列、ポインタではなくインデックスで参照、文字列をオフセットで管理、トークンのビットエンコーディングなど)が性能を左右するという考え方に基づき、既存パーサー比 3〜10 倍の高速化を実現している。
• Blume — fast, AI-ready, markdown-first docs
  • Vite/Astro をベースにしたマークダウン優先の OSS ドキュメントフレームワーク。検索・SEO 最適化・ダークモード・多言語対応(36 言語)が標準装備な上、llms.txt 出力やページ内 AI アシスタント、MCP サーバーといった AI 連携機能が最初から組み込まれているのが特徴。
• Playwright | Rstest
  • Rstest が Node.js ワーカー環境向けに Playwright のフィクスチャとリトライ可能なアサーションを提供するパッケージ@rstest/playwrightを公開。browser/context/page/request/serveなどのフィクスチャとトレース機能を備え、外部の完成したページ・アプリに対する E2E テストを実行できる。

⚡️ Services

• WebSocket support is now in Public Beta
  • Vercel Functions が WebSocket 接続をパブリックベータでサポート開始し、チャットやリアルタイムコラボレーションなどの双方向通信が実装可能に。Fluid compute 上で動作し、課金は接続待機時間ではなくメッセージ処理時間ベースで、Node 標準のwsライブラリや Socket.IO も利用できる。
• Hardening npm Publishing
  • azu さんによる、サプライチェーン侵害から npm パッケージの公開フローを守るためのスライド。ローカル(トークン非保存)・GitHub Actions(OIDC Trusted Publishing)・npm(Staged Publishing・MFA 必須化)の 3 層で承認プロセスを分散させ、悪意あるパッケージを公開前に食い止める設計を解説している。
• npm install-time security and GAT bypass2fa deprecation
  • npm install 時にライフサイクルスクリプトの実行(allowScripts)や Git/リモート由来の依存関係解決(—allow-git、—allow-remote)がデフォルトでオプトインになった。サプライチェーン攻撃対策として、信頼できるスクリプトは npm approve-scripts で明示的に承認する運用に変わる。
• GitHub Actions の parallel でデプロイは 8 分 →3 分、CI はコスト 3 割減になった
  • 2026 年 6 月 25 日に GA となった GitHub Actions のステップ並列実行機能(parallelブロックやbackground/wait構文)を使った実践例を紹介する記事。同一ジョブ内で複数ステップを並列化することで、直列で 8 分かかっていたデプロイ処理が 3 分に短縮され、CI コストも 3 割削減できたという。

🖥 Browsers

• Introducing the Safari MCP server for web developers
  • WebKit が AI エージェント向けに Safari ブラウザへ接続できる MCP サーバーを発表。スクリーンショット取得や DOM 操作、アクセシビリティ・パフォーマンス検証など 15 以上のツールを備え、Safari 27 beta / Safari Technology Preview 247 以降で利用可能。

💬 Languages

• Announcing TypeScript 7.0 RC
  • 既存の TypeScript コンパイラを Go で書き直したメジャーバージョン 7.0 の RC が公開され、ネイティブ実装と並列化により最大 10 倍の高速化を実現。型チェック・パース・エミットを複数スレッドで実行できる--checkers/--buildersフラグが追加される一方、ES5 ターゲットや AMD/UMD 形式は非サポートとなる。
• Announcing TypeScript 7.0
  • Go 言語でネイティブ実装された TypeScript 7.0 が正式リリース。実プロジェクトで最大 11.9 倍のビルド高速化とメモリ使用量削減を達成し、strictのデフォルト有効化など設定面の変更も入っている。

🤖 Runtimes

• Deno 2.9
  • Deno 2.9 がリリースされ、UI を WebView・ロジックを Deno で実行する単一バイナリにコンパイルできる experimental なdeno desktop機能や、CSS モジュールインポート、npm/pnpm/yarn/Bun からの移行時にロックファイルを引き継ぐ対応が追加された。サプライチェーン対策として min-release-age のデフォルト 24h 化や trust-policy サポートも実装され、HTML/CSS/SQL フォーマッタは lax ベースに再構築された。
• JavaScript を事前コンパイルする。不可能と言われた挑戦に挑む開発者。
  • JavaScript を WebAssembly やネイティブバイナリへ事前コンパイル(AOT)するプロジェクト「Porffor」の作者 Oliver Medhurst 氏へのポッドキャストインタビューを紹介する記事で、AWS Lambda のコールドスタートを 15ms まで短縮した事例やクロージャ・GC など AOT 特有の課題、Test262 テストスイートで 60%合格という進捗に触れている。
• Rewriting Bun in Rust
  • Bun チームが約 53.5 万行あった Zig 実装を Rust へ全面移行したと発表。メモリ安全性の向上に加え、バイナリサイズ約 20%削減、パフォーマンス 2〜5%向上、128 件のバグ修正を実現した。
• Ant, a lightweight JavaScript runtime
  • 独自エンジン「Ant Silver」をベースにした軽量 JS ランタイム。Node 互換 API・VM 分離サンドボックス・Wasm サポートを備え、9MB のシングルバイナリで npm パッケージや TypeScript をそのまま実行できる。
• Node v26.5.0 (Current)
  • blob.textStream()の実装や、ESM でテキストファイルを直接 import できる--experimental-import-textフラグなどが追加された Node.js のマイナーリリース。

📝 Specifications

• RFC 10008: The HTTP QUERY Method
  • HTTP に新しい QUERY メソッドを追加する RFC 10008 が Proposed Standard として公開され、GET と POST の中間としてリクエストボディにクエリ内容を送りつつ安全性・冪等性を保てるようになる。キャッシュや条件付きリクエスト、Location/Content-Location による結果 URI の付与にも対応。
• WebMCP — Give agents tools, not DOM
  • AI エージェントが DOM 解析やスクリーンショットに頼るのではなく、Web ページ側が宣言した型付きツールを直接呼び出して操作できる WebMCP の考え方を、予約システムを題材に「従来の DOM 推測(40 以上の DOM ノード解析)」と「WebMCP での直接呼び出し(3 ツール)」を対比して示すデモサイト。

🦆 Others

• Helmlab — The Most Accurate Color Space
  • UI デザインシステム向けに、色生成用の GenSpace と色差計算用の MetricSpace からなる新しい色空間ファミリー「Helmlab」が提案された。64,000 件超の人間による色差判定データで学習した解析的モデルで、90 件のベンチマークで OKLab に 62 勝 9 敗するが、グレースケール近傍や CVD(色覚異常)対応では OKLab の方が優れるとしている。