Web Dev Digest: 2026‑05‑07

Top 20

Vercel Flags now supports JSON values

Source: Vercel Changelog | Published: 2026-05-07 18:00 JST

• Vercel Flags が boolean/string/number に加えて JSON 値を正式サポートし、関連する複数のフラグを 1 つに畳み込めるようになった。
• これまで ai_model／ai_temperature／ai_max_tokens のように分散していた設定を、単一の model フラグに構造化オブジェクトとして格納できる。
• 例として「バリアント A は Claude Sonnet＋特定温度／トークン設定、バリアント B は Claude Opus＋別パラメータ」を 1 フラグで切替可能にする AI モデル比較ユースケースが提示された。
• A/B テスト、新モデルへの段階的トラフィックシフト、障害時のプロバイダ即時切替といった運用パターンに直接効く。
• ダッシュボードの Flags UI から JSON 値を編集でき、既存の Flags SDK 経由でそのまま読み込めるため破壊的変更はない。

Astro 6.3

Source: Astro Blog | Published: 2026-05-07 09:00 JST

• Astro 6.3 が Experimental Advanced Routing を導入し、Cloudflare Workers／Deno／Bun／Hono と互換の fetch ハンドラを export してリクエスト経路を完全制御できるようになった。
• astro／actions／middleware／pages／i18n を個別ハンドラとして合成でき、特定パスを外部サービスへプロキシしつつ残りを Astro に委ねる構成が組める。
• 外部画像取得時にリダイレクトを最大 10 回まで追従するようになり、CDN や画像サービスの 3xx チェーンが原因で読み込みに失敗していたケースを解消する。
• セキュリティ強化として SVG の画像最適化パイプライン経由のラスタライズが既定で無効化され、必要な場合のみ image.dangerouslyProcessSVG で復元する設計になった。
• AstroCookies に新しい consume() メソッドが追加され、Cookie を消費済みとマークして Set-Cookie ヘッダ値を返せるようになった一方、静的 AstroCookies.consume(cookies) は非推奨化された。

Starlight 0.39

Source: Astro Blog | Published: 2026-05-07 09:00 JST

• Astro 公式ドキュメントフレームワーク Starlight 0.39 が、自動生成サイドバーをカスタムリンクや外部 URL と同じセクション内に並べられる柔軟なスロット構成に対応した。
• スタイル面では :has() を活用したネストリストの間隔改善と、サイドバー操作時のレイアウトシフトを抑える scrollbar-gutter: stable の適用が入った。
• 多言語サイト向けに、デフォルトロケールに対する x-default メタリンクで SEO を最適化する仕組みが追加された。
• 中国語・日本語のテキストレンダリングが text-autospace CSS プロパティの採用で改善された。
• 内部の i18next ライブラリが v23 から v26 へ更新され、npx @astrojs/upgrade で既存サイトをそのまま追従できる。

Node.js 26.1.0 (Current)

Source: Node.js Blog | Published: 2026-05-07 19:09 JST

• Node.js 26.1.0 が --experimental-ffi フラグ付きの実験的 node:ffi モジュールを搭載し、JavaScript から動的ライブラリのネイティブシンボルを呼び出せるようになった（Permission Model 下では --allow-ffi が必要）。
• crypto 周りでは UUID v7 を生成する randomUUIDv7() の実装、crypto.diffieHellman() がキーデータを直接受理可能化、ML-KEM／SLH-DSA への JWK 対応強化が入った。
• fs.stat() に signal オプションが追加されてリクエストキャンセルが可能になり、statfs 結果に frsize フィールドが露出した。
• Test Runner にテスト順のランダム化、AbortSignal.timeout() の mock-timers 対応、モックタイムアウト API の整列など複数の改善が入った。
• 同梱依存も大幅更新され、undici 8.2.0／OpenSSL 3.5.6／V8 14.6.202.34／llhttp 9.4.1／nghttp2 1.69.0／npm 11.13.0 になった。

How Cloudflare responded to the “Copy Fail” Linux vulnerability

Source: Cloudflare Blog | Published: 2026-05-07 22:00 JST

• Cloudflare が CVE-2026-31431（Linux カーネルの algif_aead 経由のローカル特権昇格、4 月 29 日公開）にパッチ適用前から無被害で対応した経緯を公開した。
• 既存の振る舞い検知が「シグネチャ更新もルール変更も人手介入もなし」で 4 月 29 日 22:52 UTC に攻撃パターンを検知し、4 月 30 日 03:14 UTC に正式インシデント宣言した。
• 暫定緩和としてカーネルモジュール削除を選ばず、AF_ALG ファミリの socket_bind を許可リスト外で拒否する eBPF-LSM プログラムを当日中にフリート全体に展開した。
• パッチ済みカーネルへの順次切替は 5 月 4 日以降の通常リブート自動化に乗せ、サービス影響を出さずに完了させた。
• 開示前 48 時間分のカーネルログ・アクセスログ・整合性検証から、悪用試行ゼロ・顧客影響ゼロを確認したと結論している。

一人で数十万行のコードを管理する方法

Source: Zenn | Published: 2026-05-07 21:15 JST

• TypeScript 製の自作ビルドツール「Rollpie」と独自編集ツール群で 10 万行超のコードを 1 人運用する設計を著者が公開した。
• 中央 Web サーバが各専門サーバへ問い合わせて結果を合成する構成で、DB クエリ結果を全面キャッシュし SSR と SPA で再利用する。
• 名前付け規約を徹底し、たとえば sync プレフィックス関数は他コンポーネント由来のイベントだと一目で判別できるようにしている。
• 抽象レイヤではなくドメイン単位の分割を採り、過剰抽象化を早期に検知できる構造にしている。
• 10 万行を超えるコードベースでは「仕様書を書くコスト < 後年のリファクタコスト」が成立するため、定期的な仕様書化を必須プラクティスに据えている。

CSR / SSR / RSC を辿る React 進化史 — 結局これは「JS を送るか送らないか」の話だった

Source: Zenn | Published: 2026-05-07 18:33 JST

• React のレンダリング進化を「クライアントへ JavaScript を送るかどうか」という単一の問いに集約して整理する記事。
• CSR は HTML→JS バンドル→API データの 3 ラウンドトリップが必要で、画面が「空→ローディング→コンテンツ」と 3 段階になり、性能がクライアント機材に依存する。
• SSR は最初の往復で表示できるが、コンポーネントがサーバとハイドレーションで二度実行され、不要な JS まで全量送信される。
• RSC は静的部分と対話的部分を分離し「クライアントで実行する必要がある JS だけ送る」設計で、Server Components はサーバ単体実行・Client Components は SSR 挙動を維持する。
• 著者は 'use client' の命名や Props 制約の不直感さを「leaky abstraction」と評し、本質は「Server/Client」ではなく「Static/Interactive」だと再フレームしている。

Expo Router / Next.js App Router のレイアウト設計を責務で整理する

Source: Zenn | Published: 2026-05-07 19:50 JST

• Expo Router と Next.js App Router の _layout／layout.tsx を「ナビゲーション宣言」「Provider ラップ」「共通ロジック」の 3 責務に分離して設計するパターンの提案。
• ルートレイアウトには <ThemeProvider>／<AuthProvider> などのグローバル Provider と Stack 等のベースナビ宣言だけを置く。
• Route Group（(auth) と (app)）で URL を変えずに認証境界を切り、未ログイン時は (auth) 配下のガードでブロックし、(app) 配下では認証必須を強制する。
• ネストしたナビゲーションは独立した Stack インスタンスとして扱い、外側で headerShown: false にしても内側のヘッダは消えない、という多層挙動を明示する。
• 単なるファイル整理目的で _layout を増やすのは避け、Route Group で済ませることをルールとして提示している。

【2026年版】なぜ私たちは今もReactを選ぶのか？AI時代の「最強の生存戦略」としてのReact

Source: Zenn | Published: 2026-05-07 14:09 JST

• 著者は Claude Code／Cursor などの AI 開発ツールにおいて React は学習データ量が最大で、生成される回答の精度が最も高いと主張する。
• React のコンポーネント分割の作法が、AI へ的確な指示を出す「分解能力」と直結するため、React を学ぶこと自体が AI 時代のプロンプト力強化につながると位置付ける。
• 日本語ドキュメントや Zenn 上の事例が豊富なため、AI が生成したコードの裏取り（fact-check）コストが他フレームワークより低いと述べる。
• 中級者には React Server Components や React Compiler がパフォーマンス最適化を引き受けることで、開発者の役割が「実装者」から「設計者」にシフトすると論じる。
• 結論として、React を AI 時代の「最強の OS」と位置付け、初学者の入口かつフルスタック化の踏み台として勧めている。

React + KaTeX で details に折りたたんだ数式の自動採番がズレる問題

Source: Zenn | Published: 2026-05-07 11:10 JST

• React + KaTeX 環境で <details> を閉じると、開いていた時に (6) だった式が (2) に再採番されるバグの原因と対処を解説。
• 根本原因は KaTeX の自動採番が katex.css の counter-increment: katexEqnNo という CSS カウンタに依存していること。
• HTML の <details> が閉じると配下要素は display: none 扱いになるが、CSS カウンタは非表示要素では increment されないため、後続の式が番号を飛ばして再付番される。
• 対処は \begin{equation} の自動採番に頼らず、\tag{n} で番号を平文として埋め込む方法へ切り替えること。
• 著者は \begin{equation} ブロックを \tag{n} 付き形式へレンダリング前に一括変換するユーティリティ関数を提示し、CSS カウンタとブラウザ表示状態への依存を断ち切っている。

Vitestで window.open をモックしてリンクボタンの挙動をテストする

Source: Qiita | Published: 2026-05-07 21:37 JST

• jsdom（Vitest デフォルト環境）はブラウザ API を完全実装しておらず、window.open を直接呼ぶと “not implemented” エラーで落ちる、という前提から出発する。
• 解決策は vi.spyOn(window, "open").mockImplementation(() => null) で実タブ生成を抑止しつつ呼び出し記録を取る方法。
• 戻り値の null は WindowProxy | null の型に整合させるためで、TypeScript 環境でもそのまま型安全に書ける。
• アサーションは expect(openSpy).toHaveBeenCalledWith("https://github.com/testUser1", "_blank") のように URL とターゲットを 1 行で検証できる。
• 後続テストへの副作用を防ぐため openSpy.mockRestore() での復元を必須プラクティスとして提示している。

ReactのZustandとReduxのステート管理の差異を比較し、「なぜZustandを選ぶべきか」を考察

Source: Qiita | Published: 2026-05-07 20:31 JST

• Redux は Action／Reducer／Middleware（thunk・saga）／Provider という 4 層構造を要求するのに対し、Zustand は create()／set()／get()/useStore() の 4 API のみで完結する。
• 設計の対比軸は「Redux=単一中央ストア」対「Zustand=用途別の複数ストア」、および「Redux=Action 経由」対「Zustand=直接 set 呼び出し」。
• React コンポーネント外でも store.getState() でネイティブにアクセスできる点が Zustand の優位として挙げられる。
• 著者の選定基準は「中小規模・速度重視・React 中心 → Zustand」「大規模・長期保守・厳格な状態監査・大人数 → Redux」。
• 根本的な差は Redux が「アーキテクチャの規律」を強制し、Zustand が「シンプルさと柔軟性」を優先するという設計哲学の違いにあると結論している。

VueでComposableを作る際に便利なproxyRefsの使い方

Source: Qiita | Published: 2026-05-07 15:41 JST

• Vue の proxyRefs は Composable から ref/reactive を返す際に Ref を自動アンラップし、利用側が .value を書かずに済むラッパー API である。
• proxyRefs({ count1, ...toRefs(data), incrementAll }) のように ref()／reactive()／toRefs() と組み合わせる典型形を示している。
• Before（counter.count1.value++）／After（counter.count1++）と書き味が直接的になる。
• 純粋な reactive() 化ではメソッドと state の同居でぎこちなくなる、getter/setter 案では state が増えるたび冗長になる、という代替案の弱点と比較している。
• 注意点として、戻り値を分割代入するとリアクティビティが切れること、TypeScript の readonly 判定が消えるため明示的な戻り値型注釈が必要になることを明記している。

Next.js + Honoでサウナ記録PWAを個人開発した話 — AIを活用した1週間のMVPリリース戦略

Source: Qiita | Published: 2026-05-07 09:47 JST

• 1 週間で MVP リリースを目標に、サウナ記録 PWA「Sauny」を Next.js 16（App Router）＋ Hono on Cloudflare Workers ＋ Cloudflare D1 ＋ Drizzle ORM ＋ shadcn/ui ＋ Tailwind v4 ＋ TanStack Query v5 ＋ Better Auth で構築した記録。
• Cloudflare Pages との相性と Edge ランタイムでの型安全 RPC を理由に Next.js／Hono 構成を選び、Edge 上で Drizzle を運用するために pnpm Workspaces ＋ Turborepo の monorepo を採用。
• AI 活用の核は Claude Design で HTML/JSX のインタラクティブプロトタイプを _prototypes/ に置き「真の仕様書」として扱う方法で、AI エージェントがそれを shadcn/ui コンポーネントへ変換するワークフロー。
• 最大のハマりは SNS ログインで、Cloudflare の Edge Runtime が Worker 内で HTTP 302 を自動追従して OAuth レスポンスがブラウザに戻らない問題が発生。fetch に redirect: 'manual' を指定して回避した。
• 1〜4 月にリリース済みの 6 サービスから抽出したテンプレートリポジトリを土台にすることで、雛形セットアップを省略し「空リポジトリを最初にデプロイし、機能を継ぎ足しながら本番反映を回す」戦略を成立させた。

個人開発SaaSの従量課金設計2026 — Stripe Meter API で「使った分だけ課金」を5ファイルで実装する

Source: Qiita | Published: 2026-05-07 11:08 JST

• 個人開発 SaaS の従量課金を Stripe Meter API ＋ Supabase で「Stripe Dashboard ＋ migrations ＋ /api/usage/record ＋ /api/stripe/webhook ＋ UsageMeter コンポーネント」の 5 ファイルだけで構築する設計。
• Stripe 側は Meter（イベント名 ai_token_consumed、SUM 集計）と「Per unit 価格」を作成し、たとえば「¥0.05 / 1,000 tokens」を紐付ける。
• DB は usage_events テーブルにイベントを書き込み、usage_monthly マテリアライズドビューで date_trunc 月次集計する構造。
• 記録 API は Supabase への INSERT と同じトランザクション境界で stripe.billing.meterEvents.create() を叩く dual-write 方式で整合性を保つ。
• ダッシュボード用の UsageMeter.tsx は当月使用量を取得して進捗バー表示し、上限の 90% 到達で警告表示する再利用可能な React コンポーネント。

Anthropic、SpaceXと提携、Claude Codeの利用制限を大幅に緩和

Source: gihyo.jp | Published: 2026-05-07 11:05 JST

• Anthropic が 5 月 6 日に SpaceX と提携し、220,000 GPU 超（H100／H200／GB200）を擁する Colossus 1 データセンタの全コンピュートを獲得した。
• 提携と同時に Claude Code の 5 時間あたり利用枠が Pro／Max／Team／sheet-based Enterprise で 100% 拡張された。
• Pro／Max プランではピーク時のレートダウンを撤廃し、混雑時間帯でも一定の処理性能を維持できるようにした。
• API 側でも Claude Opus モデルのレート上限が大幅に引き上げられ、本番運用ワークロードでの上限張り付き問題が緩和される。
• Anthropic は SpaceX との「軌道上 AI コンピュート」（マルチギガワット級）への発展も示唆しており、Amazon／Google／Broadcom／Microsoft／NVIDIA との既存契約と並ぶ大型供給契約となった。

AIエージェントを作れる「Google Agent Studio」／Amazon S3がファイルシステムに／ローカルAI環境を配布「Foundry Local」ほか、2026年4月の人気記事

Source: Publickey | Published: 2026-05-07 23:51 JST

• 2026 年 4 月の Publickey 人気記事ランキングで首位は Gemini Enterprise Agent Platform 配下の「Google Agent Studio」（ローコードで AI エージェントを作成）。
• 2 位は Amazon S3 をファイルシステムとして直接マウントできる新機能、3 位は Microsoft の Mac／Linux 向けローカル AI 環境配布「Foundry Local」。
• 開発者ツール系では Vercel の WebAssembly ベースブラウザ・ターミナルエミュレータ「wterm」、Rust 製ブラウザエンジン Servo の本番投入準備、TypeScript の Go 化高速化が話題に上がった。
• インフラ系では Google Cloud Spanner Omni（分散 RDB のローカル設置）、Agentic Data Cloud（AWS／Azure／SaaS のデータ統合）、AWS App Runner と Oracle RDS Custom の終了が並ぶ。
• セキュリティ面では Trivy／axios を起点とした npm サプライチェーン脆弱性、コスト面では「2030 年までに LLM 推論コスト 90% 減」予測がそれぞれ取り上げられた。

A Scrollytelling Gift for Mum on Mother’s Day 2026

Source: CSS-Tricks | Published: 2026-05-07 23:22 JST

• CSS の scroll-snap-type: y mandatory ＋ scroll-snap-align: start と、scrollsnapchanging／scrollsnapchange イベントを組み合わせたスクロリーテリング作品の解説。
• scrollsnapchanging はユーザーがスナップ先パネルへ向けてスクロール中に発火し、scrollsnapchange はパネルが確定した瞬間に発火するため、UI のフェーズ管理に使い分けられる。
• 朝・夜シーンの遷移は決定論的アニメーション、UFO 軌道や文字物理は乱数を組み合わせ、CSS の予測可能性と JS の動的性を同居させている。
• UFO が文字に当たると弾く Pretext 的な物理表現や、コンテナ scroll-state クエリ（Chromium 限定）を使った状態駆動スタイリングを実装している。
• 現状は scroll-snap events モジュール対応の Chrome／Opera 限定で動作するため、対応ブラウザを明示してフォールバックを設計する必要がある。

Microsoft Edgeが保存したパスワードをプロセスメモリに平文展開している問題

Source: GIGAZINE | Published: 2026-05-07 12:45 JST

• ノルウェーの研究者 Tom Jøran Sønstebyseter Rønning が、Microsoft Edge が保存パスワードを起動時に全件復号してプロセスメモリに平文展開している事実を公表した。
• ユーザーが該当サイトを訪問していなくても、Edge プロセスは起動直後から全パスワードを平文で保持しており、EdgeSavedPasswordDumper.exe のような自作ツールで管理者権限から抽出可能。
• Edge は UI のパスワード一覧表示時に再認証を要求するが、内部メモリ上では既に全件平文化されているという矛盾が指摘されている。
• Chromium 系の中でも Edge 固有の挙動で、Chrome は同種抽出を困難にする別アーキテクチャを採用していると報告された。
• Microsoft 側は「攻撃には先行して PC が侵害されている必要がある」として独立脆弱性ではないと主張している。

Google Chromeが約4GBのGemini Nano AIモデルを無断ダウンロードしている問題

Source: GIGAZINE | Published: 2026-05-07 12:00 JST

• プライバシー監査者 Alexander Hanff が、Chrome の OptGuideOnDeviceModel フォルダ内に約 4GB の weights.bin（Gemini Nano のニューラルネットワーク重み）が無断ダウンロードされていることを公開した。
• ダウンロードはユーザー操作なしで開始され、Apple Silicon Mac で 14 分 28 秒を要する規模であり、削除しても on-device AI を無効化しない限り再ダウンロードされる。
• Chrome は GPU・メモリ仕様を判定したうえで条件を満たすデバイスにのみ配布するため、ユーザーは事前同意なく 4GB のストレージを消費させられる。
• 5 月 5 日リリースの Chrome 148 で「Prompt API」が導入され、Web サイト側からこの on-device モデルにアクセスできるようになった。
• 「Help me write」や詐欺検知などの機能で利用される一方、4GB のディスク要件はユーザーに事前告知されておらず、プライバシーと容量の両面で問題視されている。

All Articles

Zenn

Qiita

gihyo.jp