こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。
Trapping misbehaving bots in an AI Labyrinth
Cloudflare が、不適切な AI クローラーやボットを混乱させ、リソースを浪費させる新しい対策手法「AI Labyrinth」を発表しました。
この機能は、不適切なボット活動を検出すると、AI が生成したリンクページの集合を自動的にデプロイします。カスタムルールを作成する必要はなく、無料プランを含む全ての顧客が利用できます。
主な特徴は以下の通りです:
- Workers AI を使用して人間らしいコンテンツを生成し、R2 に保存
- 生成されたコンテンツは科学的事実に基づいており、誤情報の拡散を防止
- 通常のユーザーには見えないように設計され、SEO にも影響を与えない
- ボットがこれらのリンクをたどることで、新しいボットパターンを検出可能
- ダッシュボードのボット管理セクションでワンクリックで有効化可能
現在、AI クローラーは Cloudflare のネットワークに対して 1 日 500 億以上のリクエストを生成しており、これはウェブリクエスト全体の約 1%を占めています。この AI Labyrinth によって、不正なクローリングに対する新しい防御手段が提供されることになります。
Support Policy | Next.js
Next.js のサポートポリシーが公開されました。メジャーバージョンは以下の 2 つの LTS フェーズでサポートされます：
- Active LTS: 次のメジャーバージョンがリリースされるまで。新機能、バグ修正、パフォーマンス改善、セキュリティパッチが提供されます
- Maintenance LTS: Active LTS の次のフェーズで、重要なバグ修正とセキュリティアップデートのみが提供されます。リリースから 2 年間継続されます
現在サポートされているバージョンは以下の通りです：
- 15.x (Active LTS) - 2024 年 10 月 21 日リリース
- 14.x (Maintenance LTS) - 2023 年 10 月 26 日リリース
本番環境では、Active LTS または Maintenance LTS のバージョンの使用を推奨するとのことです。
A Modern CSS Reset
現代的な CSS リセットに関する記事で、interpolate-size プロパティを利用したアニメーションのデフォルト挙動改善の項が追加されました。
interpolate-size: allow-keywords; を指定することで、auto や min-content などのキーワードを使用したアニメーションが可能になります。2025 年 3 月時点では Chrome/Edge のみの対応ですが、他ブラウザでも対応が進んでいるので reset CSS として組み込んでおくのが良さそうです。
State of Vue.js Report 2025
Monterail と Evan You 氏,Vue・Nuxt コアチームとの共同作業によって作成された Vue.js の状態に関する包括的なレポートが公開されました。
Evan You 氏による Vue.js とそのエコシステムの現状についての話や直近での update、デベロッパーサーベイ、今後の展望などがまとまっています。デベロッパーサーベイでは、Vue と Nuxt の使用方法、課題、改善してほしい点などが挙げられており、TypeScript 人気の増加や Pinia がグローバル状態管理の主要な選択肢となっているなどの傾向が見られます。
フロントエンドテストの与え方
フロントエンドのテストを運用する上で意識することなどが、実際のテストコードを例に挙げて紹介されています。
React Trends in 2025
React の 2025 年のトレンド予測に関する記事です。主なトレンドとして、React Server Components (RSC)と React Server Functions (RSF)の普及、React Forms の改善、React Compiler の登場などが挙げられています。
特に注目すべき点としては、Next.js だけでなく TanStack Start や React Router も含めたフレームワーク間の競争、Shadcn UI からの次の UI ライブラリの模索、AI と React の相互影響などが紹介されています。また、Biome などの新しいツールチェーンの発展についても言及されています。
Item Flow, Part 1: A new unified concept for layout
WebKit チームが提案する、CSS Grid と Flexbox を統合した新しいレイアウト概念「Item Flow」についての記事です。
この提案は Masonry レイアウトの実装についての議論から生まれたもので、Flexbox と Grid の機能を統合し拡張するアプローチを取っています。新しい統一プロパティとして、item-direction、item-wrap、item-pack、item-slack などが導入され、これらを組み合わせた item-flow というプロパティも提案されています。
Typed Japanese
日本語の文法を型システムとして形式化するプロジェクトが公開されました。
このプロジェクトは TypeScript のような型システムを利用して、日本語の文法的な正しさを検証することを目指しています。文節、助詞、語順などの日本語の特徴を型として表現し、文法的に正しい文章構造を型システムによって保証しようとしています。これにより、日本語学習者の支援や自然言語処理の品質向上などへの応用が期待できます。
Next.js plugin for alternate bundler
Next.js に Rspack をバンドラーとして使用できるプラグイン「@next/plugin-rspack」が追加されました。従来の webpack から Rspack に簡単に切り替えることができます。
Express.js v5.1 Latest Release
Express.js のバージョン 5.1 がリリースされました。このバージョンでは、パフォーマンスの改善や、res オブジェクトの機能追加などの改善が含まれています。
Build and deploy Remote Model Context Protocol (MCP) servers to Cloudflare
Cloudflare で MCP を動作させるために用意されているツールや手順などの紹介で、主に次の 4 つについて紹介しています。
- workers-oauth-provider - OAuth を MCP Server に適用する
- McpAgent - MCP Server を SSE 対応させる。MCP 自体の仕様変更に伴う Streamable HTTP への移行も見越してるとのこと
- mcp-remote - Claude Desktop や Cursor などの認証を伴う MCP 利用に対応してないツールへのアダプタ
- Workers AI LLM Playground - MCP を直接ブラウザ上で試すためのプレイグラウンド環境
Minding the Gaps: A new way to draw separators in CSS
Microsoft の Edge チームが、CSS で区切り線を描画するための新しい方法「gap-separator」プロパティを紹介する記事を公開しました。このプロパティは、Flexbox や Grid レイアウトの gap 内に区切り線を簡単に描画する方法を提供します。
従来は疑似要素やボーダーを使用して区切り線を実装していましたが、これらの方法には様々な制限がありました。新しい gap-separator プロパティを使用すると、複雑なレイアウトでも簡単に一貫した区切り線を実装できます。現在は Microsoft Edge の実験的機能としてフラグ付きで利用可能で、W3C への標準化提案も進行中とのことです。
Discussion