Web Dev Digest: 2026‑05‑21
Top 20
Node.js 24.16.0 (LTS) リリース
Source: Node.js Blog | Published: 2026-05-21 22:25 JST
- LTS（Krypton）系の 24.16.0 がリリースされ、crypto に UUIDv7 を生成する
randomUUIDv7()（PR #62553）と Ed25519 の context パラメータ対応（#62474）が入った - HTTP では
IncomingMessage.signalで AbortSignal を扱えるようになり（#62541）、ClientRequestの options マージを堅牢化（#63082）、sync な request destroy 時のリスナーリークも修正 - fs に
fs.stat()の AbortSignal 対応（#57775）と statfs のfrsize公開（#62277）、ESM ローダーの fs パッチ可能性を復元（#62835）、新エラーERR_REQUIRE_ESM_RACE_CONDITION（#62462）を追加 - 同梱依存は npm 11.13.0 / OpenSSL 3.5.6 / libuv 1.52.1 / undici 7.25.0 / ICU 78.3 / corepack 0.35.0 に更新
- テストランナーに
--randomize-order（#61747）とAbortSignal.timeoutのモック対応（#60751）が入り、QUIC はコンパイル時フラグ裏に移動（#61444）、リリースマネージャは Antoine du Hamel
Vercel CLIで異常検知アラートの詳細を取得できるように
Source: Vercel Changelog | Published: 2026-05-21 18:00 JST
- Vercel CLI に
vercel alertsコマンドが追加され、チームまたはプロジェクト単位の異常検知アラートをターミナルから一覧取得できるようになった - 各アラートには開始時刻・アラート種別・現在アクティブかどうかが表示される
--aiフラグを付けると AI による調査結果がアラートと並んで表示され、ターミナルを離れずに原因究明と対応ができる- 人間だけでなく自動エージェントもインシデント対応を CLI 内で完結できる点が狙い
- 利用には Observability Plus サブスクリプションが必要
Google、モダンなWeb開発を支援するエージェントスキル「Modern Web Guidance」を公開
Source: gihyo.jp | Published: 2026-05-21 18:42 JST
- Google が Google I/O 2026 で、コーディングエージェント向けスキル「Modern Web Guidance」を OSS（GitHub: GoogleChrome/modern-web-guidance）として公開した
- 「モデルの学習データにレガシーコードが多く古い実装が選ばれやすい」課題への対策で、数十の新Web機能と100以上の実装場面をカバー（Popover API・CSS Anchor Positioning・
<dialog>・パスキー・CSP・Core Web Vitals など） - Baseline と連携し、開発者が選んだ Baseline ターゲットに応じて使う機能とフォールバックを判断する
npx modern-web-guidance@latest installで導入でき、Antigravity・GitHub CLI・Gemini CLI・Claude Code など複数エージェントに対応、Chrome拡張向けスキルも用意- Chrome DevTools for agents と組み合わせると、エージェントがコンソールログ・ネットワーク通信・アクセシビリティツリーを参照して検証・修正できる
Next.js における API クライアントの選び方
Source: Zenn | Published: 2026-05-21 22:57 JST
- ts-rest・tRPC・Hey API の3つを比較し、「Next.js + monorepo で外部サービスからも呼びたいなら ts-rest が最もフィットする」と結論づけた
- ts-rest は Zod v4対応（v3.53+）で contract をサーバー/クライアント双方に縛れ、OpenAPI spec の自動生成も可能だがセットアップがやや複雑
- tRPC は「Next.js 内で完結するなら最もシンプル」だが、外部クライアントや AI Agent から REST を叩く用途には向かず OpenAPI対応（trpc-openapi）も不安定
- Hey API は Zod v4対応かつ軽量でランタイムオーバーヘッドがほぼなく、OpenAPI spec が先にある／外部API接続に最適だが spec が必須
- 判断軸として AI Agent や外部サービスからの呼び出し可否を重視している
Drupal Coreで約7年ぶりとなるセキュリティリリース
Source: Qiita | Published: 2026-05-21 18:30 JST
- Drupal Core で約7年ぶりとなる「Highly Critical」相当のセキュリティリリースが出たが、影響は限定的だったと記録している
- SA（セキュリティアドバイザリ）は米国時間2026年5月18日（JST 5月19日）公開、脆弱性の技術的詳細は非公開
- 影響を受けるのは「PostgreSQL をデータベースとして使用している Drupal サイトのみ」と判明
- 著者は当初緊急対応を実施したが、SA公開後に影響対象が明確化したため、顧客サイトへの緊急対応は不要と判断したと述べている
- 対象バージョンや脆弱性の種別は記事では明記されておらず、Drupal側も技術的詳細を非公開にしている点が特徴
【JavaScript】現場参画前の未経験エンジニアは絶対に知っておきたい「空配列 [] はtrue」
Source: Zenn | Published: 2026-05-21 22:02 JST
- JavaScript では空配列
[]や空オブジェクト{}が truthy になるため、if (!item)での存在チェックが空コレクションを取りこぼすと警告している - falsy なのは
false / 0 / -0 / 0n / "" / null / undefined / NaNのみで、それ以外（[]・{}含む）は全て truthy - 配列は
if (!item?.length)、オブジェクトはif (Object.keys(item ?? {}).length === 0)で判定すべきと提示 - API レスポンスの「空配列が返ってきたら早期 return したい」場面で特に問題化しやすい実務上の落とし穴として整理している
- 条件分岐を書く際にデータ型と falsy/truthy の境界を理解しておくことが予期せぬ挙動を防ぐ、という主張で締めている
React × Tailwind CSS 入門 #03｜useStateで動くUIを作る
Source: Zenn | Published: 2026-05-21 22:26 JST
- React の
useStateフックを使ってカウンターとトグルという2つの具体例で「状態（state）」の基礎を解説する入門連載第3回 - state を「コンポーネントが持つデータ」として位置づけ、再レンダリングと結びつけて説明する
- 題材は React + Tailwind CSS の組み合わせ
- 著者は state の理解を AI コーディングアシスタントへの的確なプロンプト出しの前提と位置づけている
- 「コンポーネントを AI に作らせる前に state の理解が不可欠」という主張
@tabler/icons-svelte を @tabler/icons-svelte-runes へ移行する
Source: Zenn | Published: 2026-05-21 05:50 JST
- Svelte 5 の Runes 導入に伴い、アイコンライブラリを
@tabler/icons-svelteから後継の@tabler/icons-svelte-runesへ移行する手順をまとめている - 新パッケージは TypeScript サポートが追加されている
- 主な作業は import 文のパッケージ名書き換え（
@tabler/icons-svelte→@tabler/icons-svelte-runes）とパッケージの再インストール - import が多いプロジェクト向けに、
git grepとperlで.svelte/.ts/.jsの import パスを一括置換するシェルスクリプトを提示（Windows は Git Bash 推奨、事前 commit を推奨） - 移行によるパフォーマンスの変化はないと明言しており、小規模なコードベースなら手動コマンドでの置換でも問題ないとしている
【React】「別タブに切り替えて保存」でデータが壊れる？コンポーネント設計のアンチパターンと対策
Source: Qiita | Published: 2026-05-21 17:07 JST
- React で「メインタブで数値入力 → 別タブに切替 → 親の保存ボタン」を押すと自動計算が走らずデータが壊れる原因と対策を解説している
- 原因は、表示されていない（アンマウントされた）コンポーネント内のロジックが完全に消滅するという React の挙動
- アンチパターンは自動計算ロジックを子（メインタブ）の
useEffectに書くこと。アンマウント時にそのロジックごと消える - 対策は計算ロジックを親へ「リフトアップ」し、親でデータと計算を一元管理、子は表示と入力に専念させる
- これによりタブ切替に関わらず常に最新データが計算・保持される
Laravel & React Webアプリ開発のテスト連載
Source: Qiita | Published: 2026-05-21 20:17 JST
- 1年目エンジニアによるフルスタック（Laravel + React）開発記録の連載で、今回はフィーチャーテストに焦点を当てている
- レビュー・コメント・ブックマークといったコントローラ機能のテストを対象としている
- バックエンド（Laravel）側の機能テストを通じてコントローラの挙動を検証する流れを示している
- 1年目エンジニアが学習過程をそのまま記録する形式で、フルスタック開発の実装記録の続編にあたる
- レビュー・コメント・ブックマーク機能のテストを具体的な題材として扱う
【AWS】CodePipeline を使った CI/CD パイプライン構築
Source: Qiita | Published: 2026-05-21 21:09 JST
- AWS CodePipeline を使って GitHub リポジトリから React/TypeScript/Vite アプリを自動デプロイする CI/CD 構築手順を解説している
- ソースは GitHub、ビルド対象は Vite ベースのフロントエンドアプリ
- ソース取得（GitHub）からビルド・デプロイまでを CodePipeline のステージとして繋ぐ実装例を具体的に示している
- ビルド対象は Vite ベースの React/TypeScript フロントエンドアプリで、GitHub への push を起点に自動デプロイされる構成
- 継続的インテグレーション・デプロイの実践的なパイプライン構成サンプルとして提示している
Vercel × FastAPI で長時間SSEを実装したら2つの罠にハマった話
Source: Zenn | Published: 2026-05-21 22:25 JST
- Vercel 上の FastAPI で長時間の Server-Sent Events を実装する際にハマった2つの罠を共有している
- 1つは Vercel Functions の「60秒 SSE タイムアウト」制約で、長時間ストリーミングが途中で切れる問題
- ローカル開発では再現せず、本番デプロイ時に初めて顕在化した制約として記録されている
- FastAPI と Vercel Functions の組み合わせ特有の SSE 挙動を実装視点で説明している
- 60秒制限下で長時間ストリーミングを成立させるための回避策に踏み込んでいる
PostgreSQL 16から17へのバージョンアップ手順 ─ Amazon Linux 2023標準で試してみた
Source: Qiita | Published: 2026-05-21 07:58 JST
- Amazon Linux 2023 標準リポジトリでは PostgreSQL 16/17 が同一データディレクトリ（
/var/lib/pgsql/data）とサービス名を共有するため pg_upgrade が使いにくく、dump/restore 方式を推奨している pg_dumpallで圧縮ダンプを取得するが、/tmpがメモリベースの tmpfs で容量が限られるためルートFS上に保存する必要がある- 旧版（16）を停止・削除→17をインストール・初期化→
gunzip -c | psqlで中間ファイルなしにリストア、という流れ - 最大のボトルネックは拡張機能の対応状況で、
pg_repackのような contrib外拡張は本体が17対応でもパッケージが追いつかずソースビルドが必要な場合がある - 事後作業として
ANALYZEによる統計再構築と拡張の更新が必須
sibling-index()とsibling-count()による数式的レイアウト
Source: Smashing Magazine | Published: 2026-05-21 17:00 JST
- CSS の
sibling-index()（1始まりの兄弟内位置）とsibling-count()（兄弟要素の総数）を使い、:nth-child()や JS なしで段階的なスタッガー演出を1行で書けることを解説している - ブラウザ対応は Chrome/Edge 138（2025年6月安定版）と Safari 26.2 が出荷済み、Firefox は未実装（Bugzilla #1953973）でカバレッジは全トラフィックの約75〜80%
- 具体例として
animation-delay: calc(sibling-index() * 100ms)のスタッガー、calc(100% / sibling-count())の等幅タブ、cos/sin と組み合わせた円形メニュー、HSL での色相分配などを提示 - 落とし穴として
display:noneの要素も数に含まれて連番に隙間が出ること、Shadow DOM の slot 内容は数えないこと、大量（1万件超）の先頭挿入で全兄弟の再計算が走ることを挙げる - フォールバックは
@supports (z-index: sibling-index())でのプログレッシブエンハンスメントを推奨
GitHubの内部情報が流出、Visual Studio Codeの拡張機能経由で約3800のリポジトリに不正アクセス
Source: GIGAZINE | Published: 2026-05-21 14:10 JST
- 悪意あるコードが仕込まれた VS Code 拡張「Nx Console v18.95.0」が侵入経路となり、GitHub 内部の約3800リポジトリへの不正アクセスが発生したと報じている
- 不正版は Visual Studio Marketplace で約18分、OpenVSX で約36分公開されていた
- 拡張は GitHubトークン・npmトークン・AWS情報・HashiCorp Vault・Kubernetes認証情報・1Password・秘密鍵・Docker・GCP認証情報の収集を試み、HTTPS/GitHub API/DNS 経由で外部送信した
- GitHub は2026年5月18日に侵害を検知・封じ込め、問題バージョンを削除し、5月18〜19日に重要なシークレットをローテーションした
- 影響は内部リポジトリに限定され顧客データへの影響は確認されていないが、一部内部リポジトリに顧客サポート情報が含まれる可能性がある
Zed、エージェントをターミナルで管理できる「ターミナルスレッド」を追加
Source: gihyo.jp | Published: 2026-05-21 11:09 JST
- Zed v1.3.5（2026年5月20日リリース）が、ターミナル上のコーディングエージェントをエージェントパネルのスレッドとして実行・管理できる「ターミナルスレッド」を追加した
- これまで Zed 組み込みエージェントのみ管理可能だったが、ターミナル稼働のエージェントも Threads サイドバーで並べて管理できるようになった
- Anthropic が6月15日から専用クレジットを従量課金へ変更するため、既存 Claude サブスクリプション内で Claude Code をターミナルから使い続ける唯一の方法がこの機能だと説明している
- 対応エージェントは ACP非対応の Amp、Claude Code ターミナル、Codex、OpenCode、Pi など複数
- ターミナル稼働のエージェントを Zed 組み込みエージェントと同列のスレッドとして扱える点が特徴
Google Cloudが誤ってアカウント停止、Railway全体が約8時間ダウンした障害の全貌
Source: GIGAZINE | Published: 2026-05-21 21:00 JST
- Google Cloud が誤って Railway の本番用アカウントを一時停止したことで、Railway 全体が約8時間（JST 5月20日7:20頃〜15:14頃）ダウンした障害の全貌を解説している
- ダッシュボード・API・制御プレーン・DB・コンピュート基盤の一部が Google Cloud 上にあったため中核機能が停止、ピーク時には全リージョンのワークロードが到達不能になった
- 全体波及の原因は、経路表（「このURLはこの実行環境へ」の対応表）を配信するネットワーク制御プレーンが Google Cloud に依存しており、配信停止でエッジプロキシが転送先を判断できなくなったため
- 復旧経緯は 7:10 ヘルスチェック失敗検知→7:29 GCPアカウント復旧→10:38 トラフィック回復開始→15:14 全体復旧確認→16:57 解決済み更新
- 再発防止として Google Cloud 依存を排し、AWS と Railway Metal 上にも高可用DBを配置する予定
All Articles
Zenn
| # | Title | Summary | Author | Published |
|---|---|---|---|---|
| 1 | Next.js における API クライアントの選び方 | (Top 20 参照) | @yasunami_daichi | 22:57 |
| 2 | 【JavaScript】未経験エンジニアは知っておきたい「空配列 [] はtrue」 | (Top 20 参照) | @dev_notes | 22:02 |
| 3 | React × Tailwind CSS 入門 #03｜useStateで動くUIを作る | (Top 20 参照) | @koenjineer | 22:26 |
| 4 | @tabler/icons-svelte を @tabler/icons-svelte-runes へ移行する | (Top 20 参照) | @snowcait | 05:50 |
| 5 | Vercel × FastAPI で長時間SSEを実装したら2つの罠にハマった話 | (Top 20 参照) | @nobalto | 22:25 |
| 6 | AIペアプロで作った家計簿SaaSが本番デプロイで踏んだ罠3つ | Stripeのexports is not defined(ESM/CJS不整合)、Supabase RLS無限再帰、PostgREST INSERT RETURNINGの403をSECURITY DEFINER関数とSELECTポリシー修正で解決 | @yukidev25 | 09:47 |
| 7 | GitHub Actions の AWSキーは「保存しない」設計に — Secrets漏洩リスクとOIDC移行 | AWSクレデンシャルをSecretsに保存する方式から、漏洩リスクを根絶するOIDCベース認証への移行を推奨する | @hisa_tech_2973 | 22:28 |
| 8 | CloudWatch Logs のエラー分類を Claude に任せる — Bedrock + Lambda の SRE設計 | Lambda内でBedrock経由のClaudeを使い、手動パターンマッチに代えてCloudWatch Logsのエラーを意味解釈で分類するSRE構成 | @ojt | 21:12 |
| 9 | ECR イメージスキャンの脆弱性検出時に CDK デプロイをブロックする | ECRの脆弱性検出時にデプロイを止めるOSSのCDK Construct「ecr-scan-verifier」を公開、basic/enhanced両スキャンに対応 | @go_to_k | 20:39 |
| 10 | Perry TypeScript ベンチマーク (2026-05-21) | Perry言語の速度が遅い問題は性能限界でなく「GCのblock-reclaimトレードオフ」が原因と開発者Ralphから判明 | @aya_koto | 20:47 |
| 11 | AIエージェントに「確実性」を与えるMCPサーバーを個人開発した話 | 日付計算・タイムゾーン変換・営業日計算をエージェントに確実に提供するMCPサーバーを個人開発した記録 | @redwing | 19:25 |
| 12 | Omni Flash API で画像・動画生成を統合する | 複数の画像・動画生成モデルを単一RESTエンドポイントで「タスク作成→ポーリング」する統合API Omni Flashの活用法 | @1girl | 18:02 |
| 13 | ZenrowsとBright Dataを比較してCloudflare対策を選ぶ方法【2026年版】 | Cloudflareの「Just a moment…」回避向けにZenrowsとBright Dataを料金・仕様（2026年5月時点）で比較 | @datajournal1 | 19:21 |
| 14 | Writeup for Kakuzuke | Daily AlpacaHackの「Kakuzuke」問題のWriteup。配布されたindex.jsのExpress.js実装を解析する内容 | @taa_tomousimasu | 17:41 |
Qiita
| # | Title | Summary | Author | Published |
|---|---|---|---|---|
| 1 | Drupal Coreで約7年ぶりとなるセキュリティリリース | (Top 20 参照) | @chibikuro | 18:30 |
| 2 | 【React】「別タブに切り替えて保存」でデータが壊れる？アンチパターンと対策 | (Top 20 参照) | @takkykoborin | 17:07 |
| 3 | Laravel & React Webアプリ開発のテスト連載 | (Top 20 参照) | @ArakiPhp | 20:17 |
| 4 | 【AWS】CodePipeline を使った CI/CD パイプライン構築 | (Top 20 参照) | @Yasushi-Mo | 21:09 |
| 5 | PostgreSQL 16から17へのバージョンアップ手順 ─ Amazon Linux 2023標準で試してみた | (Top 20 参照) | @matsutomu | 07:58 |
| 6 | Error inserting data: code 22P02（uuid型の入力構文エラー） | booksテーブルのフィールド型設定ミスでデータ登録時にinvalid input syntax for type uuid(22P02)が発生した事例 | @o68606007 | 22:40 |
| 7 | ブラウザで動く数式パーサを 250 行で書く — 再帰下降、右結合 ^、-2^2 = -4、エラー位置レポート | 約250行の再帰下降パーサで右結合の冪乗とエラー位置レポートに対応した、ブラウザ動作の数式パーサ実装 | @sen-ltd | 07:54 |
| 8 | pnpm を触ってみた | npm互換で高速なpnpmが「Phantom Dependencies」を解消し、CI/モノレポと相性が良く移行コストも低いと整理 | @iGeMi | 21:19 |
| 9 | SitePruneという「コンテンツ整理判断」向けOSSをalpha公開した | 長期運用サイトで残すべき記事の判断やnoindex候補の特定を支援するOSS「SitePrune」をalpha公開 | @hirohirohotate-sketch | 15:33 |
| 10 | プログラミング未経験の現場人間がAI壁打ちだけで鋼材切断SaaS（TORIAI）を作った | 「JavaScriptもSQLも読めない」状態でAI壁打ちのみで鋼材切断計算SaaS「TORIAI」を作り設計レビューを募る | @toriaiapp | 22:21 |
gihyo.jp
| # | Title | Summary | Published |
|---|---|---|---|
| 1 | Google、モダンなWeb開発を支援するエージェントスキル「Modern Web Guidance」を公開 | (Top 20 参照) | 18:42 |
| 2 | Zed、エージェントをターミナルで管理できる「ターミナルスレッド」を追加 | (Top 20 参照) | 11:09 |
GIGAZINE
| # | Title | Summary | Published |
|---|---|---|---|
| 1 | GitHubの内部情報が流出、VS Code拡張機能経由で約3800のリポジトリに不正アクセス | (Top 20 参照) | 14:10 |
| 2 | Google Cloudが誤ってアカウント停止、Railway全体が約8時間ダウンした障害の全貌 | (Top 20 参照) | 21:00 |
Node.js Blog
| # | Title | Summary | Published |
|---|---|---|---|
| 1 | Node.js 24.16.0 (LTS)（Node.js 24.16.0 LTS） | (Top 20 参照) | 22:25 |
Vercel Changelog
| # | Title | Summary | Published |
|---|---|---|---|
| 1 | Pull anomaly alert details using the Vercel CLI（Vercel CLIで異常検知アラートを取得） | (Top 20 参照) | 18:00 |
Smashing Magazine
| # | Title | Summary | Published |
|---|---|---|---|
| 1 | Advanced Tree Counting: Mathematical Layouts With sibling-index() And sibling-count()（sibling-index()とsibling-count()による数式的レイアウト） | (Top 20 参照) | 17:00 |